Lenguaje de plantillas

Liquid

El lenguaje de plantillas open source creado por Shopify para construir los frontends de las tiendas.

¿Qué es Liquid?

Liquid es un lenguaje de plantillas seguro, flexible y rápido. Shopify lo usa para renderizar el HTML de los temas.

🔒

Seguro por diseño

Liquid no puede ejecutar código arbitrario del servidor. Los comerciantes pueden editar plantillas sin riesgo.

🔧

Flexible

Soporta variables, filtros, etiquetas de control de flujo, iteraciones y acceso a todos los objetos del contexto.

📂

Open Source

Liquid es open source y se usa también en Jekyll, HubSpot, Salesforce y otras plataformas.

Sintaxis

Tipos de etiquetas

Output {{ }}
{{ product.title }}
{{ product.price | money }}
{{ 'now' | date: '%d/%m/%Y' }}
{{ customer.name | upcase }}

Muestran valores en el HTML. Soportan filtros encadenados con |.

Logic {% %}
{% if product.available %}
  En stock
{% else %}
  Agotado
{% endif %}

Control de flujo. No generan output directo.

Loops {% for %}
{% for product in collection.products %}
  
{{ product.title }}

  
{{ product.price | money }}

{% endfor %}

forloop.index, forloop.first, forloop.last disponibles.

Filtros
{{ product.price | money }}
{{ 'hola' | capitalize }}
{{ image | img_url: '800x' }}
{{ content | strip_html | truncate: 150 }}

Transforman valores. Se encadenan con |.

Objetos globales

Objetos principales de Liquid

ObjetoDescripciónEjemplo
product Producto actual {{ product.title }}
collection Colección actual {{ collection.title }}
cart Carrito {{ cart.total_price | money }}
customer Cliente autenticado {{ customer.name }}
shop Datos de la tienda {{ shop.name }}
settings Config. del tema {{ settings.color_primary }}