What is Shopify Liquid?

Shopify Liquid is a powerful and flexible templating language that serves as the foundation for designing and customizing Shopify themes. It bridges the gap between HTML and Shopify’s backend, allowing developers to create dynamic, data-driven web pages.

Core Concepts

1. Tags: Tags are the programming logic that tells templates what to do. They can be used to control the flow of the template and include:

• Control Flow Tags: {% if %}, {% else %}, {% endif %}, {% unless %}, {% case %}, {% when %}, etc.
• Iteration Tags: {% for %}, {% break %}, {% continue %}.
• Variable Assignment: {% assign %}, {% capture %}, {% increment %}, {% decrement %}.
• Template Inheritance: {% include %}, {% render %}, {% layout %}.

{% if product.available %}
  <h1>{{ product.title }}</h1>
{% else %}
  <p>Out of stock</p>
{% endif %}

2. Objects: Objects contain the content that Liquid displays. Objects and their properties are wrapped in double curly braces {{ }}. Shopify provides a wide range of objects that represent data from the store, such as product, collection, cart, and customer.

<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>

3. Filters: Filters change the output of an object. They are placed within an output tag {{ }} and are separated by a pipe symbol |. Filters can format numbers, dates, strings, and more.

{{ product.price | money }}
{{ "shopify" | capitalize }}

4. Operators: Operators are used within tags to create expressions. Common operators include ==, !=, >, <, >=, <=, and, and or.

{% if product.price > 100 %}
  <p>This product is expensive.</p>
{% endif %}

Advanced Features

1. Template Inheritance: Liquid supports including and rendering other templates within a template. This allows for modular and reusable code. The {% include %} and {% render %} tags are used for this purpose.

{% include 'header' %}
<h1>{{ page.title }}</h1>
{% include 'footer' %}

2. Data Access: Liquid templates can access a variety of data objects, such as:

• Global Objects: site, cart, customer, page, product, collection, etc.
• Special Variables: content_for_header, content_for_layout, template, etc.

3. Filters and Custom Filters: While Shopify provides many built-in filters, developers can also create custom filters in their Shopify apps to extend the functionality of Liquid.

{{ "apple" | append: " pie" }}

4. Logic and Loops: Liquid’s control flow tags and iteration tags allow for complex logic and looping constructs within templates.

{% for product in collection.products %}
  <h2>{{ product.title }}</h2>
  {% if product.available %}
    <p>Price: {{ product.price | money }}</p>
  {% else %}
    <p>Sold out</p>
  {% endif %}
{% endfor %}

Practical Applications

1. Custom Themes: Developers use Liquid to create custom Shopify themes tailored to specific business needs. Themes can include unique layouts, styles, and functionality.
2. Dynamic Content: Liquid enables the display of dynamic content based on user interaction, such as showing different messages to logged-in customers versus guests.
3. Email Templates: Customizing Shopify's notification emails using Liquid ensures that communications are consistent with the brand’s voice and style.
4. Integrations and Apps: Liquid can be used within Shopify apps to render custom widgets, product recommendations, or integrate with third-party services.

Example Project

Here’s a super simple project example to illustrate Liquid’s capabilities. Imagine creating a custom product page that displays product details, checks stock availability, and shows related products.

Product Page Template (product.liquid):

{% include 'header' %}

<div class="product">
  <h1>{{ product.title }}</h1>
  <p>{{ product.description }}</p>

  {% if product.available %}
    <p>Price: {{ product.price | money }}</p>
    <button>Add to Cart</button>
  {% else %}
    <p>Out of stock</p>
  {% endif %}
</div>

<div class="related-products">
  <h2>Related Products</h2>
  <ul>
    {% for related_product in product.related_products %}
      <li>{{ related_product.title }}</li>
    {% endfor %}
  </ul>
</div>

{% include 'footer' %}

By understanding and leveraging Shopify Liquid, developers can create highly customized, dynamic, and engaging e-commerce experiences on the Shopify platform.