Create your Shopify themes with the Liquid language.

Shopify Development
Shopify themes with the Liquid language.

Liquid Shopify is a model language written in Ruby. It is created by Shopify and available on Github as an open-source project. This language will allow you to create or modify Shopify themes. Take control of Shopify themes today and create stores according to the design of your choice.

The Liquid: What is it exactly?

For some, Liquid is a template language, and for others, an engine for Shopify themes. But that doesn’t matter much because it’s correct for both terms.

This language has syntax like other programming languages such as PHP, HTML and jQuery and also has concepts such as output, logic (if, else), loop and variables. You can interact with variables as you do with web-centric PHP.

Despite all these similarities with other languages, it is only at this level that the common factors end.

Liquid Shopify: Function

Like other templating languages, Liquid creates a relationship between an Html file and a group of data. In our specific case, it is a Shopify e-Commerce site. Thanks to a Liquid file, generally with a syntax that is easy to read and use, you can access all the variables of a template.

In Shopify, variables are easily accessed using the Liquid Shopify file. For example, we have the product. The Liquid model makes it easier for us to access all the information relating to a selected product.

For example, the product. The liquid model provides access to all details related to a selected product.

Liquid displays all this information without having prior knowledge of this data. We are talking about a Template variable.

Data inaccessible by Shopify can also be called Liquid. An example, Shopify can fulfill your request by populating a variable you create with all products in a particular collection.

With Liquid, you can retrieve data that is not available to you. An example, you can create a variable and then assign a product set in this variable to display it.

After knowing the variable names, you want to access or have created, feel free to use Liquid constructs such as “output” and “loops” to display the data in your Liquid files.

Depending on the Liquid codes in your theme, the Shopify back office understands and knows what data is retrieved and how to display it. So the display can be simply the name of a product or, in a complicated case, would be the display of a series of product images.

Based on the Liquid codes in your theme, the Shopify platform identifies the data to look for and the format in which to display it. Then the display can simplify the name of a product or, for a complicated case, would be the display of a series of images associated with a product.

With Liquid language, the advantage is that the designer doesn’t have to know anything about the Shopify store data. Thanks to this, the themes are 100% adaptable to other shops without prior knowledge of the content.

Liquid: Extension and delimiter

The extension for Liquid Shopify files is .liquid. Mixing standard HTML and Liquid build results in a Liquid.

Delimiters behave like placeholders. A placeholder is a piece of code replaced with data after the theme is sent to the browser. And it is the theme designer who defines this data in the Liquid Shopify file.

Liquid: syntax

Liquid Shopify code is intuitive, easy to learn and has many advantages over conventional coding practices. It can easily be distinguished from Html code by braces {{ }} and percent signs {% %} present in Liquid code.

The logic is introduced by the combination of the brace and the percentage {% %}, and now the double brace introduces the output. There are three main characteristics of the Liquid code

  • Objects
  • Keywords (Tag)
  • Filters

Liquid: Objects

In Shopify, liquid parlance objects generate data from a Shopify admin. In a theme, template objects are delimited by double braces and look like this.

1 {{ product.title }}

In this code above product is the object, and the title is a property of this object. Remember that each object has a property associated with it.

The Shopify theme includes the product model where the {{ product.title}} object is located. After the code runs, the object’s output on a Shopify store page will be the product title. For example, the result might look like this:

1 Awesome T-Shirt

Even if the single model is used for several stores, the data generated will all be different and depend on the product page you are viewing.

Its handle is used to retrieve and display a single article; see code below.

Explanation of assign(‘var’, ‘value’)

var is a parameter allowing to indicate the variable to associate and value allows to indicate the associated value

The following code example is used to display the content of the “mychain” variable:

{assign var=”machine” value=” Gladir.com ”}

1 {% assign article = articles['news/hello-world'] %}
2 {{ article.title | link_to: article.url }}

Liquid: Tags

Liquid tags are the programming logic that tells the model what to do. Text between the {% %} characters has no effect when the web page is rendered. It allows us to create variables, conditions or loops without displaying Liquid logic on the page.

Control flow tag

These are the control flow tags that condition whether a block of Liquid Shopify code should be executed or not.

An example is Liquid tags, which return a response depending on the product’s availability.

1 {% if product.available %}
2 | Price: 99.99 $
3 {% else %}
4 | Sorry, This product is out of stock.
5 {% endif %}

If the product is available, it is if it is TRUE, the output will be: “Price: 99.99$”

If the product is not available if it is FALSE, the output will be: “Sorry, this product is sold out.”

So thanks to the if, else, and endif, we control the output of our Liquid file. Ifs are like questions, and the result is the answer according to the question asked.

With this logic, we can take control of the flow of a page and be able to decide what data to display.

Liquid: Loops

Loops are easy to understand and widely used in Shopify themes. You will be very familiar with this concept if you already have a little notion of the loop in basic programming.

Often called loops, loops allow you to output a specific number of the same piece of code.

An explicit example would be to output all images associated with a product.

Let’s take a closer look at these three lines of code above.

First line: {% for image in product.images %}

For loops, work with Liquid collections and iterate through all the elements of a list in turn. In the previous example, if the product has 6 images, then the loop would run 6 times. After reviewing each item in the list, the next part of the page will be considered.

It should be understood that the size of the loop is generally not specified, so there is no idea of the number of times the loop will turn, but what is obvious is that it will traverse each element of the list from the beginning to the end.

To access the properties of each element, the “image” variable is used to represent the current element in the loop. It doesn’t have to define the variable with the word “image”; however, you can use anything to define that, but it’s just so that other designers can quickly understand your logic.

Second line: <img src=”{{ image | img_url: ‘300×300’ }}” />

This line is composed of HTML and Liquid code. The src attribute is populated with a Liquid output tag.

The pipe character | takes the contents of the image variable and specifies the dimensions, in pixels, that the image should be displayed.

Third line: {% endfor %}

This is the end of the loop, and the pattern can continue after all loops have been executed.

The case/when loop

To compare a variable with different values, we generally use case/when. We initialize the variable with the case and then compare it with when.

Example code

{% assign handle = ‘cake’ %} {% case choice %}

{% when ‘cake’ %}

This is a cake

{% when ‘cookie’ %}

This is a cookie

{% else %}

It’s neither a cake nor a cookie

{% endcase %}

We output only when the choice variable equals “cake” or “cookie.” If neither of the two conditions is verified, the output will be: “It is neither a cake nor a cookie.”

Liquid filters

One of Liquid’s features is output filters. They have three main purposes:

  • Manipulating data in some way
  • Saves theme designers’ time by reducing the length of code we have to write.

Filters are typically used in conjunction with a Liquid output. Let’s see some filters starting with the date.

As before, you can see the |, called pipe, in the middle of the output tag. On its left side is the article object with its associated property, the published and on the right is the date filter with the instruction of the date format, which is ‘%d %B %Y’.

Thanks to this filter, Shopify will display the date in a format that a human can read; otherwise, the date would be displayed as it was stored in the database and is not human-readable.

In short, we must remember that the role of filters is to take data from the store and modify it.

Here is another example of a filter

1 {{ 'style.css' | assest_url | stylesheet_tag }}

These two filters create a fully formed style element in a layout file.

There are many really useful filters; here are a few that you will use:

  • asset_url
  • stylesheet_tag
  • script_tag
  • date
  • pluralize
  • replace
  • handle
  • money
  • money_with_currency
  • img_url
  • link_to

The operators

We will focus on the “greater than” operator >. The cart.item_count variable returns an integer that represents the number of items that the Internet user has added to his basket; thanks to this, we can know if the number is greater than zero, and therefore the basket is not empty.

Depending on the logical value returned, a message can be displayed indicating the number of products in the basket.

The code above can be refactored using a pluralized filter. We can display “item” or “items” depending on the number of items in the cart. The advantage at this level is that we don’t need to know the exact number of items to display the correct message, but the Shopify back office will.

In addition to the > operator there are a variety of comparison operators in Liquid, including:

  • == equal to
  • != different from
  • > greater than
  • < less than
  • >= greater than or equal to
  • <= less than or equal to
  • or condition A or condition B
  • and condition A and condition B
  • contains a fragment in a string, or a string in a group of strings

Liquid: Why learn it?

The only reason it is important to learn the Liquid Shopify language is that it allows you to take control of your theme and build the store the way you want it.

To better understand what’s going on, take a random Shopify theme and start dissecting its many parts while previewing to see its effect on the theme.

How to create a Shopify theme?

Before you start developing a theme, do the following:

  • If you choose to use a development store to create a theme, create or log in to a Shopify partner account and create a development store.
  • Note the URL of the store you want to work on, for example shoe-apparel.myshopify.com .
  • Note the Github account you want to connect to your store.
  • Make sure you have a collaborator account or personal account with the Manage Themes license or Themes permission for the store you want to work on.

Step 1: Install the CLI

The Shopify CLI command line allows you to create Shopify themes. It allows you to test, preview and share changes locally on your system.

macOS (Homebrew): run the following lines

$ brew tap Shopify/Shopify

$ brew install Shopify-cli

macOS (Homebrew): run the following line

$ gem install Shopify-cli

Step 2: Initialize a new theme using Dawn

Dawn is a Shopify reference theme. You can choose to use Dawn as a starting point for creating a theme.

1. From the terminal, navigate to the working directory where you want to clone Dawn and enter the following command

$ Shopify theme init

2. You are prompted to give your theme a name. For example, “new-theme-project”

3. Once cloned, access the folder by typing: cd new-theme-project

Step 3: Authenticate with Shopify CLI

  1. Type in your terminal: Shopify login –store <DOMAIN>, <DOMAIN> represents your store’s domain name, such as shoe-apparel.myshopify.com.
  2. On your browser, sign in to the account associated with the store you want to use for development.

Step 4: Preview your theme

To interact with the theme in a browser, type Shopify theme serves

on your terminal. After that, the theme is automatically downloaded by Shopify CLI to your store where you are logged in.

A URL is returned that reloads all local CSS and section changes. You can preview the changes only on Google Chrome

  1. For streaming your theme run the following command

$ Shopify theme serve

  1. In Google Chrome, navigate to http://127.0.0.1:9292 to open the theme preview.

Step 5: Upload your theme to a new GitHub repository

You can create an empty GitHub repository and add your theme code.

Step 6: Install the Shopify GitHub integration and connect your branch to your store

  1. From the Shopify admin, go to Online Store > Themes.
  2. At the Theme Library section, click Add theme > Connect from GitHub.
  3. Connect to GitHub.
  4. You are prompted to authorize and install the online Shopify store GitHub application.
  5. If you’re connecting a repository that belongs to an organization, choose the organization for the repository.
  6. Choose the repository you want to connect to, then choose the branch you want to connect to.

The theme appears in your Themes library. GitHub-connected themes list the repository, branch name, and last commit time on the theme map.

Step 7: Test your connection

  1. Open your repository in an editor. Make sure you are on the branch connected to your theme in the Shopify admin.
  2. Go to the config folder and open settings_schema.json.
  3. At theme_infonode, update the theme name to match the name you gave your theme using the Shopify CLI.
  4. Save and commit your changes, then upload them to GitHub.
  5. From your Shopify admin, open the Themes page.
  6. In the theme library, find the theme connected to your branch. The last recorded date should match the time you pushed your commit to the branch.
  7. Click Customize to open the theme editor. Next to the repository and branch name, click the ⋯ menu button. In the menu, the theme name should match the value you entered in settings_schema.json.

If you’re looking to build beautiful, responsive Shopify themes, then Liquid is the templating language for you! This tutorial will help you all about Liquid Shopify development, how it works with Shopify themes, and some core concepts that will help you build better themes.