Shopify Liquid is an open source template language developed by Shopify and designed for flexible implementation of online store functionality. By writing Liquid syntax directly in your HTML documents, you can create customized web pages using dynamic data such as product information.
Liquid has a relatively easy-to-understand syntax, making it easy to use even for people with little programming experience. This article explains the basic concepts of Shopify Liquid, its main features, and resources to help you learn it.
What is Liquid?
Source: Liquid｜Shopify.dev
Liquid is an open source template language developed by Shopify. It is suitable for creating dynamic web pages by directly writing tags and variables in HTML documents using Liquid syntax and using data such as product information. Shopify also provides platform-specific objects and variables that give you flexibility in implementing the functionality of your e-commerce site.
Characteristics of Liquid
Simple syntax that is easy to understand
It has a syntax that is relatively easy to understand, even for people with little programming experience.
Highly safe
It provides better security by preventing users from executing server-side code.
highly flexible
It provides basic programming elements such as variables, conditional branches, and loops, and can also perform complex processing.
Perfect for theme customization
Efficiently customize the design and layout of your online store.
Liquid’s role in Shopify
Liquid plays an important role at Shopify, including:
Customize the theme
Used to flexibly customize the design and functionality of your store.
Generating dynamic content
Display dynamic content on your web pages, such as product information, cart contents, and customer data.
Implementing business logic
You can implement complex business logic using conditional branching and repetition.
Separation of data and presentation
It bridges HTML and data and improves code maintainability.
Performance optimization
It is rendered server-side, so it is faster compared to client-side JavaScript.
Multi-language support
Internationalization (i18n) support makes it easy to build multilingual stores.
Main areas that can be customized with Liquid
By using Liquid, you can customize Shopify themes, email bodies, and forms such as receipts. The main areas that can be customized with Liquid are as follows.
Edit template code
Templates define the basic structure of each page in your store. Shopify provides major templates such as product.liquid (product page), collection.liquid (collection page), and index.liquid (homepage). By editing these templates, you can change the overall layout of your page and the arrangement of content.
Editing templates uses a combination of HTML and Liquid. For example, you can change the layout of your product pages or add new functionality (such as displaying related products). Edit templates with caution, and be aware that changes can affect your entire store.
Customized Liquid (section block)
Custom Liquid is a section block available in the theme editor. By using custom Liquid, you can insert liquid code anywhere you want without directly editing the liquid file. It has the advantage of being able to customize the theme with less influence than editing templates.
email template
Shopify lets you customize templates for automated emails such as order confirmations, shipping notifications, and account creation. Editing email templates allows you to maintain brand consistency and improve communication with your customers.
You can also use Liquid in your email templates to dynamically insert order and customer information. For example, you can display the orderer's name with {{ order.name }} or display the order details using the {% for line_item in order.line_items %} loop.
Shopify Order Printer
Shopify Order Printer is a Shopify app that allows you to print forms such as order invoices, delivery notes, and picking lists.
Shopify Order Printer templates can also be customized using HTML and Liquid. For example, you can add your company's logo or change the layout of certain order information. You can display the shipping name with {{ order.shipping_address.name }} and the order total with {{ order.total_price | money_with_currency }}.
The blog article below introduces Order Printer. Please use this as a reference.
Liquid basic syntax
Liquid's basic syntax consists of five main elements: variables and outputs, objects, filters, tags (control flow and iteration), and comments.
By understanding these basic syntaxes and combining them appropriately, you can develop flexible and dynamic Shopify themes.
variables and output
Variables and outputs are Liquid's most basic features. To print the value of a variable, use double curly braces "{{ }}". For example, to display the title of a product, write "{{ product.title }}".
<Example>
{{ product.title }}
Use the assign tag to define new variables. A variable's scope is usually limited to the template in which it is defined.
<Example>
{% assign my_variable = "Hello, World!" %}
object
Liquid handles various objects. Use dot notation to access object properties.
<Example>
{{ product.title }}
{{ collection.products }}
Shopify provides major objects such as product (product information), collection (collection information), cart (cart information), and customer (customer information). Through these objects, you can access various data in your store.
<Main objects>
-
product: Product information -
collection: Collection information -
cart: Cart information -
customer: Customer information - article: Blog article information
- blog: Blog information
- shop: Store information
filter
Filters are used to modify (or format) the output values. Use the pipe symbol (|) to apply a filter.
<Example>
{{ product.price | money_with_currency }}
It is also possible to chain multiple filters.
<Example>
{{ "hello" | capitalize | append: "!" }}
For example, use the money filter to display amounts in monetary format, and the capitalize filter to capitalize the first letter of a string.
<Main filters>
-
capitalize: Capitalize the first letter of the string. -
money: Displays the amount in currency format. -
date: Format the date.
Tags (control flow, iteration)
Tags are used to implement logic within templates. Use if, elsif, else tags for conditional branching, and for tag for iteration. These tags allow you to generate dynamic content, process each item in your collection, and more. You can also control loops using the break and continue tags.
<Description example: Conditional branch>
{% if product.available %}
in stock
{% else %}
Out of stock
{% endif %}
<Description example: loop>
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
comment out
To add comments to your code, use the comment and endcomment tags. Content enclosed in these tags will be ignored by the Liquid engine. You can write single-line comments or multi-line comments. We also sometimes use raw and endraw tags to prevent parsing of Liquid code.
<Example: Commenting out a single line>
{% comment %}single line comment{% endcomment %}
<Example: Commenting out multiple lines>
{% comment %}
this is
multiple lines
This is a comment
{% endcomment %}
<Description example: Commenting out the output>
{% raw %}Output comments{% endraw %}
Shopify-specific Liquid objects
Shopify offers its own Liquid object specifically for developing online stores. These objects allow you to easily access various information in your store and generate dynamic content. Below we describe the main Shopify-specific Liquid objects.
product
The product object contains information about individual products. Through this object, you can access the product's title, description, price, image, variants (choices like size and color), availability, and more. For example, you can use {{ product.title }} to display the product name, or {{ product.price | money_with_currency }} to display the price with currency. The product object is mainly used on product detail pages, but it can also be used on product list pages, etc.
collection
The collection object provides information about a group (collection) of products. You can access the collection's title, description, and images, as well as the list of products included in that collection. You can display the collection name with {{ collection.title }} or display all products in the collection using the {% for product in collection.products %} loop. Collection objects are often used for things like category pages and displaying related products.
cart
The cart object represents the current shopping cart state. You can access information such as number of items in your cart, total price, and individual cart items. You can display the number of items in your cart with {{ cart.item_count }} or the total amount with {{ cart.total_price | money_with_currency }}. The cart object is used to implement cart pages, mini carts, display cart information in headers, etc.
customer
The customer object provides information about the currently logged in customer. You can access customer names, email addresses, order history, and more. You can use {% if customer %} and {% endif %} to change the display depending on logged in state, and {{ customer.name }} to display the customer name. The customer object is used to display personalized content and implement account pages.
article
The article object provides information about a blog article. You can access the article title, text, creation date, author, comments, and more. You can display the article title with {{ article.title }} and the article body with {{ article.content }}. The article object is used for blog article pages, blog article list display, etc.
blog
The blog object contains information about the entire blog. You can access the blog title, article list, comment settings, and more. You can display the blog title with {{ blog.title }} or display all the articles in the blog using the {% for article in blog.articles %} loop. The blog object is used for things like blog index pages and displaying the latest article list in the sidebar.
shop
The shop object contains information about the store as a whole. You can access your store name, description, logo, currency settings, a link to your policy page, and more. You can display your store name with {{ shop.name }} and your contact email address with {{ shop.email }}. The shop object is used to display headers, footers, or other information that is commonly used throughout the store.
Conditional branching and control structures
Shopify Liquid allows you to create dynamic content and implement logic using a variety of conditionals and control structures. The main structures and their usage are explained below.
if, elsif, and else
The if statement is the most basic conditional branching structure. Execute a block of code only if a certain condition is true. You can use elsif (else if) to check multiple conditions and use else to specify what to do if none of the conditions are met.
For example, if you want to display different messages depending on the product's availability, you can write:
{% if product.available %} <p>in stock</p> {% elsif product.variants.first.inventory_quantity < 5 %} <p>Only a few left</p> {% else %} <p>Out of stock</p> {% endif %}
Using this structure, you can dynamically change content based on various conditions.
The blog post below shows you how to display inventory counts in Shopify. Please use this as a reference.
3 ways to display inventory counts on Shopify | Introducing the Shopify app
case/when
The case/when structure is useful when you need to evaluate multiple conditions. It is especially suitable for checking multiple values against a single variable.
For example, if you want to display different descriptions based on the type of product:
{% case product.type %} {% when 'T-shirt' %} <p>A comfortable 100% cotton T-shirt.</p> {% when 'jeans' %} <p>Jeans made of durable and durable denim.</p> {% else %} <p>This is a high quality product.</p> {% endcase %}
This structure allows you to handle multiple conditions efficiently while keeping your code more concise.
for loop
A for loop is used to iterate over each item in an array or collection. This can be used in many situations, such as displaying a list of products or repeating menu items.
For example, to display all products in a collection:
{% for product in collection.products %} <div class="product"> <h2>{{ product.title }}</h2> <p>{{ product.price | money }}</p> </div> {% endfor %}
For loops also have useful parameters such as limit, offset, and reversed, which allow you to limit the number of items displayed, display them in reverse order, etc.
Setting multiple conditions
If you need complex conditional branching, you can combine multiple conditions. You can combine conditions using and and or, and group conditions using parentheses.
For example, if you want to display special offers only under certain conditions:
{% if customer.tags contains 'VIP' and cart.total_price > 10000 or product.tags contains 'sale' %} <p>This product is eligible for a special offer!</p> {% endif %}
Combining multiple conditions in this way allows for more fine-grained control.
Data manipulation and transformation
Shopify Liquid allows for a variety of data manipulation and transformations. By leveraging these features, you can create more flexible and dynamic content. The main operations and conversion methods are explained below.
Manipulating arrays and objects
Liquid provides many filters and techniques for efficiently working with arrays and objects.
For array operations, filters such as first, last, size, and join are useful. For example, to display product tags:
{% if product.tags.size > 0 %} <p>Tags: {{ product.tags | join: ", " }}</p> {% endif %}
For object operations, you can use the where filter to filter items that meet specific criteria:
{% assign featured_products = collections.all.products | where: "tags", "Featured" %}
Also,sortIt is also possible to sort arrays and objects using filters.
Handling dates and times
Manipulating dates and times is important for displaying order history, posting dates, etc. Liquid has a function for changing the date format.dateFilters are provided.
<p>Order date: {{ order.created_at | date: "%Y year %m month %d day" }}</p>
Also,nowYou can also retrieve and manipulate the current date and time using tags:
{% assign one_week_from_now = 'now' | date: '%s' | plus: 604800 | date: "%Y-%m-%d" %} <p>Date one week from now: {{ one_week_from_now }}</p>
String operations
String manipulation is useful for processing text data and adjusting its display format. The main filters include capitalize, downcase, upcase, strip, and truncate.
For example, if you want to display a shortened product description:
<p>{{ product.description | truncate: 100, '...' }}</p>
Also,replaceYou can also replace parts of a string using filters:
{{ product.title | replace: 'Limited Edition', '<span class="highlight">limited edition</span>' }}
Numerical calculation
Liquid allows you to use basic mathematical operators (+, -, *, /, %). Filters such as plus, minus, times, and divided_by are also available.
For example, to calculate a discounted price:
{% assign discount_percentage = 0.1 %} {% assign discounted_price = product.price | times: 1.0 | minus: product.price | times: discount_percentage %} <p>Discounted price: {{ discounted_price | money }}</p>
You can also use filters such as round, ceil, and floor to round numbers.
Resources and learning materials
A variety of resources and learning materials are available to help you learn and utilize Shopify Liquid. These mainly fall into three categories: official documentation, cheat sheets, and community forums.
In order to effectively utilize these resources, it is important to always check the latest information based on official documents and use cheat sheets to streamline daily development work. Before asking a question, search the community forum to see if a similar issue has already been discussed, and in addition to solving the problem, it is also important to keep up with new technologies and trends on a regular basis.
official documentation
Source: Liquid｜Shopify.dev
Shopify's official documentation is the most reliable source for learning Liquid.
Shopify Liquid Referencecontains detailed descriptions and usage examples of all Liquid objects, filters, and tags. Very useful when looking up a specific feature or syntax, the alphabetical index allows you to quickly find the information you are looking for.
Shopify Theme Development Guideis structured so that you can learn step-by-step from the basics to application of theme development. Good for getting an overview of theme development and learning best practices.
moreover,Shopify Design Guidelinesintroduces Shopify's design principles and recommended UX patterns. You can refer to it as a guideline when creating user-friendly themes.
cheat sheet
Source: Shopify Cheat Sheet
Cheatsheets help you quickly reference frequently used syntax and functions.
Shopify Cheat Sheetis a compact summary of Liquid's basic syntax, objects, and filters. It is convenient to save it on your desktop or print it out and keep it handy.
Source: Shopify Cheat Sheet
Also, although it is not official from Shopify,Shopify Cheat SheetThere is also a site called (although it has the same name and is confusing), so please use your favorite cheat sheet.
community forum
Source: Shopify Community
Community forums help you share knowledge with other developers and find solutions to specific problems.
Shopify Communityis the official Shopify forum, featuring developers, merchants, and Shopify staff. You can ask questions about specific issues or questions, or see other people's questions and answers.
Shopify tags on Stack Overflowcan help you solve more technical issues or problems when combining Liquid with other technologies.
Also,Reddit's r/shopify subredditdiscusses a wide variety of Shopify-related topics, and is a great place to learn about the latest trends and hear about other developers' experiences.
lastly
Shopify Liquid is a convenient language for efficiently customizing the design and layout of your online store. It provides a variety of functions, from basic variable manipulation to complex conditional branching, and enables the construction of dynamic and flexible web pages.
A variety of resources are available to learn and utilize Liquid, including official documentation, cheat sheets, and community forums. By effectively combining these resources, you can deepen your understanding of Shopify Liquid and hone your skills in effective theme development.
