Liquid basics
Liquid is used to dynamically output objects and their properties. You can further modify that output by creating logic with tags, or directly altering it with a filter. Objects and object properties are output using one of six basic data types. Liquid also includes basic logical and comparison operators for use with tags.
Defining logic with tags
Liquid tags are used to define logic that tells templates what to do. Text within tag delimiters doesn’t produce visible output when the webpage is rendered.
{% %}
Curly brace percentage delimiters denote logic and control flow.
Modifying output with filters
Liquid filters are used to modify the output of variables and objects. To apply filters to an output, add the filter and any filter parameters within the output’s curly brace delimiters, preceded by a pipe character.
Multiple filters can be used on one output. They’re parsed from left to right.
{{ | }}
Filters are placed within an output tag and denoted by a pipe character.
Referencing objects
Liquid objects represent variables that you can use to build your theme. Object types include, but aren’t limited to:
- Store resources, such as a collection or product and its properties
- Standard content that is used to power Shopify themes, such as content_for_header
- Functional elements that can be used to build interactivity, such as paginate and search
Objects might represent a single data point, or contain multiple properties. Some products might represent a related object, such as a product in a collection.
{{ }}
Double curly brace delimiters denote an output.
Scope
Some objects can be accessed globally, and some are available only in certain contexts. Refer to the specific object reference to find its access scope.
Creating variables
You can also create your own variables using variable tags. Variables are treated like objects syntactically.
Liquid Tags
Liquid tags are a feature primarily used in templating engines to generate dynamic content within a document or a web page. The term “Liquid” refers to a template language created by Shopify, which allows developers to insert dynamic content and logic into their templates. Liquid tags are enclosed in curly braces {{ … }} and can contain variables, filters, and control structures.
Here’s a brief overview of the components you can use within Liquid tags:
- Variables: Variables are used to output dynamic content, such as text or numbers. For example:
{{ product.name }}
{{ user.email }}
Filters: Filters are used to modify the output of a variable. They are separated from the variable by a pipe |. For example:
{{ user.name | capitalize }}
{{ price | currency }}
- Tags: Tags are used for control structures and logic. They’re enclosed in curly braces {% … %}. Common tags include:
- if: Used for conditional statements.
- for: Used for looping over a collection.
- assign: Used to create or modify variables within the template.
- include: Used to include other templates within the current template.
- Comments: Comments are ignored during template rendering and are enclosed in curly braces and a percentage sign {% comment %} … {% endcomment %}.
Liquid tags are commonly used in systems like Shopify, Jekyll (a static site generator), and other content management systems to build dynamic templates and pages. However, the specific usage and available features of Liquid tags can vary depending on the platform or tool that implements them. Always refer to the documentation of the specific platform or tool you’re using for detailed information on how to use Liquid tags effectively.
Conditional Statements
Conditional statements in Liquid, the template language, are used to control the flow of your template based on certain conditions. The primary conditional statement in Liquid is the {% if … %} … {% endif %} block. Here’s how it works:
{% if condition %}
<!– Code to execute if the condition is true –>
{% else %}
<!– Code to execute if the condition is false –>
{% endif %}
You can also use elsif to add more conditions to the statement:
{% if condition1 %}
<!– Code to execute if condition1 is true –>
{% elsif condition2 %}
<!– Code to execute if condition1 is false and condition2 is true –>
{% else %}
<!– Code to execute if both condition1 and condition2 are false –>
{% endif %}
Loops and collections in liquid
In Liquid, you can use loops to iterate over collections of items such as arrays, lists, or other iterable data structures. The {% for … %} … {% endfor %} loop is used for this purpose. Here’s how you can use loops and collections in Liquid:
{% for item in collection %}
<!– Code to execute for each item in the collection –>
{% endfor %}
Here’s an example that demonstrates how to loop through an array of products:
{% assign products = [“Product 1”, “Product 2”, “Product 3”] %}
<ul>
{% for product in products %}
<li>{{ product }}</li>
{% endfor %}
</ul>
{% assign products = [“Product 1”, “Product 2”, “Product 3”] %}
<ul>
{% for product in products %}
<li>{{ product }}</li>
{% endfor %}
</ul>
In this example, the code inside the loop will be executed for each item in the products array, and the product name will be displayed in a list item.
You can also access the index of the current item using the forloop variable:
<ul>
{% for product in products %}
<li>{{ forloop.index }}. {{ product }}</li>
{% endfor %}
</ul>
This will display each product with its corresponding index in the list.
Additionally, you can use the forloop variable to access other loop-related information, such as forloop.index, forloop.index0, forloop.first, forloop.last, and forloop.length.
Advanced Techniques in liquid
Filters Chaining: You can chain multiple filters together to modify the output. For example:
{{ user.name | capitalize | truncate: 10 }}
- This will capitalize the name and then truncate it to a maximum of 10 characters.
- Assigning Variables within Loops: You can use the assign tag within a loop to create or modify variables for each iteration:
{% for product in products %}
{% assign discounted_price = product.price | times: 0.8 %}
<p>{{ product.name }} – Discounted Price: {{ discounted_price }}</p>
{% endfor %}
Using capture for Complex Logic: The capture tag allows you to capture the output of a block of code and store it in a variable for later use:
{% capture welcome_message %}
Welcome, {{ user.name }}! You have {{ user.points }} points.
{% endcapture %}
<div>{{ welcome_message }}</div>
Nested Loops: You can nest loops within loops to handle multi-dimensional data structures:
{% for category in categories %}
<h2>{{ category.name }}</h2>
<ul>
{% for product in category.products %}
<li>{{ product.name }}</li>
{% endfor %}
</ul>
{% endfor %}
Custom Filters: You can define your own custom filters in some Liquid implementations. This allows you to create reusable transformations:
{% assign text = “Hello, World!” %}
{{ text | custom_filter }}
- This would output something like “HELLO, WORLD!” if you’ve defined the custom_filter to capitalize and make the text uppercase.
- Include with Variables: You can use variables in the include tag to dynamically include different templates:
{% assign template_name = “product” %}
{% include template_name %}
- This will include the template named “product”.
- Using unless for Negative Conditions: The unless tag is similar to if, but it checks for a condition to be false. It’s useful when you want to show content only when a certain condition is not met:
{% unless user.is_logged_in %}
<p>Please log in to access exclusive content.</p>
{% endunless %}
Raw Blocks: You can use the raw and endraw tags to prevent Liquid from processing content within those blocks:
{% raw %}
This {{ will }} not be processed by Liquid.
{% endraw %}
These advanced techniques showcase the flexibility and power of the Liquid template language. Remember that Liquid’s capabilities might vary depending on the platform or tool you are using, so always consult the specific documentation for accurate details.
Steps to be followed while customizing a theme
Step 1 : Get access to the store.
Step 2 : Install Shopify CLI.
Step 3 : Download theme code
Step 4 : Make customization.
Step 5 : preview changes – shopify theme dev
Step 6 : Share changes – shopify theme push
Step 7 : Publish the Updated theme – shopify theme publish