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 is used to load dynamic content on storefronts. It allows developers to embed logic into HTML and manipulate content depending on different conditions. This post will guide you through the basic syntax of Liquid, focusing on how to use tags for logic and output.

Logic Tags in Liquid

Logic tags in Liquid are enclosed within {% %}. They are used to perform operations like loops, conditionals, and assigning variables. Let's explore some common logic tags.

Conditional Logic with 'if' and 'unless'

The if and unless tags are used for conditional operations. These are similar to if-else statements in many programming languages.

Iteration with 'for' Loops

The for loop is used to iterate over an array. For example, you can loop through a list of products.

Output Tags in Liquid

Output tags in Liquid are enclosed within {{ }}. These tags are used to print variables and expressions. Here's how you can display product information.

Filters in Liquid

Filters are used to modify the output of variables. They are placed within the output tags and separated by a pipe |. For example, using the money filter formats a number as a currency.

Conclusion

Liquid syntax is a powerful tool for developers working with Shopify themes. By mastering the use of logic and output tags, you can create dynamic and flexible e-commerce sites. In the next post, we will delve deeper into using variables in Liquid.

Previous
Setup