Anatomía de un tema

Un tema es un directorio plano con esta estructura (es lo que genera riqra-theme init):

mi-tema/
├── config/
│   └── settings_schema.json    # settings globales + theme_info
├── templates/
│   ├── index.json              # home
│   ├── product.json
│   ├── collection.json
│   ├── search.json
│   ├── cart.json
│   └── page.json
├── sections/
│   ├── header.liquid           # secciones con {% schema %}
│   ├── slideshow.liquid
│   ├── …
│   ├── header-group.json       # grupo de encabezado
│   └── footer-group.json       # grupo de pie
├── snippets/
│   └── product-card.liquid     # parciales para {% render %}
└── assets/
    ├── theme.css               # enlazado automáticamente
    └── theme.js                # enlazado automáticamente

No existen layout/, locales/ ni blocks/ como carpetas: el framework es dueño del documento HTML, los textos van inline en español y los bloques se declaran dentro del {% schema %} de cada sección.

`config/settings_schema.json`

Un arreglo de grupos de settings globales. La entrada theme_info es obligatoria y lleva los metadatos del tema:

[
  {
    "name": "theme_info",
    "theme_name": "Origin",
    "theme_author": "Riqra",
    "color_scheme": "only light"
  },
  {
    "name": "Colores de marca",
    "settings": [
      { "type": "color", "id": "brand_primary", "label": "Color primario", "default": "#407EFF" }
    ]
  }
]

color_scheme es una extensión de Riqra: declara el esquema de color CSS para el que está diseñado el tema. El detalle de los grupos y tipos está en Secciones y schema.

`templates/*.json`

Plantillas JSON al estilo OS 2.0: instancias de sección con clave propia más un arreglo order. Este es el index.json de Origin:

{
  "sections": {
    "hero-1": {
      "type": "slideshow",
      "settings": { "autoplay": true, "interval_ms": 3000 }
    },
    "featured-1": {
      "type": "featured-collection",
      "settings": {}
    }
  },
  "order": ["hero-1", "featured-1"]
}

Las plantillas subidas son defaults. La personalización del comerciante (secciones agregadas, settings cambiados) vive en la base de datos y siempre gana; una re-subida del tema nunca la sobreescribe.

`sections/*.liquid`

Cada sección es un archivo Liquid con un bloque {% schema %} al final que declara su nombre, settings, bloques y ubicaciones permitidas. Las secciones se renderizan en el servidor y el framework las envuelve en <div id="riqra-section-{id}">.

`sections/{header,footer}-group.json`

Los grupos de encabezado y pie envuelven todas las páginas — incluidas las rutas propias del framework como el checkout de carrito. Formato igual a una plantilla, más type, name y el opcional sticky:

{
  "type": "header",
  "name": "Encabezado",
  "sticky": false,
  "sections": {
    "announcement-1": { "type": "announcement-bar", "settings": {} },
    "header-1": { "type": "header", "settings": { "menu": "main-menu" } }
  },
  "order": ["announcement-1", "header-1"]
}

`snippets/`

Parciales invocados con {% render 'nombre' %}. Como en el Shopify moderno, render es aislado: el snippet solo ve los argumentos que le pasas.

{%- render 'product-card', product: card, section_id: section.id -%}

No nombres un argumento de render igual que una clave global (settings, cart, shop, …) ni que una meta-propiedad de Liquid como size — colisionan al resolverse dentro del snippet. Usa nombres propios: card_size, items_per_row.

`assets/`

Archivos estáticos servidos desde el CDN. assets/theme.css y assets/theme.js se enlazan automáticamente en todas las páginas — no hay theme.liquid donde enlazarlos a mano. El resto de assets se referencia con el filtro asset_url:

<img src="{{ 'logo.svg' | asset_url }}" alt="Logo">

Guía

Referencia

Anatomía de un tema

`config/settings_schema.json`

`templates/*.json`

`sections/*.liquid`

`sections/{header,footer}-group.json`

`snippets/`

`assets/`

​config/settings_schema.json

​templates/*.json

​sections/*.liquid

​sections/{header,footer}-group.json

​snippets/

​assets/

`config/settings_schema.json`

`templates/*.json`

`sections/*.liquid`

`sections/{header,footer}-group.json`

`snippets/`

`assets/`