# Qué es Liquid, el lenguaje de plantillas de Shopify
> Qué es Liquid, el lenguaje de plantillas de Shopify: objetos, etiquetas y filtros, cómo escribe en el servidor los datos de tu ficha y cómo comprobarlo.
URL: https://clione.ai/es/glosario/liquid/
Lang: es
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.[^shopify-liquid-ref]
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.[^liquid-github]
Todo Liquid se apoya en tres piezas:[^shopify-liquid-ref]
- **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.[^money-filter]
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.[^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.[^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_**.[^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.[^shopify-render-server] Eso es [renderizado del lado del servidor](/es/glosario/ssr/): lo que imprime Liquid viaja en la primera respuesta, sin esperar al [renderizado de JavaScript](/es/glosario/renderizado-javascript/), y lo lee también un [rastreador](/es/glosario/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](/es/glosario/metafields/) y el marcado de producto en [JSON-LD](/es/glosario/json-ld/). La sección de producto del tema lo resuelve con estas líneas:
```liquid
{{ product.title }}
{{ product.price | money }}
{% if product.metafields.custom.cuidados %}
{{ product.metafields.custom.cuidados.value }}
{% endif %}
```
Y esto es lo que recibe el navegador, ya escrito, sin ninguna llave a la vista:
```html
Camiseta de lino
29,00 €
Lavar a 30 °C. No usar secadora.
```
La última parte merece una línea. El filtro `structured_data` convierte el objeto de producto en [datos estructurados](/es/glosario/datos-estructurados/) de [Schema.org](/es/glosario/schema-org/): un [Product](/es/glosario/schema-product/) si no tiene variantes y un [ProductGroup](/es/glosario/productgroup/) si tiene una o más.[^structured-data-filter] 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.
Comprobar que un dato «existe» con un `{% if %}` no protege de un campo vacío. En Liquid solo `nil` y `false` son falsos: **una cadena vacía cuenta como verdadera**,[^liquid-basics] así que la condición pasa y la ficha imprime una etiqueta sin contenido. Para un dato que de verdad no existe, en cambio, no hace falta condición para evitar un error: `nil` no imprime nada.
## 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.[^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](/es/glosario/app-embed-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/glosario/stencil/) es el motor de temas de BigCommerce, basado en plantillas Handlebars.[^bigcommerce-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](/es/glosario/metafields/) y los [metaobjetos](/es/glosario/metaobjeto-shopify/).
Para seguir, la guía [del metafield a la página publicada](/es/guias/metafield-a-pagina-publicada/) sigue un dato de Shopify hasta el HTML de la ficha, y la [ruta de lectura de publicación por plataforma](/es/aprender/publicacion-por-plataforma/) ordena el resto de términos.