Shopify Liquid: La Referencia Definitiva para Comerciantes y Desarrolladores

Shopify Liquid es el lenguaje de plantillas de código abierto que impulsa cada tienda Shopify. Conecta los datos del backend de tu tienda (productos, colecciones, carrito, cliente) con el HTML que ven tus compradores, utilizando tres primitivos: objetos, tags y filtros. Hacer bien estas tres cosas es la diferencia entre un tema que convierte y uno que te cuesta dinero cada mes en suscripciones de aplicaciones y tickets de desarrollador.

Puntos clave

• Los tres primitivos de Liquid son objetos {{ }}, tags {% %} y filtros |. Cada personalización que hagas en un tema Shopify fluye a través de estos tres.
• El tag {% render %} reemplazó a {% include %} en 2019 y es el único tag de inclusión que Online Store 2.0 soporta. Intercambiar los dos es aún la ganancia de rendimiento más rápida en temas antiguos.
• Los nuevos filtros agregados en 2025-2026 incluyen image_tag con atributos fetchpriority y sizes, y metafield_tag para renderizado de metafields estructurados.
• Un bucle de colección sin optimizar con verificaciones de tags anidadas puede agregar 2-4 segundos a LCP y cuesta aproximadamente 7% de ingresos móviles por segundo más lento.
• Reemplazar 3-5 aplicaciones de nivel medio con secciones Liquid nativas típicamente ahorra 100-300 dólares al mes y elimina 150-600 KB de JavaScript de terceros por página.

¿Qué es Shopify Liquid?

Liquid es un lenguaje de plantillas que te permite crear una única plantilla para albergar contenido estático e insertar dinámicamente información dependiendo de lo que se está renderizando. Una plantilla de producto, por ejemplo, mantiene todos tus atributos de producto estándar e intercambia dinámicamente el contenido correcto para cada URL de producto.

La versión Shopify de Liquid extiende la versión de código abierto con objetos específicos de la tienda (producto, colección, carrito, cliente, tienda) y filtros diseñados para comercio electrónico (money, image_url, metafield_tag). A partir del 13 de enero de 2026, Shopify también actualizó cómo procesa Liquid internamente para hacer el renderizado de temas más confiable, sin acción requerida de los comerciantes.

Los tres primitivos

1. Objetos

Los objetos generan datos dinámicos usando llaves curly dobles:

{{ product.title }}
{{ product.price | money }}
{{ shop.name }}

Objetos globales clave que usarás en cada construcción de tema:

Los objetos pueden representar un valor único o exponer múltiples propiedades. El objeto request es particularmente útil para renderizado condicional basado en el tipo de página.

2. Tags

Los tags agregan lógica y control de flujo usando sintaxis {% %}. Las categorías que necesitas conocer:

Control de flujo liquid {% if product.available %} <button>Agregar al carrito</button> {% else %} <button disabled>Agotado</button> {% endif %}

Iteración liquid {% for product in collection.products limit: 24 %} {% render 'product-card', product: product %} {% endfor %}

Asignación de variables liquid {% assign sale_price = product.compare_at_price | minus: product.price %} {% capture button_label %}Agregar {{ product.title }}{% endcapture %}

Tags de tema (secciones, snippets, layouts) liquid {% render 'product-card', product: product, show_vendor: true %} {% section 'announcement-bar' %} {% layout 'checkout' %}

3. Filtros

Los filtros modifican la salida usando el carácter pipe |. Múltiples filtros se encadenan de izquierda a derecha:

{{ product.title | upcase | truncate: 50 }}
{{ product.price | money }}
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', widths: '200,400,600,800' }}

Categorías de filtros críticos:

• Filtros de dinero: | money, | money_with_currency, | money_without_trailing_zeros. Nunca codifiques símbolos de moneda. El filtro | money respeta la moneda, idioma y configuración de formato de tu tienda. Un símbolo $ codificado rompe en el momento en que habilitas multi-moneda en Shopify Markets.
• Filtros de imagen: | image_url: width: X seguido de | image_tag. Los modernos filtros image_url e image_tag reemplazaron los antiguos img_url e img_tag y entregan imágenes responsivas con atributos srcset, sizes, lazy loading y fetchpriority correctos en una única cadena.
• Filtros de array: | where, | map, | sort, | uniq, | join, | concat. Usa | where para filtrar arrays sin bucles.
• Filtros de string: | upcase, | downcase, | truncate, | strip_html, | escape, | split.
• Filtros matemáticos: | plus, | minus, | times, | divided_by, | ceil, | floor, | round.
• Filtros de color: | color_lighten, | color_darken, | color_mix, | color_contrast. El filtro color_contrast devuelve la relación de contraste entre dos colores, que es esencial para el diseño accesible de insignias y botones.
• Filtros de localización: | t (traducción), | format_address, | currency_selector.

Una nota sobre la trampa de | where: el filtro distingue mayúsculas de minúsculas. | where: 'tags', 'Sale' no coincidirá con una etiqueta de 'sale'. Usa | downcase antes de la comparación.

Secciones y el tag {% schema %}

Online Store 2.0 hizo las secciones disponibles en todas partes, no solo en la página de inicio. Cada sección que construyas debe tener un bloque {% schema %} completo para que los comerciantes puedan editar contenido desde el editor de tema sin abrir un archivo de código.

Cada sección puede tener solo un único tag {% schema %}, que debe contener JSON válido. Tener más de uno, u anidarlo dentro de otro tag Liquid, produce un error de sintaxis.

Un esquema de sección mínimo pero completo:

{% schema %}
{
  "name": "Feature banner",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Our promise"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Background image"
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature item",
      "settings": [
        { "type": "text", "id": "feature_text", "label": "Feature", "default": "Free shipping" }
      ]
    }
  ],
  "max_blocks": 4,
  "presets": [{ "name": "Feature banner" }]
}
{% endschema %}

Regla crítica: trata los valores id de configuración como nombres de columnas de base de datos. Se convierten en claves persistentes en JSON de plantilla en cada tienda que instale tu sección. Renombrar un id huérfano deja valores existentes. Cambiar una configuración de text a image_picker no migra datos. Prefija cuando las secciones crecen: usa hero_heading en lugar de heading si también tienes card_heading en bloques.

Las secciones con presets no deben renderizarse estáticamente. Las secciones renderizadas estáticamente no pueden ser removidas o reordenadas por los comerciantes.

El tag {% render %} (y por qué {% include %} está muerto)

El tag {% render %} es la única forma de incluir snippets en temas Shopify modernos. {% include %} compartía el alcance de variables entre snippets, lo que causaba conflictos de nombres y hacía la perfilación de rendimiento poco confiable. {% render %} crea un alcance aislado: los snippets no pueden leer variables padre a menos que se pasen como parámetros nombrados.

{# DEPRECATED - shares parent scope #}
{% include 'product-card' %}

{# CORRECT - isolated scope, explicit inputs #}
{% render 'product-card', product: product, show_vendor: true %}

{# Loop form #}
{% render 'product-card' for collection.products as product %}

El alcance aislado significa que los snippets son reutilizables de forma segura en páginas de detalles de producto, resultados de búsqueda, respuestas de carrito AJAX y solicitudes de Section Rendering API sin reescrituras. Reemplazar {% include %} con {% render %} también elimina cada error de Theme Check que bloquea el envío de tienda de temas Shopify.

Metafields en Liquid

Los metafields te permiten extender el modelo de datos de Shopify con datos personalizados (tablas de tallas, ingredientes, instrucciones de cuidado, especificaciones) sin aplicaciones. Los tipos de metafield más poderosos para desarrollo Liquid son:

• JSON para datos estructurados (renderiza con | metafield_tag o analiza el valor)
• Rich text para copia HTML editable por comerciante
• File reference para imágenes y videos adjuntos a productos
• Product/collection reference para relaciones explícitas entre recursos

Patrón de acceso:

{% assign size_chart = product.metafields.custom.size_chart %}
{% if size_chart != blank %}
  {{ size_chart.value | metafield_tag }}
{% endif %}

El guard != blank es innegociable. Omítelo y los productos sin una tabla de tallas renderizarán una <table> vacía que rompe el layout en Safari móvil.

Siempre crea definiciones de metafield a través de Settings > Custom data en el admin de Shopify, nunca sobre la marcha vía API. Las definiciones te dan validación de tipo, etiquetas amigables para comerciantes y visibilidad en admin. Aplicaciones de terceros como Yotpo y Klaviyo leen estas definiciones, así que un esquema limpio alimenta el resto de tu stack.

Patrones de rendimiento que realmente importan

Optimización de bucles

Los bucles anidados son el asesino de rendimiento más común en los temas Liquid que audito. Un bucle externo sobre 50 productos combinado con un bucle interno sobre 20 tags por producto ejecuta 1,000 iteraciones por renderizado de página. Usa el operador contains en su lugar:

{# BAD: O(n*m) - 50 products x 20 tags = 1,000 iterations #}
{% for product in collection.products %}
  {% for tag in product.tags %}
    {% if tag == 'featured' %}...{% endif %}
  {% endfor %}
{% endfor %}

{# GOOD: one pass, contains check is O(1) #}
{% for product in collection.products limit: 24 %}
  {% if product.tags contains 'featured' %}...{% endif %}
{% endfor %}

Siempre agrega limit: a bucles de colección. Un bucle sin optimizar puede agregar 2-4 segundos a LCP en dispositivos móviles.

Renderizado de imágenes

{# BAD: no dimensions, no srcset, browser cannot reserve space (CLS) #}
<img src="{{ product.featured_image | img_url: 'master' }}">

{# GOOD: srcset, lazy loading, explicit width hint #}
{{ product.featured_image
  | image_url: width: 800
  | image_tag:
      loading: 'lazy',
      widths: '200,400,600,800',
      sizes: '(min-width: 768px) 400px, 100vw',
      alt: product.title }}

El filtro image_tag hace en una línea lo que anteriormente requería tres líneas de HTML con construcción manual de srcset.

Control de espacios en blanco

Liquid genera espacios en blanco alrededor de cada tag. En plantillas grandes esto hincha el HTML y ralentiza TTFB. Usa el modificador - para eliminarlo:

{%- for product in collection.products -%}
  {{- product.title -}}
{%- endfor -%}

Section Rendering API

La Section Rendering API permite que las secciones se rendericen independientemente vía AJAX, permitiendo transiciones de página más rápidas y actualizaciones dinámicas del carrito sin recargas de página completa. Esta es la base para experiencias tipo app dentro de temas Liquid estándar, sin la sobrecarga de ir headless.

Theme Check y herramientas

Theme Check 2.0 ahora está integrado en Shopify CLI y detecta problemas de rendimiento, problemas de accesibilidad y uso de patrones obsoletos antes de que despliegues. Ejecútalo en cada commit. Marca:

• Llamadas {% include %} (obsoletas)
• Atributos alt faltantes en tags de imagen
• Uso de img_url (reemplazado por image_url)
• Bucles sin limit:
• content_for_header faltante en theme.liquid

La superposición Theme Inspector muestra tiempos de renderizado de Liquid directamente en tu tienda, para que puedas ver qué secciones, snippets y bucles son lentos antes de optimizar.

A partir de 2026, el MCP Dev de Shopify también permite que agentes IA generen código Liquid validado e scaffolding de esquemas de sección, lo que acelera el trabajo repetitivo. Trata la salida de IA como un primer borrador y siempre revisa casos especiales específicos de Shopify.

Reemplazo de aplicaciones: lo que Liquid puede hacer nativamente

Reemplazar 3-5 aplicaciones por tema con secciones Liquid nativas típicamente ahorra 100-300 dólares al mes y elimina 150-600 KB de JavaScript de terceros. La sobrecarga de aplicaciones cuesta 40-200 ms por script de terceros en dispositivos móviles, que es exactamente el rango que reduce las puntuaciones Lighthouse móviles de 80 a 60.

Funciones que Liquid maneja nativamente (sin aplicación requerida):

• Banners de cuenta atrás con fechas de finalización controladas por esquema
• Acordeones de preguntas frecuentes con arquitectura de bloque por pregunta
• Grillas de testimonios con calificaciones de estrellas y reseñas almacenadas en metafields
• Barras pegajosas de agregar al carrito vía IntersectionObserver más una sección de producto Liquid
• Tablas de comparación de características usando metafields JSON
• Deslizadores de imagen antes/después con JS vanilla y dos configuraciones de image-picker

Las secciones superan a las aplicaciones en tres ejes: se renderizan antes de paint (sin cambios de layout), viven en tu repositorio de tema (el control de versiones es trivial) y exponen configuración de esquema para que los comerciantes editen contenido sin un desarrollador.

Liquid vs. Hydrogen: la respuesta honesta

Liquid sigue siendo la opción correcta para la gran mayoría de tiendas Shopify porque ofrece desarrollo más rápido, costos de mantenimiento más bajos y acceso completo a la infraestructura CDN y hosting de Shopify. Headless (Hydrogen/Oxygen) tiene sentido para marcas con equipos dedicados de ingeniería frontend y arquitecturas multi-tienda complejas.

Ve headless cuando tengas un equipo frontend dedicado, tres o más tiendas compartiendo un backend, o un modelo de interacción que Liquid genuinamente no pueda alcanzar. Para todos los demás, la pregunta no es "Liquid u Hydrogen" sino "cómo escribo Liquid que no me avergüence en dos años?"

Si necesitas ayuda auditando o construyendo un tema a estos estándares, ve la página de servicios de desarrollador de tema Shopify, o explora optimización de velocidad Shopify si el rendimiento es el cuello de botella específico.

Hoja de referencia rápida

Sintaxis de salida

{{ product.title }}              {# string output #}
{{ product.price | money }}      {# filtered output #}
{{- product.title -}}            {# whitespace stripped #}

Control de flujo

{% if %} / {% elsif %} / {% else %} / {% endif %}
{% unless %} / {% endunless %}
{% case product.type %}{% when 'Apparel' %}...{% endcase %}

Bucles

{% for item in array limit: 24 offset: 0 %}
  {{ forloop.index }} of {{ forloop.length }}
{% else %}
  No items found.
{% endfor %}

Filtros más utilizados de un vistazo

| money               {# currency-safe price output #}
| image_url: width: X {# CDN-resized image URL #}
| image_tag           {# full responsive <img> tag #}
| metafield_tag       {# renders metafield value with correct HTML #}
| where: 'key', val   {# filter array without a loop #}
| map: 'property'     {# pluck a property from array of objects #}
| json                {# safe JSON output for script tags #}
| t                   {# translation key lookup #}
| handleize          {# string to URL-safe handle #}
| date: '%B %d, %Y'  {# formatted date output #}

Marca como favorita la referencia oficial de Liquid junto a este artículo. Los documentos oficiales cubren cada propiedad de objeto y parámetro de filtro en su totalidad.