Online Store 2.0 explicado: plantillas JSON, secciones, metacampos y metaobjetos

Qué cambió con Online Store 2.0

Antes de Online Store 2.0, las secciones que podías añadir, quitar y reordenar desde el editor de temas estaban limitadas prácticamente a la página de inicio. El resto de páginas, como producto, colección o páginas de contenido, tenían una estructura fija definida en el código, y cualquier cambio de diseño requería a un desarrollador.

Online Store 2.0 extendió las secciones a todas las páginas e introdujo nuevas herramientas para conectar el diseño con datos de la tienda. Hoy los temas de la Theme Store están construidos sobre esta arquitectura, incluido Dawn, el tema de referencia de Shopify.

Plantillas JSON

En Online Store 2.0 las plantillas pueden ser archivos JSON en lugar de archivos Liquid. Una plantilla JSON no contiene HTML: es una lista de las secciones que forman la página, en qué orden aparecen y con qué ajustes. Cuando cambias algo en el editor de temas, Shopify actualiza ese archivo.

Esto permite crear plantillas alternativas. Puedes tener, por ejemplo, una plantilla de producto estándar y otra para productos de edición limitada con secciones distintas, y asignar cada producto a la que le corresponde desde el panel de administración. Lo mismo vale para colecciones y páginas.

• La plantilla JSON define qué secciones hay y en qué orden.
• Puedes crear plantillas alternativas desde el editor de temas.
• Cada producto, colección o página se asigna a su plantilla desde el admin.

Secciones en todas las páginas

Una sección es un módulo reutilizable: un banner, una galería, una lista de beneficios, un bloque de preguntas frecuentes. Cada sección tiene su código Liquid y un esquema que define qué ajustes aparecen en el editor, como textos, imágenes, colores o enlaces.

Con Online Store 2.0 puedes añadir esas secciones en cualquier plantilla basada en JSON. Una sección de preguntas frecuentes diseñada para la página de inicio se puede usar también en la ficha de producto o en una página de envíos, sin duplicar código. La cabecera y el pie se gestionan además como grupos de secciones, editables también desde el editor.

Bloques: la pieza que da flexibilidad dentro de cada sección

Dentro de una sección puede haber bloques: elementos que el editor puede añadir, quitar y reordenar. En una sección de ficha de producto, los bloques pueden ser el título, el precio, el selector de variantes, el botón de compra, una pestaña de descripción o un aviso de envío.

Los bloques permiten que una misma sección se adapte a contextos distintos sin tocar código. Además, existen los bloques de apps: las apps compatibles pueden añadir su propio bloque, como unas reseñas o un aviso de stock, que colocas donde quieras desde el editor, sin pegar fragmentos de código en el tema.

Metacampos: datos propios para cada producto

Los metacampos son campos personalizados que añades a productos, variantes, colecciones, clientes, pedidos y otros objetos de Shopify. Sirven para guardar información que Shopify no trae de serie: composición del tejido, instrucciones de cuidado, ficha técnica, tiempo de preparación o un vídeo de uso.

Desde el panel de administración defines cada metacampo con un tipo concreto, como texto, número, fecha, archivo, color o referencia a otro producto, y lo rellenas en cada ficha. Después puedes conectarlo a los ajustes de una sección mediante las fuentes dinámicas del editor: el bloque de composición muestra automáticamente el valor del metacampo de cada producto.

El resultado es que una única plantilla de producto muestra la información correcta en cada ficha, y tu equipo solo tiene que rellenar campos en el admin.

Metaobjetos: contenido estructurado reutilizable

Los metaobjetos van un paso más allá. Son tipos de contenido que defines tú, con varios campos, y que puedes crear como entradas independientes. Por ejemplo, un metaobjeto Diseñador con nombre, foto y biografía, o un metaobjeto Tabla de tallas con sus medidas.

Una vez creados, puedes referenciarlos desde metacampos de productos o colecciones. Varios productos pueden apuntar al mismo diseñador o a la misma tabla de tallas, y si actualizas la entrada, el cambio se ve en todas las fichas. Los metaobjetos también pueden tener su propia página en la tienda si activas esa opción.

• Metacampo: un dato concreto asociado a un producto u otro objeto.
• Metaobjeto: un tipo de contenido con varios campos, reutilizable.
• Se combinan: un metacampo puede apuntar a una entrada de metaobjeto.

Cómo permite todo esto que tu equipo edite sin código

Juntas, estas piezas separan el diseño del contenido. El desarrollador construye las secciones, los bloques y los esquemas una vez; tu equipo crea páginas combinando secciones, cambia textos e imágenes en el editor y rellena metacampos y metaobjetos en el admin. Lanzar una página de campaña o añadir información técnica a cien productos deja de ser un encargo de desarrollo.

Para que funcione, el tema tiene que estar pensado así desde el principio: secciones con ajustes claros, metacampos definidos con su tipo correcto y una estructura de contenido que el equipo entienda. En Weblineo construimos cada tema a medida sobre Online Store 2.0 y la formación incluida enseña a tu equipo a manejarlo; lo explicamos en el servicio de desarrollo Shopify.