🔀
Aislado de producción
Los clientes nunca ven el tema de desarrollo. Solo tú accedes mediante una URL especial que el CLI proporciona.
Desarrollo
Development Theme
Una copia de trabajo de tu tema en la que puedes iterar sin afectar la tienda en producción.
¿Qué es un Development Theme?
Cuando ejecutas shopify theme dev, Shopify crea un tema marcado como "development" vinculado a tu sesión.
♻️
Hot reload
El CLI detecta cambios en tus archivos locales y los sube automáticamente. El navegador se refresca solo.
📋
Datos reales
Trabajas con productos, colecciones y configuraciones reales de tu tienda, no con datos inventados.
Estructura
Archivos de un tema Shopify
mi-tema/
layout/
theme.liquid
password.liquid
templates/
index.json
product.json
collection.json
cart.liquid
sections/
header.liquid
footer.liquid
hero-banner.liquid
snippets/
product-card.liquid
icon-cart.liquid
assets/
base.css
global.js
locales/
es.json
en.json
config/
settings_schema.json
settings_data.json
Flujo
Ciclo de desarrollo típico
1
Clonar el tema
Descarga el tema base con shopify theme pull o créalo con shopify theme init.
2
Lanzar dev server
Ejecuta shopify theme dev --store=tu-tienda.myshopify.com para hot reload.
3
Editar localmente
Modifica los archivos .liquid, JSON y CSS. Los cambios se sincronizan al instante.
4
Previsualizar
El CLI te da una URL con ?preview_theme_id=XXX para ver el resultado.
5
Publicar
Usa shopify theme push y publica el tema desde el admin de Shopify.