Shopify Liquid Language Tutorial Guide

Liquid is the templating language used in Shopify for creating dynamic and customizable themes. This guide will cover the basics and provide examples to help you get started.

1. Introduction to Liquid

Liquid is a flexible, safe, and easy-to-learn template language. It allows Shopify developers to insert dynamic content into their themes. Liquid is made up of three types of syntax:

Objects: Output dynamic content using {{ }}.
Tags: Logic and control flow using {% %}.
Filters: Modify output using the | pipe symbol.

2. Liquid Objects

Objects are enclosed within {{ }} and used to display dynamic content from Shopify’s database.

Example:

<h1>{{ shop.name }}</h1>

This displays the store’s name dynamically.

Common objects include:

{{ product.title }} – Displays the product title.
{{ customer.first_name }} – Displays the customer’s first name.
{{ cart.total_price | money }} – Displays the cart total.

3. Liquid Tags

Tags control logic and flow. They are enclosed within {% %}.

3.1 Conditional Statements

{% if product.available %}
  <p>In Stock</p>
{% else %}
  <p>Out of Stock</p>
{% endif %}

This checks if a product is available.

3.2 Loops

{% for product in collection.products %}
  <p>{{ product.title }}</p>
{% endfor %}

Loops iterate over objects, such as products in a collection.

3.3 Case Statements

{% case product.type %}
  {% when 'Shirt' %}
    <p>This is a shirt.</p>
  {% when 'Shoes' %}
    <p>These are shoes.</p>
  {% else %}
    <p>Other category</p>
{% endcase %}

4. Liquid Filters

Filters modify output. They are used with a pipe (|).

Common Filters:

{{ product.title | upcase }}  {# Converts text to uppercase #}
{{ product.price | money }}   {# Formats price with currency #}
{{ shop.url | append: '/collections/all' }} {# Concatenates strings #}

Other useful filters:

capitalize – Capitalizes the first letter.
downcase – Converts text to lowercase.
strip – Removes white spaces.
default – Provides a default value if empty.

5. Using Liquid in Shopify Themes

Liquid is primarily used in Shopify themes. Below is an example of a simple product.liquid template:

<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
<p>Price: {{ product.price | money }}</p>

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

6. Best Practices

Always use {% comment %} ... {% endcomment %} to add comments for clarity.
Optimize loops to avoid performance issues.
Use filters effectively to format data.
Follow Shopify’s theme development best practices.

7. Advanced Concepts

7.1 Creating Snippets

Snippets allow reusable code blocks.

Example: snippets/product-card.liquid

<div class="product">
  <h2>{{ product.title }}</h2>
  <p>{{ product.price | money }}</p>
</div>

Include it in templates:

{% include 'product-card' %}

7.2 Using JSON Data

Shopify provides objects in JSON format.

{{ product | json }}

This outputs the product data in JSON format.

Summary

Liquid is a powerful templating language for Shopify development. By mastering objects, tags, and filters, you can create dynamic and engaging Shopify themes. Keep experimenting and refer to Shopify’s documentation for deeper insights!