Home » Understand how to edit Liquid code on Shopify?

Understand how to edit Liquid code on Shopify?

Liquid code on Shopify

When you want to make changes to your Shopify store, to add functionality that is not initially provided in the CMS, you will need to edit the Shopify site code.

You can freely access the code of your Shopify store and modify it as you wish, however the files to modify are different from those present on other websites that do not use Shopify. Indeed, the code of your store is contained in “Liquid” files which is the language at the heart of a Shopify store.

In this article, we’ll introduce you to what “Liquid” is and how to modify it to make changes to a store or create a Shopify theme.

What is Liquid?

Liquid is a template language, or also called markup language, which was developed by Shopify to create the structure of their stores. This language can look like other, more common ones such as HTML, and allows you to create store pages, but also to retrieve data in the back office to process and display it on the front.

The Liquid language acts like any other classic programming language in certain aspects and allows you to integrate variables, logic or loops, for example, into your code.
Some things are therefore possible with Liquid as we would in PHP, but conversely everything that can be done with PHP will not necessarily be possible with Liquid.

See also
Shopify contact page: 3 key tips for perfect success

The main role of this language is to make the link between a markup structure, a file similar to HTML, and data.

How to change Liquid code on Shopify?

To modify the Liquid code of a Shopify store, you must first log in to the administration panel of the store with an account having the rights to modify the code.

Then go to the shop themes by following the path “Online shop > Themes” (1) and click on the “Actions” button (2) to the right of the shop theme, or of the theme to be modified” to then choose the option “Change the code” (3).

How to change Liquid code on Shopify?

You will then be redirected to the code and files editor of the selected theme where you can add, delete or modify the “.liquid” files and all the code of the store.

How to use Liquid syntax?

Delimiters are the two main features of the Liquid language and are the double braces “{{“ and “}}” then the braces associated with the percent sign “{%” and “%}”.

The double curly braces “{{ }}” is the syntax for the “output” which allows to display a data in a page of the shop. It is with this syntax that we can display data dynamically according to the page on which the user is or information from the store. For example, the following code “{{ product.title }}” displays the name of a product in the store and “{{ shop.address.city }} returns the name of the city where the store is located , if it is specified.

See also
Which site or cms to choose in dropshipping to create your shop?

Filters can also be applied to the data to modify the display of this data on the page, directly inside the syntax of the double braces.

Next, the braces with the percent sign “{% %}” are used to create logic in the code, to control the display of an element or to embed elements from other files. This makes it possible to introduce conditional logic (if, else, endif), loops (for, endfor) or sometimes to integrate elements from another .liquid file inside the current file (section, form, layout , …).

The main objects

Objects are variables containing information that correlates with each other. For example, the object named “shop” in Shopify will store information about the store.

The information stored in these objects can be processed and displayed using the double braces and the single brace plus the percent sign. Each object has attributes specific to it. In these attributes will be stored precise information about the object itself.

Continuing with the example of the “shop” object which stores store data, we can use the “address” attribute to retrieve and then process or display the physical address of the store.

There are many objects on Shopify that you can use in the Liquid language. If you want to have more information about these objects, you can refer to the Liquid documentation .

See also
Shopify host: What type of hosting to choose?

Some of these items will come up more often in your Liquid usage, as they store important information for the store. Here is a small list of the main objects in Liquid:

  • article
  • cart
  • checkout
  • current_page
  • customer
  • page
  • product
  • shop

Filters

As we saw in the introduction to this part, there are “filters” in Liquid that allow you to change the data output format and thus display them differently on the screen than their initial format.

Let’s take the “article” object and its “published_at” attribute which stores the date on which a blog article was published on the site.

If you want to display it on your store, you will surround this object and its attribute between double braces {{ article.published_at }}.

By adding a pipe sign “| followed by the filter “date” and the filter value, you will apply a filter on the article’s publication date to change the format of the publication date.

Thus, using the example given above, you can display the publication date with the day, the month and then the year by adding the following filter to the object and its attribute:

Filters

Several filters can be applied to the same value of an object by separating each filter with a “| “.

You can find more information about Liquid filters in the Liquid documentation.

See also
How does shopify pay us and transfer the money?

Conditional logic

If you’ve ever practiced a programming language before, you probably already know how to use conditional logic statements.

In Liquid, we find the basis of all logic in most languages, namely the “if” as well as the “else”. These two keywords are used to create conditions in your Liquid code.

Let’s determine the following example where we want to display the buy button on a product page only if the product is available, otherwise display an out of stock message.

Conditional logic shopify .liquid

In the code snippet given above, we use the syntax “{% %}” to indicate in Liquid language that we are going to perform a logic or information processing operation.

Inside these braces with percentage, we add our condition with “if” and the “available” attribute of the “product” object which allows to know the availability of a given product. If the product is available, then the buy button is displayed.

Otherwise, with “else” we create a default action that will display the out of stock message instead of the “Buy” button.

In Liquid, we use “endif” to indicate that the logic is finished and that the code that will be written next will not be part of the results of the condition.

“else” is however not compulsory in a logic, we could very well have written only the “if” logic and if this one had not been checked in this case not to display anything at all, neither button, nor message.

See also
How do I use Oberlo on Shopify?

Buckles

Just as we can use conditional logic in Liquid, we can also use loops.

Loops are used to repeat an action as long as the condition is true. To create a loop, use the keywords “for”, “in” and “endfor” inside braces with a percent sign.

Imagine that we want to display all the order numbers that a user has made on the Shopify store. We retrieve all the orders placed by a user with the “customer” object which represents a user and the “orders” attribute which is a list of all the orders that this same user has made on the store.

To display all the commands of the user, we will use a loop which will display the identifier of a command and will start again as long as there is a command that the loop has not displayed.

Buckles shopidy .liquid

In the loop condition, we retrieve one order at a time in the “order” variable, starting with the “for” keyword. We then indicate after the keyword “in” where the data must be retrieved, in our case it will be in the list of orders for the user “customer.orders”.

The order number will be displayed thanks to the “id” attribute of the “order” object which is stored in the variable of the same name. And it will start again for each command present in the list of commands of the given user.

See also
How do I terminate, stop, delete or deactivate shopify?

We end the loop with “endfor” to indicate that the condition and the action thereof do not apply to the Liquid code that will follow.

Conclusion

On Shopify, it is quite easy to modify the code of a store. All store files in “.liquid” format are available directly in the modification of a theme’s code.

If you want to modify the code of a theme, be sure to save it before any modification to be able to roll back if you happen to create errors in the initial code.

However, free access to the Liquid code remains a great opportunity to add new functionalities to a store or create a new theme. 

Leave a Reply

Your email address will not be published.