Basics
Liquid Introduction
Introduction to Shopify Liquid
Liquid is Shopify's templating language for dynamic e-commerce theme rendering.
What is Liquid?
Liquid is an open-source templating language created by Shopify. It is specifically designed to load dynamic content on Shopify stores. Liquid acts as a bridge between the HTML and the data stored in a Shopify store, enabling developers to create dynamic e-commerce experiences.
How Liquid Works
Liquid uses a combination of tags, filters, and objects to display dynamic content. These elements work together to render data from Shopify's backend into the frontend of a store. The basic components of Liquid are:
- Objects: These are variables that return data from Shopify, such as product titles, prices, and collections.
- Tags: These control the logic and flow, allowing you to execute loops and conditional statements.
- Filters: These are used to modify the output of objects. For example, you can use filters to format dates or change text to uppercase.
Basic Liquid Syntax
Understanding the basic syntax is crucial to using Liquid effectively. Here is a simple example of Liquid syntax:
In this example, {{ product.title }} and {{ product.price }} are objects that pull data from Shopify. The | money filter formats the price output.
Using Liquid Tags
Liquid tags are used to create logic and control flow in templates. For example, you can use tags to loop through a list of products or to display content conditionally.
In this example, the {% for %} tag is used to loop through each product in a collection, displaying its title and description.
Applying Filters in Liquid
Filters in Liquid modify the output of objects. They can be used to adjust the presentation of data, such as changing text case or formatting numbers.
This code will output the text in uppercase: "LIQUID IS AWESOME!" The | upcase filter is applied to change the case of the string.
Basics
- Next
- Setup
