Basics
Liquid Syntax
Liquid Syntax Basics
Liquid syntax uses {% %} for logic and {{ }} for output in Shopify themes.
Introduction to Liquid Syntax
Liquid is a template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Liquid syntax is designed to be readable and easy to use. This guide covers the basics of Liquid syntax, focusing on the use of {% %} for logic and {{ }} for output.
Output Syntax with {{ }}
In Liquid, the double curly braces {{ }} are used to output content. This syntax is used when you want to display a variable's value or the result of an expression directly into the HTML of your Shopify theme.
For example, to display the name of a product, you would use:
Logic Syntax with {% %}
The curly brace percentage syntax {% %} is used in Liquid for logic. This includes control flow statements like loops and conditionals, as well as filters and tags that modify the output.
For example, to create a loop that iterates over a collection of products, you would use:
Using Filters to Modify Output
Liquid filters are used to modify the output of variables. Filters are placed within the output tags and are separated from the variable by a pipe (|) character.
For example, to capitalize the title of a product, you would use:
Conditional Statements
Conditional statements in Liquid allow you to execute code based on certain conditions. These are similar to 'if' statements in other programming languages.
For example, to check if a product is available, you would use:
Conclusion
Understanding the basics of Liquid syntax is crucial for developing Shopify themes. The ability to use {{ }} for output and {% %} for logic allows developers to create dynamic and engaging e-commerce experiences. In the next post, we will explore how to use variables in Liquid to further enhance your Shopify theme development.
