Empieza a crear un tema de Shopify: comandos de tema de Shopify CLI, qué contiene cada carpeta del tema, conceptos básicos de Liquid y plantillas JSON, con comandos para copiar.
Instala Shopify CLI, ejecuta shopify theme init para clonar el tema inicial Skeleton y luego shopify theme dev --store your-store para previsualizarlo en http://127.0.0.1:9292 con recarga en caliente en Chrome. Edita en local Liquid, CSS y las plantillas JSON, ejecuta shopify theme check para detectar errores y shopify theme push para subirlo.
Los comandos de tema de Shopify CLI que más vas a usar
Desarrollar temas significa editar el diseño de una tienda como archivos reales en tu ordenador, con tu propio editor y control de versiones, en lugar de hacerlo dentro del panel de administración. Recorre el explorador de carpetas de abajo para saber qué va en cada sitio y luego copia los comandos para poner en marcha una vista previa.
Liquid es el lenguaje de plantillas de Shopify. Las llaves dobles muestran un valor, como el título de un producto, y las etiquetas de llave y porcentaje contienen lógica como condicionales if y bucles. Los filtros cambian cómo se muestra un valor.
Los desarrolladores suelen trabajar en una tienda de desarrollo creada desde una cuenta de Shopify Partner. Consulta las condiciones actuales en el panel de Partner, porque pueden cambiar.
Un archivo de datos que enumera las secciones que muestra una página y sus ajustes. Necesita un objeto sections con al menos una sección y un array order con los IDs de las secciones.
La guía de inicio de Shopify dice que la vista previa con recarga en caliente solo funciona en Google Chrome. En otros navegadores, recarga a mano.
El comando init de la CLI clona Skeleton, una base mínima para un tema creado desde cero. Parte de un tema gratuito completo si lo que quieres es sobre todo ajustar un diseño existente.
Sustituye my-store por el nombre myshopify de tu tienda. Ejecútalos desde una carpeta vacía.
init clona el tema inicial Skeleton; dev muestra una dirección local que recarga tus cambios de CSS y de secciones.
Ejecuta check antes de cada subida. share crea una copia nueva sin publicar, la opción más segura para la revisión del cliente.
Las etiquetas de salida muestran valores, las etiquetas de lógica deciden qué se renderiza y los filtros transforman un valor.
La etiqueta if oculta la línea del precio comparativo cuando no hay rebaja; el filtro money formatea el precio en la moneda de la tienda.
Cada carpeta de un tema estándar y lo que contiene. Elige una para resaltarla.
Imágenes, CSS y archivos JavaScript que usa el tema.
Bloques de tema, el tipo de bloque más reciente en torno al que se construyen temas como Horizon.
Archivos de configuración del tema, incluido settings_schema.json.
Archivos de traducción, para que el propio texto del tema pueda mostrarse en otros idiomas.
Las secciones y grupos de secciones del tema.
Pequeñas piezas reutilizables de código Liquid.
Plantillas para las páginas de cuentas de cliente heredadas.
Empieza gratis · Sin tarjeta de crédito