Los nuevos Themes (basados en secciones y bloques) componen las páginas de la tienda a partir de secciones y bloques que los usuarios pueden reorganizar desde el Brand Editor, en lugar de estar fijadas en templates .tpl estáticos. Este modelo desacopla el contenido de la estructura del código: el JSON template define qué se muestra, el schema define qué puede editar el usuario, y los archivos .tpl definen cómo se renderiza.
Conceptos clave
Section
Una section es un archivo .tpl que renderiza como una unidad de ancho completo dentro de una página. Cada section declara al final un bloque {% schema %} con los settings que el usuario puede configurar, los tipos de bloque que acepta y los presets disponibles en el editor.
Las sections viven en sections/. Las que tienen el prefijo main- (por ejemplo, main-product.tpl, main-cart.tpl) representan el contenido principal de un tipo de página específico y no son reutilizables entre páginas.
Block
Un block es un componente reutilizable que se usa dentro de una section. También tiene su propio {% schema %} con settings, bloques hijo aceptados y presets. Los usuarios pueden agregar, quitar y reordenar bloques dentro de una section desde el Brand Editor.
Los blocks viven en blocks/ y se dividen en dos categorías:
- Genéricos (
heading.tpl,text.tpl,image.tpl,button.tpl,group.tpl, …) — se pueden usar en cualquier section que los acepte. - Específicos de una section (
slide.tpl,banner.tpl,product-info.tpl,header-logo.tpl, …) — están ligados a una section particular.
Snippet
Un snippet es un fragmento sin schema. Los snippets manejan la lógica de experiencia de compra — carrito, pagos, envíos, formularios, variantes de producto, filtros — y son reutilizables pero no editables desde el Brand Editor.
Los snippets viven en snippets/ y se incluyen con:
{%include snippets/cart/cart-totals.tpl %}
Opcionalmente se les puede pasar un objeto de contexto:
{% include snippets/notification.tpl with { type: add_to_cart } %}JSON template
Un JSON template vive en templates/ (por ejemplo, templates/pages/home.json o templates/layout/header.json). Es el blueprint de una página o región de layout: qué sections aparecen, en qué orden, con qué settings, y qué blocks contienen. El usuario puede personalizarlo desde el editor sin tocar código.
Hay dos tipos:
| Tipo | Ubicación |
Renderizado por |
|---|---|---|
| Page templates |
templates/pages/*.json |
{{ page_template_content }} dentro de <main> |
| Layout templates |
templates/layout/header.json, templates/layout/footer.json |
|
Schema
El schema es el bloque JSON al final de cada section y block (entre {% schema %} y {% endschema %}). Es lo que impulsa la UI del editor: tipos de input, valores por defecto, visibilidad condicional, presets y qué blocks acepta cada section o block.
Es la pieza de mayor impacto en un nuevo Theme (basado en secciones y bloques): la experiencia de edición que recibe el usuario depende directamente de qué tan rico y bien armado esté el schema.
Flujo de renderizado
templates/pages/<página>.json
└── declara qué sections aparecen y sus settings
└── sections/<tipo>.tpl lee section.settings.* y section.blocks
└── blocks/<tipo>.tpl lee block.settings.* (y opcionalmente block.blocks)
└── puede incluir snippets/<...>.tpl para lógica de compra
layouts/layout.tpl envuelve todo:
<head> → fuentes, CSS crítico, tokens de estilo
<body>
{% layout_template 'header' %} ← templates/layout/header.json
<main>{{ page_template_content }}</main> ← templates/pages/<página>.json
{% layout_template 'footer' %} ← templates/layout/footer.json
modales, notificaciones, scripts
En síntesis: el JSON template es el blueprint, los archivos .tpl de sections y blocks son los renderers, el schema determina qué puede editar el usuario, y los snippets manejan la lógica de experiencia de compra que no necesita ser editable.
Artículos de esta serie
- Estructura de carpetas — árbol de carpetas completo y detalle por carpeta.
- JSON templates — estructura del archivo JSON, page templates y layout templates.
- Sections y Blocks — anatomía de archivos
.tpl, schema, iteración de blocks y anidamiento. - Schema reference — tipos de setting, global settings y traducciones.
- Integración con apps de plataforma — Nube SDK slots y atributos
data-store.