Skip to main content

Liquid Reference

Learn about Liquid, the templating language used in Shoplazza themes.

What is Liquid?​

Liquid is an open-source template language created by Shopify. It uses a combination of objects, tags, and filters to load dynamic content.

Basic Syntax​

Objects​

Output data using double curly braces:

{{ product.title }}
{{ collection.description }}
{{ shop.name }}

Tags​

Create logic and control flow:

{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <span>Sold Out</span>
{% endif %}

Filters​

Modify output:

{{ product.title | upcase }}
{{ product.price | money }}
{{ article.published_at | date: "%B %d, %Y" }}

Common Liquid Tags​

Control Flow​

if/elsif/else​

{% if customer %}
  Welcome back, {{ customer.first_name }}!
{% elsif customer_accounts_enabled %}
  <a href="/account/login">Login</a>
{% else %}
  Welcome, Guest!
{% endif %}

unless​

{% unless product.available %}
  <p>This product is sold out</p>
{% endunless %}

case/when​

{% case product.type %}
  {% when 'Clothing' %}
    <p>Fashion item</p>
  {% when 'Electronics' %}
    <p>Tech product</p>
  {% else %}
    <p>Other product</p>
{% endcase %}

Iteration​

for loop​

{% for product in collection.products %}
  <div class="product">
    {{ product.title }}
  </div>
{% endfor %}

for loop with limit​

{% for product in collection.products limit:4 %}
  {{ product.title }}
{% endfor %}

for loop with offset​

{% for product in collection.products offset:2 %}
  {{ product.title }}
{% endfor %}

break and continue​

{% for product in collection.products %}
  {% if product.price > 100 %}
    {% break %}
  {% endif %}
  {{ product.title }}
{% endfor %}

Variable Assignment​

{% assign sale_price = product.price | times: 0.8 %}
{% assign product_count = collection.products.size %}

{% capture heading %}
  {{ product.title }} - {{ product.vendor }}
{% endcapture %}

Common Filters​

String Filters​

{{ 'hello world' | capitalize }}  
<!-- Hello world -->

{{ 'Hello World' | downcase }}    
<!-- hello world -->

{{ 'hello world' | upcase }}      
<!-- HELLO WORLD -->

{{ product.title | truncate: 20 }}
<!-- Truncate to 20 characters -->

{{ 'hello' | append: ' world' }}  
<!-- hello world -->

{{ 'hello world' | replace: 'world', 'there' }}
<!-- hello there -->

Number Filters​

{{ product.price | money }}
<!-- $29.99 -->

{{ 3.14159 | round: 2 }}
<!-- 3.14 -->

{{ 10 | plus: 5 }}
<!-- 15 -->

{{ 10 | minus: 3 }}
<!-- 7 -->

{{ 10 | times: 2 }}
<!-- 20 -->

{{ 10 | divided_by: 2 }}
<!-- 5 -->

Array Filters​

{{ collection.products | size }}
<!-- Number of products -->

{{ collection.products | first }}
<!-- First product -->

{{ collection.products | last }}
<!-- Last product -->

{{ collection.products | map: 'title' }}
<!-- Array of product titles -->

{{ collection.products | where: 'available' }}
<!-- Only available products -->

{{ collection.products | sort: 'price' }}
<!-- Sort by price -->

{{ collection.products | reverse }}
<!-- Reverse order -->

Date Filters​

{{ 'now' | date: "%Y-%m-%d" }}
<!-- 2024-01-15 -->

{{ order.created_at | date: "%B %d, %Y" }}
<!-- January 15, 2024 -->

{{ article.published_at | date: "%a, %b %d, %y" }}
<!-- Mon, Jan 15, 24 -->

URL Filters​

{{ product.url }}
{{ product | img_url: '400x' }}
{{ 'application.css' | asset_url | stylesheet_tag }}
{{ 'application.js' | asset_url | script_tag }}

Shoplazza Objects​

Global Objects​

{{ shop.name }}
{{ shop.email }}
{{ shop.currency }}
{{ shop.locale }}

Product Object​

{{ product.title }}
{{ product.description }}
{{ product.price }}
{{ product.compare_at_price }}
{{ product.available }}
{{ product.featured_image }}
{{ product.images }}
{{ product.variants }}
{{ product.options }}
{{ product.tags }}
{{ product.type }}
{{ product.vendor }}

Collection Object​

{{ collection.title }}
{{ collection.description }}
{{ collection.products }}
{{ collection.products_count }}
{{ collection.image }}

Cart Object​

{{ cart.item_count }}
{{ cart.total_price }}
{{ cart.items }}
{{ cart.note }}

Customer Object​

{{ customer.first_name }}
{{ customer.last_name }}
{{ customer.email }}
{{ customer.orders_count }}
{{ customer.total_spent }}

Advanced Techniques​

Pagination​

{% paginate collection.products by 12 %}
  {% for product in collection.products %}
    {% render 'product-card', product: product %}
  {% endfor %}

  {{ paginate | default_pagination }}
{% endpaginate %}

Forms​

{% form 'product', product %}
  <select name="id">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}">
        {{ variant.title }}
      </option>
    {% endfor %}
  </select>
  <button type="submit">Add to Cart</button>
{% endform %}

Including Snippets​

{% render 'product-card', product: product %}
{% render 'icon', name: 'cart' %}

Sections​

{% section 'header' %}
{% section 'announcement-bar' %}

Best Practices​

  1. Use meaningful variable names

    {% assign discounted_price = product.price | times: 0.8 %}

  2. Comment your code

    {% comment %}
      Display featured products
    {% endcomment %}

  3. Check for existence

    {% if product.featured_image %}
      <img src="{{ product.featured_image | img_url: '400x' }}">
    {% endif %}

  4. Use filters for formatting

    {{ product.price | money }}
    {{ article.published_at | date: "%B %d, %Y" }}

Next Steps​