Definición
Liquid es un lenguaje de plantillas de código abierto creado por Shopify que permite renderizar contenido dinámico dentro de las tiendas online. Funciona como un puente entre los datos almacenados en el backend (productos, precios, stock, clientes, pedidos) y el HTML que ve el usuario final. En lugar de escribir cada página manualmente, Liquid inserta variables y ejecuta lógica condicional para que el escaparate se actualice automáticamente cuando cambian los datos.
En el ecosistema DTC, dominar Liquid es lo que separa una tienda genérica de una experiencia de compra personalizada, rápida y escalable.
Analogía
Piensa en Liquid como el personal shopper de una boutique. Tú (el dueño de la tienda) le das instrucciones generales: "si el cliente es recurrente, muéstrale la colección VIP; si el producto está agotado, oculta el botón de compra". El personal shopper (Liquid) consulta el inventario en tiempo real, revisa el historial del cliente y decide qué mostrar en cada momento. No necesitas reescribir el escaparate cada vez que cambia el stock: el personal shopper lo hace por ti.
Fórmula / Estructura
La sintaxis de Liquid se basa en dos delimitadores fundamentales:
- {{ ... }} → Output: imprime un valor dinámico.
- {% ... %} → Tag: ejecuta lógica (condicionales, bucles, asignaciones).
Ejemplo típico en una plantilla de producto:
{% if product.available %}
<p>Precio: {{ product.price | money }}</p>
<button>Añadir al carrito</button>
{% else %}
<p class="agotado">Producto agotado</p>
{% endif %}
Los filtros transforman valores: {{ product.price | money_with_currency }}, {{ product.title | upcase }}, {{ cart.total_price | divided_by: 100 }}.
Fórmula conceptual del renderizado:
HTML_final = Plantilla_Liquid + Datos_Shopify + Filtros + Lógica_condicional
Comparativa con alternativas
| Lenguaje / Sistema | Origen | Curva de aprendizaje | Ideal para | Limitación principal |
|---|---|---|---|---|
| **Liquid** | Shopify (2006) | Baja-media | Temas Shopify, DTC en Shopify | No es un lenguaje de programación completo |
| Twig | Symfony | Media | CMS PHP (Drupal, Craft) | Requiere entorno PHP |
| Handlebars | Comunidad JS | Media | Apps Node.js / frontend | Sin acceso directo a datos nativos de Shopify |
| Jinja2 | Python | Media | Flask, Django, generación estática | No integrado en Shopify |
| React / Next.js | Meta | Alta | Headless commerce | Requiere infraestructura y equipo técnico |
Para una marca DTC que vende en Shopify, Liquid sigue siendo el estándar porque no necesita servidor propio y se ejecuta del lado de Shopify con latencia mínima.
Aplicaciones en DTC / eCommerce
1. Precios dinámicos por mercado: mostrar precios en EUR, MXN o COP según la geolocalización usando {{ product.price | money_with_currency }} con mercados configurados. Una tienda con 3 mercados puede reducir el abandono de carrito hasta un 18% al mostrar moneda local.
2. Badges de urgencia y stock: {% if product.inventory_quantity < 5 %} para activar mensajes tipo "¡Solo quedan 3 unidades!". Los tests A/B muestran incrementos de conversión del 7% al 12% en categorías de moda y belleza.
3. Recomendaciones personalizadas: usar {{ recommendations.products }} para mostrar productos complementarios. Las tiendas DTC que implementan recomendaciones nativas reportan un aumento del AOV (ticket medio) del 15-25%.
4. Contenido segmentado por cliente: {% if customer.tags contains 'VIP' %} para mostrar envío gratis o acceso anticipado a drops. Mejora la retención y el LTV en programas de fidelización.
5. Landing pages de campaña: crear plantillas alternativas (page.bfcm.liquid) para Black Friday sin duplicar la tienda completa.
Errores comunes
- Confundir {{ }} con {% %}: usar llaves dobles para lógica rompe la plantilla silenciosamente.
- Abusar de bucles anidados: {% for %} dentro de {% for %} sobre colecciones grandes ralentiza el renderizado y afecta el LCP (Core Web Vitals).
- No usar | default: si un metafield está vacío, la página muestra "null". Siempre aplicar {{ product.metafields.custom.material | default: 'N/A' }}.
- Editar el tema directamente en producción: un error de sintaxis puede tumbar la tienda. Usa entornos de desarrollo o duplica el tema.
- Ignorar los límites: Liquid tiene restricciones (por ejemplo, máximo 50 iteraciones por bucle en algunos contextos). No es un lenguaje para lógica compleja.
- Hardcodear textos en lugar de usar traducciones: en tiendas multiidioma, usa {{ 'products.add_to_cart' | t }} para escalar a nuevos mercados.
Términos relacionados
- Shopify Theme Architecture: estructura de carpetas (layout/, templates/, sections/, snippets/) donde vive Liquid.
- Section Rendering API: permite recargar secciones Liquid vía AJAX sin recargar la página.
- Metafields: campos personalizados que Liquid puede leer para enriquecer fichas de producto.
- Headless Commerce: alternativa donde Liquid se sustituye por frameworks como Next.js consumiendo la Storefront API.
- OS 2.0: versión de temas Shopify que explota Liquid con secciones modulares y bloques arrastrables.
- Storefront API: API GraphQL que devuelve los mismos datos que Liquid, pero para apps externas.
- Filtros Liquid: funciones integradas (money, date, img_url, json) que transforman la salida.
- Snippets: fragmentos reutilizables de Liquid que evitan duplicar código entre plantillas.