El motor de temas Merge

Cada tienda Merge se muestra con un theme: archivos Liquid, JSON, CSS y JavaScript que el motor de temas Merge convierte en HTML en cada página.

El motor habla Liquid, el lenguaje de templates de Shopify, con los mismos nombres de objetos, filtros y tags que usan los themes “Online Store 2.0”. Si ya hiciste un theme para Shopify, la mayor parte de lo que sabés sirve tal cual.

Cómo se arma una página

1. La tienda recibe la visita y elige el template según la ruta: /products/remera usa templates/product.json, /collections/verano usa templates/collection.json.
2. El template es un JSON con una lista ordenada de secciones. Cada sección es un archivo de sections/ con su HTML en Liquid y un {% schema %} que declara sus settings y bloques.
3. El motor renderiza las secciones con los valores que el comerciante eligió en el editor de temas y las mete en el layout (layout/theme.liquid) en {{ content_for_layout }}.

<!doctype html>
<html lang="{{ request.locale.iso_code }}">
  <head>
    <title>{{ page_title }}</title>
    {{ content_for_header }}
    {{ 'theme.css' | asset_url | stylesheet_tag }}
  </head>
  <body>
    {% section 'header' %}
    <main>{{ content_for_layout }}</main>
    {% section 'footer' %}
  </body>
</html>

El editor de temas

Lo que el theme declara en los {% schema %} y en config/settings_schema.json es lo que el comerciante ve en Tienda online → Temas → Personalizar: agregar, ordenar y ocultar secciones, cambiar textos, imágenes, colores y menús, con vista previa en vivo. Un buen theme deja configurable todo lo que el comerciante va a querer cambiar, con valores por defecto que ya se vean bien.

Seguridad por defecto

• La salida se escapa sola. {{ product.title }} nunca puede inyectar HTML. El HTML que viene de la plataforma (descripciones, settings richtext, filtros como image_tag) ya llega sanitizado y se imprime tal cual.
• Los links se validan. Un setting url o un link de menú con un esquema peligroso (javascript:) no llega al href.
• Hay límites de render. Cada página tiene un presupuesto de tiempo, memoria y tamaño de HTML. Un theme que lo supera muestra un error en lugar de la página: mantené los loops acotados (limit:) y evitá anidar recorridos grandes.
• Filtros estrictos. Un filtro que no existe es un error, no se ignora: así un typo aparece en la vista previa y no en producción.

Qué sigue

• Estructura de un theme: carpetas, templates JSON, layouts y traducciones.
• Secciones y settings: {% schema %}, bloques y tipos de setting.
• Referencia: objetos, filtros y tags.
• Portar desde Shopify: qué es compatible y qué cambia.

Themes propios. Hoy las tiendas instalan themes desde la biblioteca de Merge. La carga de themes propios de agencias está en acceso anticipado: si querés construir uno, escribinos a developers@merge.uy.