¿Qué es Liquid, el lenguaje de plantillas de Shopify?

Aquí Liquid no tiene nada que ver con la liquidez ni con el diseño Liquid Glass de Apple: es el lenguaje en el que está escrito el tema de tu tienda Shopify. Cada vez que alguien abre una ficha, una plantilla Liquid decide qué título, qué precio y qué descripción aparecen en el HTML. Te importa aunque no vayas a programar nunca, porque un dato que guardas en Shopify solo llega a la página si una línea de Liquid lo imprime. Si la línea no está, el dato existe en el panel y en la tienda no lo ve nadie, ni las personas ni los buscadores.

Cómo funciona

Shopify define Liquid como un lenguaje de plantillas creado por la propia Shopify, disponible como proyecto de código abierto en GitHub y usado por muchos otros proyectos y empresas. Permite escribir una sola plantilla con el contenido fijo e insertar la información que cambia según dónde se renderice. Además de los temas, Shopify usa variantes de Liquid en las plantillas de notificaciones, en Shopify Flow y en las plantillas de albaranes y de impresión de pedidos.⁠^{[1]Shopify.dev. Liquid reference}

El repositorio explica por qué se diseñó así: para que quien usa una aplicación pueda editar su aspecto sin ejecutar código inseguro en el servidor. Liquid no evalúa código arbitrario, las plantillas están hechas para que las editen los usuarios y sirve igual para HTML que para correos. Es una biblioteca de Ruby con licencia MIT.⁠^{[2]Shopify, repositorio en GitHub. Shopify/liquid}

Todo Liquid se apoya en tres piezas:⁠^{[1]Shopify.dev. Liquid reference}

• Objetos, entre llaves dobles, que imprimen un dato: {{ product.title }} escribe el título del producto.
• Etiquetas, entre llave y porcentaje, que definen la lógica: {% if %}, {% for %} y compañía deciden qué se imprime y cuántas veces.
• Filtros, detrás de una barra vertical, que transforman un valor antes de imprimirlo: {{ product.price | money }} da al precio el formato de moneda que la tienda tiene configurado.⁠^{[3]Shopify.dev. Liquid filters: money}

Liquid maneja seis tipos de dato: cadena, número, booleano, nil, lista y empty. Dos reglas explican muchos errores de tienda. La primera: nil es un valor sin definir que no imprime nada, así que un dato que falta no rompe la página, simplemente no aparece. La segunda: en una condición solo nil y false son falsos; una cadena vacía, un cero o una lista vacía cuentan como verdaderos.⁠^{[4]Shopify.dev. Liquid basics} Cada recurso tiene además un handle, un identificador en minúsculas generado a partir de su título que se usa en las URL y para buscar el recurso desde la plantilla.⁠^{[4]Shopify.dev. Liquid basics}

Dónde vive en el tema

Un tema de Shopify se organiza en carpetas: layout, con el archivo theme.liquid que envuelve todas las páginas; templates, una por tipo de página, como la de producto; sections y blocks, los módulos que el comercio añade y ordena desde el editor; snippets, trozos de Liquid reutilizables; y assets, config y locales. Las plantillas en JSON solo envuelven secciones, y el código Liquid está en las secciones, los bloques y los snippets.⁠^{[5]Shopify.dev. Theme architecture} Si buscas qué línea imprime un dato de la ficha, casi siempre está en una sección de producto, no en la plantilla.

Liquid se resuelve en el servidor. Shopify recomienda pintar el contenido inicial con Liquid y HTML en lugar de con frameworks de JavaScript en el navegador, para que el HTML inicial funcione sin JavaScript y el navegador pueda mostrar el contenido en cuanto lo recibe.⁠^{[6]Shopify.dev. Render essential content server-side} Eso es renderizado del lado del servidor: lo que imprime Liquid viaja en la primera respuesta, sin esperar al renderizado de JavaScript, y lo lee también un rastreador que no ejecuta scripts.

En una tienda

Ejemplo ficticio. Una tienda de ropa quiere que la ficha de una camiseta muestre el título, el precio, las instrucciones de cuidado que guarda en un metafield y el marcado de producto en JSON-LD. La sección de producto del tema lo resuelve con estas líneas:

<h1>{{ product.title }}</h1>
<p class="precio">{{ product.price | money }}</p>
{% if product.metafields.custom.cuidados %}
  <p class="cuidados">{{ product.metafields.custom.cuidados.value }}</p>
{% endif %}
<script type="application/ld+json">
  {{ product | structured_data }}
</script>

Y esto es lo que recibe el navegador, ya escrito, sin ninguna llave a la vista:

<h1>Camiseta de lino</h1>
<p class="precio">29,00 €</p>
<p class="cuidados">Lavar a 30 °C. No usar secadora.</p>

La última parte merece una línea. El filtro structured_data convierte el objeto de producto en datos estructurados de Schema.org: un Product si no tiene variantes y un ProductGroup si tiene una o más.⁠^{[7]Shopify.dev. Liquid filters: structured_data} Así que el JSON-LD de muchos temas no lo escribe nadie a mano: lo genera Liquid con los datos que tenga el producto, y solo con esos.

Cómo comprobarlo

1. Abre el código del tema y ve a la carpeta sections: busca la sección que usa la plantilla de producto. La plantilla JSON solo te dice qué secciones carga; el Liquid está dentro de ellas.⁠^{[5]Shopify.dev. Theme architecture}
2. Busca el dato por su nombre. Para un metafield, busca su espacio de nombres y su clave (por ejemplo, custom.cuidados). Si no aparece en ningún archivo del tema, el tema no lo imprime, salvo que lo conecte un bloque desde el editor o lo pinte una aplicación con un app embed de Shopify.
3. Mira el resultado en el código fuente de la ficha, no en el inspector. Lo que imprime Liquid aparece ya escrito; si un valor solo aparece en el inspector, lo ha añadido JavaScript después.
4. Busca application/ld+json en ese código fuente y cuenta cuántos bloques hay. Si el tema usa el filtro structured_data y además una aplicación añade su propio marcado, puede haber dos descripciones del mismo producto.
5. Prueba con un producto incompleto, sin descripción o sin el metafield, y mira qué deja la plantilla: nada, una etiqueta vacía o un texto por defecto.

Concepto cercano: Stencil

Liquid es el lenguaje de plantillas de Shopify; Stencil es el motor de temas de BigCommerce, basado en plantillas Handlebars.⁠^{[8]BigCommerce Dev Center. Stencil} Hacen el mismo trabajo, convertir los datos del catálogo en el HTML de cada página, con sintaxis distintas, así que un fragmento escrito para un tema de Shopify no sirve tal cual en uno de BigCommerce. Dentro de Shopify, Liquid es la pieza que imprime lo que guardan los metafields y los metaobjetos.

Para seguir, la guía del metafield a la página publicada sigue un dato de Shopify hasta el HTML de la ficha, y la ruta de lectura de publicación por plataforma ordena el resto de términos.