Secciones y settings

Las secciones son las piezas que el comerciante agrega, ordena y configura en el editor de temas. Cada una es un archivo de sections/.

Una sección

Una sección tiene su HTML en Liquid y, al final, un {% schema %} con JSON que declara su nombre, sus settings y sus bloques. Este es sections/faq.liquid:

<div class="faq page-width">
  {%- if section.settings.heading != blank -%}
    <h2>{{ section.settings.heading }}</h2>
  {%- endif -%}
  {%- for block in section.blocks -%}
    <details {{ block.shopify_attributes }}>
      <summary>{{ block.settings.question }}</summary>
      <div class="rte">{{ block.settings.answer }}</div>
    </details>
  {%- endfor -%}
</div>

{% stylesheet %}
  .faq details { border-bottom: 1px solid currentColor; padding: 1rem 0; }
{% endstylesheet %}

{% schema %}
{
  "name": "Preguntas frecuentes",
  "class": "section-faq",
  "settings": [
    { "type": "text", "id": "heading", "label": "Título", "default": "Preguntas frecuentes" }
  ],
  "blocks": [
    {
      "type": "question",
      "name": "Pregunta",
      "settings": [
        { "type": "text", "id": "question", "label": "Pregunta", "default": "¿Hacen envíos?" },
        { "type": "richtext", "id": "answer", "label": "Respuesta", "default": "<p>Sí, a todo el país.</p>" }
      ]
    }
  ],
  "max_blocks": 20,
  "presets": [
    { "name": "Preguntas frecuentes", "blocks": [{ "type": "question" }, { "type": "question" }] }
  ]
}
{% endschema %}

Adentro de la sección, section.settings tiene los valores elegidos ysection.blocks los bloques en orden. El motor envuelve cada sección en un elemento con su id y su tipo:

<section id="section-faq" class="section section--faq section-faq" data-section-type="faq">
  …
</section>

El {% schema %}

Una sola vez por sección, con JSON válido. Atributos:

Atributo	Qué hace
`name`	Nombre en el editor (obligatorio).
`tag`	Elemento que envuelve la sección: `section` (por defecto), `div`,`header`, `footer` o `aside`.
`class`	Clases extra para ese elemento.
`settings`	Lista de settings de la sección.
`blocks`	Tipos de bloque que acepta.
`max_blocks`	Cuántos bloques se pueden agregar.
`presets`	Si tiene, la sección aparece en "Agregar sección" del editor.
`limit`	Cuántas veces puede estar en un template.

Si el JSON no es válido o un setting está mal declarado, la vista previa muestra el error con el nombre del archivo.

Bloques

Cada tipo de bloque tiene type (único en la sección, con minúsculas, números,- o _), name, settings y, opcional,limit. En Liquid se recorren con for block in section.blocks y se distinguen con block.type. Poné {{ block.shopify_attributes }} en el elemento raíz de cada bloque: el editor lo usa para resaltarlo al seleccionarlo.

Presets

Un preset es una configuración inicial con nombre. Las secciones con presets se pueden agregar desde el editor; las que no tienen (por ejemplo main-product) solo aparecen en los templates que las incluyen.

Settings

Todos los settings comparten estos atributos:

type: uno de los tipos de abajo.
id: obligatorio salvo en header y paragraph. Empieza con una letra minúscula y sigue con minúsculas, números o _. Único dentro de la sección o del bloque.
label, info (ayuda debajo del campo) y default.
required: el editor no deja guardar el campo vacío.

{
  "type": "range",
  "id": "products_to_show",
  "label": "Cantidad de productos",
  "info": "Se muestran en una grilla.",
  "min": 2,
  "max": 12,
  "step": 1,
  "unit": "u.",
  "default": 8
}

Tipos de setting

Tipo	En el editor	En Liquid	Atributos propios
`text`	Campo de una línea.	texto	`placeholder`
`textarea`	Campo de varias líneas.	texto	`placeholder`
`richtext`	Editor con formato (párrafos, negrita, links, listas).	HTML sanitizado (se imprime sin escapar)	—
`inline_richtext`	Texto con formato en una línea (negrita, cursiva, links).	HTML sanitizado	—
`image_picker`	Elegir una imagen de la biblioteca de archivos.	image o nil	—
`video`	Elegir un video MP4 o WebM de la biblioteca de archivos.	video o nil (usalo con `video_tag`)	—
`color`	Selector de color.	texto hexadecimal (`#1d4ed8`)	—
`select`	Lista desplegable.	el `value` elegido	`options` (obligatorio): `[{ "value", "label" }]`
`checkbox`	Casilla.	booleano	—
`range`	Deslizador.	número	`min` y `max` (obligatorios), `step`, `unit`
`number`	Campo numérico.	número	`min`, `max`, `step`
`url`	Link (a una página de la tienda o externo).	texto (vacío si el link no es seguro)	—
`link_list`	Elegir un menú.	handle del menú: usalo con `linklists[section.settings.menu]`	—
`product`	Elegir un producto.	product o nil	—
`product_list`	Elegir varios productos.	array de product	`limit`
`collection`	Elegir una colección.	collection o nil	—
`collection_list`	Elegir varias colecciones.	array de collection	`limit`
`blog`	Elegir un blog.	blog o nil	—
`article`	Elegir un artículo.	article o nil	—
`header`	Título que agrupa settings (no guarda valor, no lleva `id`).	—	`content`
`paragraph`	Texto de ayuda (no guarda valor, no lleva `id`).	—	`content`

Los textos tienen un largo máximo razonable para un theme. Las listas de productos y colecciones aceptan limit para acotar cuántos se eligen.

Cómo se resuelven los valores

Si el valor guardado es válido para su tipo, se usa ese.
Si no, el default del schema; si tampoco hay, el vacío del tipo.
Los range y number se acotan a min ymax; un select solo acepta uno de sus options; uncolor tiene que ser hexadecimal.
Un producto, colección, blog o artículo que ya no existe o no está publicado llega comonil: preguntá antes de usarlo ({% if section.settings.collection %}).
Los ids que el schema no declara se descartan.