Ejecuta tu tienda Shopify en local

Sigue con: Guía de Shopify CLI y Calculadora de comisiones Shopify México.

Paso a paso

Trabajar en local significa editar los archivos del tema (Liquid, CSS, JavaScript, JSON) en tu computadora con tu editor de código y ver el resultado en el navegador en segundos, sin usar el editor de código del administrador ni arriesgar la tienda publicada.

Instala los requisitos

Necesitas Node.js 22.12 o superior, Git 2.28.0 o superior y Shopify CLI. Las instrucciones por sistema operativo están en nuestra guía de Shopify CLI. En resumen:

npm install -g @shopify/cli@latest
shopify version

Duplica tu tema y no toques el publicado

En el administrador ve a Tienda online › Temas, abre el menú del tema publicado y elige Duplicar. Esa copia es tu red de seguridad. Si empiezas de cero, puedes crear un tema base con shopify theme init mi-tema, que clona el Skeleton theme de Shopify.

Descarga el tema

Crea una carpeta, entra en ella y descarga el tema. La primera vez, --store indica tu tienda y el CLI abre el navegador para que inicies sesión; después la recuerda (verifícalo con shopify theme info).

mkdir mi-tienda && cd mi-tienda
shopify theme list --store mitienda.myshopify.com
shopify theme pull --theme 123456789

Si tu tema ya vive en GitHub, clónalo en lugar de hacer pull:

git clone https://github.com/tu-usuario/mi-tema.git
cd mi-tema

Ponlo bajo control de versiones

Git te permite deshacer cualquier error. Haz un commit antes de cada cambio importante.

git init
git add .
git commit -m "Tema original descargado de Shopify"

Levanta el servidor local

Dentro de la carpeta del tema ejecuta:

shopify theme dev --store mitienda.myshopify.com

El CLI sube tu carpeta a un tema de desarrollo: oculto, temporal y que no cuenta para tu límite de temas. En la terminal verás tres enlaces: la vista previa local en http://127.0.0.1:9292, el editor de temas de ese tema de desarrollo y un enlace de vista previa para compartir. Si tu tienda aún tiene contraseña de acceso, agrégala:

shopify theme dev --store mitienda.myshopify.com --store-password tu-contraseña

Edita con recarga en vivo

Abre la carpeta en tu editor y guarda un cambio: el CSS y las secciones se recargan en caliente sin refrescar la página (modo hot-reload, el predeterminado). Si prefieres que siempre recargue la página completa usa --live-reload full-page; para desactivarlo, --live-reload off. ¿El puerto 9292 está ocupado? Usa --port 9293.

Sincroniza el editor de temas

Si tú o tu cliente mueven secciones o cambian textos desde el editor visual del tema de desarrollo, esos cambios viven en archivos JSON. Con --theme-editor-sync el CLI los baja a tu carpeta para que no se pierdan en el siguiente push:

shopify theme dev --theme-editor-sync

Sube y publica con seguridad

Cuando todo esté listo, súbelo como tema nuevo sin publicar, revísalo en celular y escritorio, y publícalo:

shopify theme push --unpublished
shopify theme list
shopify theme publish --theme 987654321

Git y la integración con GitHub

Shopify tiene una integración oficial con GitHub: desde Temas › Agregar tema › Conectar desde GitHub vinculas una rama de tu repositorio con un tema de la biblioteca. Cada push a esa rama actualiza el tema, y los cambios hechos en el editor de temas se guardan como commits en la rama. Un flujo práctico: rama main conectada al tema publicado, y ramas de trabajo que pruebas en local con theme dev antes de fusionarlas. Así nunca editas el tema en vivo directamente.

Buenas prácticas

• Trabaja siempre sobre el tema de desarrollo o una copia; nunca uses --allow-live en tu día a día.
• Antes de un push, haz theme pull --only "templates/*.json" --only config/settings_data.json para traer lo que cambiaron en el editor.
• Corre shopify theme check antes de publicar.
• Optimiza las imágenes nuevas con el optimizador a WebP y mide el resultado con el auditor de velocidad.
• Recuerda que el tema de desarrollo se borra tras siete días sin uso o al ejecutar shopify auth logout; tu carpeta local sí se conserva.

Solución de problemas

• "Invalid theme directory" o similar: no estás en la raíz del tema. Debes ver carpetas como layout, sections y templates.
• La página local pide contraseña o redirige: agrega --store-password con la contraseña de la tienda en línea (no la de tu cuenta).
• Error 401 o "not authorized": tu cuenta no tiene permiso de Temas o iniciaste sesión con otra. Ejecuta shopify auth logout y vuelve a entrar.
• Los cambios no se reflejan: revisa la terminal; si un archivo tiene error de Liquid, el CLI lo marca y no lo sube. Prueba --live-reload full-page.
• El checkout se ve igual: es normal; la vista previa local no muestra personalizaciones del checkout.
• Puerto ocupado: otra sesión sigue abierta. Ciérrala con Ctrl + C o usa --port.

Preguntas frecuentes

Comandos y comportamiento verificados contra la documentación de Shopify (shopify.dev) en octubre de 2026. Si algo cambió, shopify theme dev --help muestra las opciones vigentes.