Estructura de un theme

Un theme es un conjunto de archivos de texto con la misma organización que un theme de Shopify Online Store 2.0.

assets/          CSS, JavaScript y SVG (archivos sueltos, sin subcarpetas)
config/
  settings_schema.json   settings globales del theme (grupos del editor)
  settings_data.json     valores guardados y secciones estáticas
layout/
  theme.liquid           layout principal (obligatorio)
  password.liquid        layout de la página "próximamente"
locales/
  es.json                textos del theme para el filtro t
sections/        secciones: HTML en Liquid + {% schema %}
snippets/        fragmentos reutilizables para {% render %}
templates/       un JSON por tipo de página

Templates

Cada tipo de página usa un template de templates/. Todos son JSON (no hay templates .liquid).

Un template lista sus secciones por id y las ordena con order:

{
  "sections": {
    "main": { "type": "main-product", "settings": { "show_vendor": true } },
    "relacionados": {
      "type": "featured-collection",
      "settings": { "heading": "También te puede gustar", "collection": "all" }
    }
  },
  "order": ["main", "relacionados"]
}

• type es el nombre del archivo de sections/ (sin .liquid).
• settings y blocks guardan lo que el comerciante eligió en el editor; lo que falta usa el default del schema.
• "disabled": true oculta una sección o un bloque sin borrarlo.
• "layout": "password" elige otro layout; "layout": false renderiza sin layout.
• Hay un tope de secciones por template: las que lo superan no se muestran.

Templates alternativos

Si el theme trae templates/page.<handle>.json, la página con ese handle lo usa en lugar de page.json. Por ejemplo, page.contacto.json para /pages/contacto. En Liquid, template.name es page y template.suffix es contacto.

Layouts

layout/theme.liquid envuelve todas las páginas. Tiene que imprimir {{ content_for_header }} dentro del <head> y {{ content_for_layout }} donde van las secciones del template:

<!doctype html>
<html lang="{{ request.locale.iso_code }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ page_title }}</title>
    <meta name="description" content="{{ page_description }}">
    <link rel="canonical" href="{{ canonical_url }}">
    {{ content_for_header }}
    {{ 'base.css' | asset_url | stylesheet_tag }}
    {{ 'theme.js' | asset_url | script_tag }}
  </head>
  <body class="template-{{ template.name }}">
    {% section 'header' %}
    <main id="contenido">{{ content_for_layout }}</main>
    {% section 'footer' %}
  </body>
</html>

Secciones estáticas

Las secciones que van en todas las páginas (encabezado, pie, barra de anuncios) se incluyen desde el layout con {% section 'nombre' %}. Sus valores se guardan en config/settings_data.json, dentro de current.sections:

{
  "preset": "moda",
  "current": {
    "color_accent": "#6545e8",
    "sections": {
      "header": {
        "type": "header",
        "settings": { "menu": "main-menu", "sticky": true }
      }
    }
  }
}

Settings globales

config/settings_schema.json es una lista de grupos. Cada grupo es una pestaña de Configuración del theme en el editor; el primero puede ser theme_info con el nombre y la versión:

[
  {
    "name": "theme_info",
    "theme_name": "Mi theme",
    "theme_version": "1.0.0",
    "theme_author": "Mi agencia"
  },
  {
    "name": "Colores",
    "settings": [
      { "type": "color", "id": "color_background", "label": "Fondo", "default": "#ffffff" },
      { "type": "color", "id": "color_accent", "label": "Acento", "default": "#6545e8" }
    ]
  }
]

En Liquid se leen con settings.<id>: {{ settings.color_accent }}. Los ids tienen que ser únicos en todo el archivo. Los tipos son los mismos que en las secciones: ver Secciones y settings.

Assets

Los archivos de assets/ se publican con el theme y se referencian con asset_url. Van sueltos (sin subcarpetas) y la URL cambia con cada versión publicada del theme, así que se pueden cachear sin miedo.

{{ 'base.css' | asset_url | stylesheet_tag }}
{{ 'theme.js' | asset_url | script_tag }}
<img src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}">

El CSS y el JavaScript que las secciones declaran con {% stylesheet %} y {% javascript %} se juntan en un archivo por tipo y se cargan solos desde content_for_header.

Traducciones

locales/es.json guarda los textos fijos del theme. Se leen con el filtro t, con claves separadas por puntos, variables y plurales:

{
  "general": { "view_all": "Ver todo" },
  "collections": {
    "products_count": { "one": "{{ count }} producto", "other": "{{ count }} productos" }
  }
}

{{ 'general.view_all' | t }}
{{ 'collections.products_count' | t: count: collection.products_count }}

Una clave que no existe se muestra como translation missing: es.<clave>, así es fácil encontrarla en la vista previa.