Easy-to-understand English guide to Shopify Liquid

Liquid is Shopify’s templating engine that brings your backend store data into your public-facing frontend. Sellers who understand Liquid can unlock new store customizations without the need for a developer.

This article will explain the basics.

Liquid is the bridge between your store’s content and how it is displayed. The template resides in the following file: . liquid Suffix for all pages or sections. therefore, Main products: liquid Contains product templates.

Product templates are located at Main products: liquid. Click on the image to enlarge.

Shopify organizes your files based on their content. For example, the “sections” folder contains files that define entire parts of the site, such as headers and product galleries. The “Snippets” folder applies to small components such as buttons or certain design elements.

Snippets can reside in section folders. For example, a seller can create a custom button in a snippet file and include it in a section folder. To place “snippet_name.liquid” inside “main-product.liquid”, place your cursor at the appropriate location in the product file and add the following line: {% Rendering ‘snippet_name’ %}.

syntax

A liquid function, or syntax, in which terms and phrases are defined.

variable

Variables represent dynamic information. for example, {{ Product.Title }} Dynamically display the product title. Notice how Liquid uses double curly braces ( {{ }} ) to retrieve variable information.

object

object A collection of data. Examples include: product, collectionand customer.

• product It holds all the information about a particular product, such as title, ID, description, and price. To display the price of a product, create a variable {{ Product.Price }} Here product is an object and price is a property. Shopify makes all listings public product Object properties.

• collection Represents a group of products, such as a category. Retrieves information from a collection object about all products assigned to the collection object or assigned information such as title, description, and number of products. Click here for Shopify list collection properties.

• customer Includes information about logged-in users, such as name, email address, postal address, marketing consent, and order preferences. here’s everything customer properties.

tag

Tags add logic to your Liquid code through two main types: control flow and iteration.

Control flow tags drive logic such as if/else statements.

{% if product.available %}
This product is in stock!
{% else %}
Sorry, this product is out of stock.
{% endif %}

A repeat tag repeats an action, such as looping through the products in a collection.

{% for product in collection.products %}
{{ product.title }}
{% endfor %}

filter

Filters transform the data that Liquid retrieves. for example:

• {{ Product.Title | Uppercase }} Displays the product title in uppercase.
• {{ product.price | times: 1.2 }} We will increase the price by 20%.

Custom message example

Here is a real example. Imagine you want to display a custom message on the screen. Product page If the item is in stock or out of stock, it will be displayed below the title.

Here’s how:

1. in Shopify administratorMove to. Online Store > Themes > Action (Left button with a dot…) > Edit the code.
2. Find and open Main products: liquid Get files from section folder.
3. Use (Ctrl + F) to search for {%- when ‘title’ -%} to find the title.

Place your cursor under the end /div and add:

{% if product.available %}
<p style="color: green;">This product is available! Get it while stocks last!</p>
{% else %}
<p style="color: red;">Sorry, this product is currently out of stock.</p>
{% endif %}

Add a custom message when a product is in stock or out of stock. Click on the image to enlarge.

Save and preview. Save your changes and preview your store. This example displays a green message if the product is in stock, and a red message if the product is in stock. Out of stock.

The message “Sorry, this item is currently out of stock” appears in red. Click on the image to enlarge.

Start

Experimentation and testing are the best ways to learn.

• Please back up theme. Always clone your theme before changing it. click Actions > Duplicate It’s in the admin’s Themes section.
• Use preview mode. Shopify lets you preview your changes before you publish them.
• Start small. Start with small changes.

See below for more information on liquids.