Shopify Onboarding Dev

RG

Hola, quiero empezar a desarrollar para Shopify. Soy desarrollador pero nunca he tocado Shopify. Necesito crear una app para la tienda BotanicShop que añada un widget en el checkout con una guia de cuidados de plantas.

Rodrigo G. · dev@botanicshop.com · 10:42

C

Paso 1 — Deteccion del entorno

Entorno detectado: Claude Code. Procedo directamente con la ruta de instalacion correspondiente.

🔍 Entorno

✅

Cliente: Claude Code claude-code

✅

SO: macOS (darwin 25.3)

✅

Node: v20.15.0 detectado — compatible con @shopify/cli

⬜

Shopify CLI: No encontrado — instalacion necesaria

Claude · 10:42

C

Paso 2 — Instalando Shopify CLI

Shopify CLI no esta instalado. Ejecutando instalacion via npm:

terminal — claude-code

$ npm install -g @shopify/cli@latest

...

added 847 packages in 23s

$ shopify version

@shopify/cli/3.68.0 darwin-arm64 node-v20.15.0

✅

Shopify CLI 3.68.0 instalado correctamente.

Claude · 10:43

C

Paso 2b — Instalando Shopify AI Toolkit para Claude Code

Instalando el plugin de IA especifico para tu entorno (claude-code):

terminal — claude-code

/ plugin marketplace add Shopify/shopify-ai-toolkit

Fetching plugin from marketplace...

Plugin 'shopify-ai-toolkit' added from Shopify marketplace.

/ plugin install shopify-plugin@shopify-ai-toolkit

Installing plugin dependencies...

shopify-ai-toolkit@1.8.0 installed successfully.

MCP tools registered: shopify-admin, shopify-functions, shopify-liquid, shopify-storefront-graphql

✅

Shopify AI Toolkit 1.8.0 instalado y registrado en Claude Code.
Herramientas MCP disponibles: shopify-admin, shopify-functions, shopify-liquid, shopify-storefront-graphql.

Claude · 10:44

C

Paso 3 — Entorno listo

Shopify CLI 3.68.0 y el AI Toolkit 1.8.0 estan instalados y configurados en Claude Code.

🧾 Resumen del entorno

✅

Shopify CLI 3.68.0 — listo

✅

AI Toolkit 1.8.0 — registrado en Claude Code

✅

Cuenta Partner — detectada en partners.shopify.com

ℹ️

Dev store — puedes crear una gratis en dev.shopify.com/dashboard

Dado que quieres crear un widget en el checkout para BotanicShop, te dirijo a la skill correcta. ¿Que quieres construir exactamente?

🚀 ¿Hacia donde vas?

shopify-polaris-checkout-extensions

Checkout Extensions — UI blocks en el checkout (tu caso: widget Plant Care)

shopify-admin

Admin API — gestionar productos, pedidos, metafields desde la app

shopify-functions

Shopify Functions — logica de negocio en el checkout (descuentos, envios, validaciones)

💡

Para el widget de "Plant Care Assistant" en el checkout, la ruta optima es: shopify-polaris-checkout-extensions → crea un Checkout UI Extension con React + Polaris. Empieza con: shopify app generate extension --type=checkout_ui

Claude · 10:44

RG

Perfecto, quiero el widget en el checkout. Seguimos con shopify-polaris-checkout-extensions.

Rodrigo G. · 10:45

C

🎉

Onboarding completado. Tu entorno de Shopify Dev esta 100% operativo en Claude Code.
Transfiriendo al flujo shopify-polaris-checkout-extensions para construir el widget "Plant Care Assistant" de BotanicShop...

terminal — scaffold

$ shopify app generate extension \

--type=checkout_ui \

--name=plant-care-assistant \

--template=react

✓ Extension creada: extensions/plant-care-assistant/

→ src/Checkout.tsx

→ shopify.extension.toml

→ package.json

Siguiente: shopify app dev --store=botanicshop

Claude · 10:45

Shopify Onboarding Dev — BotanicShop

Paso 1 — Deteccion del entorno

Paso 2 — Instalando Shopify CLI

Paso 2b — Instalando Shopify AI Toolkit para Claude Code

Paso 3 — Entorno listo

🚀 ¿Hacia donde vas?