Herramienta gratuita
Generador de schema de secciones de Shopify
Añade los ajustes y bloques que necesita tu sección y obtén un bloque {% schema %} válido para pegar en tu tema, o un archivo .liquid base cuyo marcado ya lee cada ajuste. Todo se ejecuta en tu navegador; nada de lo que escribes se envía a ningún sitio.
Sección
Ajustes
Bloques
{% schema %}
{
"name": "Feature highlights",
"tag": "section",
"class": "feature-highlights",
"max_blocks": 6,
"settings": [
{ "type": "header", "content": "Content" },
{ "type": "text", "id": "heading", "label": "Heading", "default": "Why customers switch" },
{ "type": "richtext", "id": "intro", "label": "Intro", "default": "<p>Three reasons, in plain words.</p>" },
{ "type": "header", "content": "Style" },
{ "type": "color", "id": "accent", "label": "Accent colour", "default": "#5d4787" },
{ "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 4, "step": 1, "default": 3 },
{ "type": "select", "id": "layout", "label": "Layout", "options": [{"value": "grid", "label": "Grid"},{"value": "carousel", "label": "Carousel"}], "default": "grid" },
{ "type": "checkbox", "id": "show_border", "label": "Show card borders", "default": true }
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{ "type": "image_picker", "id": "icon", "label": "Icon" },
{ "type": "text", "id": "title", "label": "Title", "default": "Ships in 24 hours" },
{ "type": "textarea", "id": "text", "label": "Text", "default": "Order by 3pm and it leaves the same day." }
]
}
],
"presets": [
{ "name": "Feature highlights", "blocks": [{"type": "feature"}] }
]
}
{% endschema %}Para qué sirve el schema de una sección
Toda sección de Shopify termina en una etiqueta {% schema %} que contiene un objeto JSON. Así sabe el editor de temas qué mostrar: el nombre de la sección, los ajustes que los comerciantes pueden cambiar, los bloques que pueden añadir y reordenar, y el preset que pone la sección en la lista Agregar sección.
El Liquid que va encima del schema lee esos valores —section.settings.heading, block.settings.image—, así que el schema es el contrato entre el código y la persona que edita la tienda. Si tiene un error, Shopify se niega a guardar el archivo.
Tipos de ajustes de un vistazo
text- Una sola línea de texto: títulos, textos de botones.
textarea- Texto sin formato en varias líneas.
richtext- Texto con formato: negrita, cursiva y enlaces. Su valor predeterminado debe ir dentro de <p>.
inline_richtext- Formato sin párrafos, para un título con una palabra en negrita.
image_picker- Una imagen de los archivos de la tienda. No puede tener valor predeterminado.
url- Un enlace a un producto, una colección, una página o cualquier dirección web.
checkbox- Un interruptor de activado/desactivado. El valor predeterminado es true o false.
number- Un número escrito en un campo.
range- Un control deslizante con mínimo, máximo y paso: 101 pasos como máximo.
select- Un desplegable con las opciones que definas.
color- Un selector de color.
font_picker- Una fuente de la biblioteca de Shopify. Requiere valor predeterminado.
product / collection- Elige un producto o una colección y lee sus datos en Liquid.
header / paragraph- No son ajustes: títulos y notas que organizan la barra lateral.
Por qué Shopify rechaza un schema
Los mensajes que muestra el editor de temas cuando una sección no se guarda, y qué los provoca:
Invalid JSON in tag 'schema'
JSON no válido: una coma final, una comilla simple o un corchete que falta. El schema es JSON estricto y no puede contener Liquid.
Setting IDs must be unique
Los ID deben ser únicos: dos ajustes comparten ID. Los ajustes de un bloque solo tienen que ser únicos dentro de su bloque.
Invalid default value
Valor predeterminado no válido: no encaja con el tipo, como el de un range fuera de su mínimo y máximo, o el de un select que no es una de sus opciones.
The section doesn't appear under Add section
La sección no aparece en Agregar sección porque no tiene presets. Una sección sin preset solo se puede incluir desde el código.
Preguntas frecuentes
¿Qué es {% schema %} en Shopify?
Es la etiqueta al final de un archivo de sección que contiene un objeto JSON que describe la sección: su nombre, ajustes, bloques y presets. El editor de temas la lee para construir la barra lateral con la que los comerciantes personalizan la sección.
¿Dónde pego el schema?
Al final del archivo .liquid de la sección, en la carpeta sections de tu tema, después del marcado. Una sección solo puede tener una etiqueta {% schema %}.
¿Por qué mi sección no aparece en el editor de temas?
Casi siempre porque el schema no tiene presets. Añade un preset con el nombre de la sección y aparecerá en Agregar sección. En un tema vintage, las secciones solo se pueden añadir a la página de inicio.
¿Este generador es gratis?
Sí, y sin necesidad de cuenta. Funciona por completo en tu navegador y nada de lo que escribes sale de tu dispositivo.
¿Puede escribir también el resto de la sección?
El archivo base te da un marcado que lee cada ajuste. Para una sección terminada y con estilo —diseño, CSS, JavaScript y todo lo demás—, descríbesela a Klorr y escribirá el archivo completo.
¿Quieres la sección completa, no solo el schema?
Describe una sección con tus palabras y obtén código Liquid para Shopify, un schema completo y sus ajustes. Para cualquier tema Online Store 2.0, sin apps.
Generador de código Liquid →