> ## Documentation Index
> Fetch the complete documentation index at: https://docs.riqra.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Anatomía de un tema

> El árbol de archivos de un tema: secciones, snippets, plantillas, configuración y assets.

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

```text theme={null}
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:

```json theme={null}
[
  {
    "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](/temas/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:

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

<Note>
  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.
</Note>

## `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`:

```json theme={null}
{
  "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.

```liquid theme={null}
{%- render 'product-card', product: card, section_id: section.id -%}
```

<Warning>
  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`.
</Warning>

## `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`:

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