Shopify Liquid Made Easy: A Beginner's Guide

Liquid is the enchanting language that makes Shopify stores come to life. In this beginner's guide, we'll dive into the basics of Liquid and help you conjure up captivating online stores. Grab your cup of coffee and let's get started!

At its core, Liquid is an open-source, template language developed by Shopify. It's specifically designed to make it easier for store owners and developers to customize the look and functionality of their Shopify stores. Think of it as the language that brings your store's design to life.

Shopify uses two main types of tags in its Liquid templating language: output tags {{ }} and control flow tags {% %}.

Output tags

We can use output tags to display static content like {{ 92 }} or {{ 'Shopify' }} but usually, output tags are used to display dynamic content or variables within your Shopify templates such as {{ product.title }} or {{ customer.name }}. Filters can be applied to modify their output such as {{ product.price | money }}It will transform numerical values into a currency format.

Exercise

1. Try to print your name as a static value anywhere in your shopify store.

2. Try to print the name of your store dynamically ( Hint: you can find all properties of shop here)

Control flow tags

Control flow tags are used for all other tasks except for output handling. They enable you to assign variables and create conditions, loops, and other programmatic constructs. They can be used as{% assign variable = 'value' %}

Variables

Variables are placeholders that store and represent data. They can hold a wide range of information, from simple text strings to more complex objects like product details or customer information.

Variables can be created using Liquid's {% assign %} tag. For example:

{% assign product_name = "Widget X" %}

In this case, product_name is the variable, and it holds the value "Widget X." You can then use this variable within your Liquid template, like so:

<p>The product name is: {{ product_name }}</p>

Exercise

Assign your name to a variable and then display the content of that variable.

Mathematics

In Shopify Liquid, you cannot perform direct arithmetic operations using operators like +, -, *, or / on variables. Instead, you need to use filters and built-in functions for performing arithmetic operations. Here's how you can do some basic arithmetic operations in Shopify Liquid:

Addition (+): You can use the plus filter to add numbers:

{% assign total = 10 | plus: 5 %}

Subtraction (-): Use the minus filter to subtract numbers:

{% assign difference = 20 | minus: 8 %}

Multiplication (*): Multiply numbers using the times filter:

{% assign product = 6 | times: 4 %}

Division (/): Divide numbers with the divided_by filter:

{% assign quotient = 36 | divided_by: 6 %}

Example: Let's say you want to offer a 10% discount on a product's original price and display the discounted price:

{% assign discountPercentage = 10 %}
{% assign discountedPrice = product.price | times: discountPercentage | divided_by: 100 %}
<p>You will save {{ discountedPrice | money }}</p>

Like all other filters, you have the flexibility to apply multiple math filters to a single input. These filters are executed sequentially in the order they appear, starting from left to right. In the above example, the times filter is applied first, followed by the divided_by filter. You can read the documentation of Shopify for more details on math filters.

Exercise

1. Display the price after 10% discount applied add code to above example.

2. If 10% of a number is 5 try to calculate the orignal number.

Arrays

An array in programming is a data structure that can hold multiple values, often of the same data type, organized in a sequential order. In Shopify Liquid, arrays are used to store and manage collections of data, such as product lists, items in cart, or other sets of related information.

In Shopify Liquid, you cannot directly initialize arrays as you might in some other programming languages. Instead, you can use the split filter to break a single string into an array of substrings like this.

{% assign fruits = "Apple, Banana, Orange" | split: ", " %}

In this example, the split filter is used to split the string "Apple, Banana, Orange" into an array of fruits, with each fruit as a separate element in the array. To retrieve a particular item from an array, you can use square bracket [ ] notation. It's important to note that array indexing starts at zero. Let's say we want to see 1st item of the array, we will do it like this {{ fruits[0] }}.

Exercise

Create an array of the names of your friends and try to print all of them using square bracket notation[].

Loop

A loop is a programming construct that allows you to repeat a set of instructions or operations multiple times. Loops are essential for automating repetitive tasks, processing collections of data, and iterating through elements in arrays or lists.

In Shopify Liquid, you can create loops using the {% for %} and {% endfor %} tags. These loops are primarily used for iterating through arrays. Here's the basic structure of a for loop in Shopify Liquid:

{% for item in array %}
  {{ item }}
{% endfor %}

In this example:

• {% for item in array %} initiates the loop, where item is a variable that represents each element in the array.

• You can use the item variable to display or manipulate the data associated with each element in the array.

• {% endfor %} marks the end of the loop.

Here's a more detailed example. Suppose you have an array of product names and you want to list them on your Shopify store:

{% assign productNames = "Product A, Product B, Product C" | split: ", "  %}
<ul>
  {% for product in productNames %}
    <li>{{ product }}</li>
  {% endfor %}
</ul>

Exercise

1. Create an array of your favriot fruits and list them using loop

2. List the titles of all collections in your store. (hint: you can use collections, a global array and can find it's properties here)

Conditional Statement

A conditional statement in Shopify Liquid is a way to make decisions in your code based on specific conditions. You use the {% if %} and {% endif %} tags to execute different code blocks when a condition is true or false. For instance:

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

In this example, the {% if %} statement checks whether the product's price is greater than $50, Because product.price is in cents, we are using the value 5000 in the if statement. If the condition is true, it displays the message "This product is expensive!"

You can also use the {% else %} and {% elsif %} tags to create more complex conditional logic. Here is another example to check if an element is present in an array.

{% assign fruits = "Apple, Banana, Orange" | split: ", " %}
{% assign searchFruit = "Banana" %}

{% if fruits contains searchFruit %}
  <p>This array contains {{ searchFruit }}.</p>
{% else %}
  <p>{{ searchFruit }} is not in the array.</p>
{% endif %}

Here, we have an array of fruits in the fruits variable and a searchFruit variable with the fruit we want to check for. We use the contains operator to check if the fruits array contains the fruit specified in searchFruit. If it does, it displays "This array contains Banana." Otherwise, it displays "Banana is not in the array."

You can also use control flow tags like {% if %} within loops to apply conditional logic, making your loops even more powerful:

<ul>
  {% for product in products %}
    <li>
      {{ product.title }}
      {% if product.price > 5000 %}
        (On Sale!)
      {% endif %}
    </li>
  {% endfor %}
</ul>

In this example, the loop goes through a list of products and displays each product's title. If the product's price is greater than 50, it adds "(On Sale!)" to the display.

Exercise

1. Create an array of numbers loop through them and determine whether each number is greater than 18. If it is, print 'Adult'; otherwise, print 'Under Age'.

2. List all the products and display their titles. However, only display the price for products priced below $50.(hint: use 'collections.all.products' array for all products)

Operators

We've already encountered a few operators earlier. Now, let's examine all of them. Here are the essential operators that Shopify Liquid supports for conditional logic:

• == (Equal)

• != (Not Equal)

• < (Less Than)

• > (Greater Than)

• <= (Less Than or Equal To)

• >= (Greater Than or Equal To)

• and (Condition A and Condition B)

• or (Condition A or Condition B)

• contains (Checks for strings in strings or arrays)

When we use multiple operators within a tag, it's important to note that they are processed from right to left, and this order cannot be changed.

Ready to Dive Deeper?

This beginner's guide is just the tip of the Liquid iceberg. As you become more familiar with Liquid, you'll discover its power in customizing your Shopify store further. Whether you're building themes, customizing templates, or creating dynamic content, Liquid is your trusty companion on your Shopify journey.

Stay tuned for more in-depth tutorials and tips on mastering Liquid. Until then, happy coding!