Basics

Liquid Variables

Declaring Liquid Variables

Liquid variables use assign or capture for dynamic data in Shopify.

Introduction to Liquid Variables

In Shopify, Liquid variables are a fundamental concept that allows developers to store and manipulate data within templates. They are used to hold dynamic content which can be rendered on storefront pages. Liquid provides two primary tags to manage variables: assign and capture. These tags enable developers to create and modify variables in a flexible manner.

Using the Assign Tag

The assign tag is used to create a variable and assign it a value. This is similar to declaring a variable in many programming languages. The value can be a string, number, or any other data type. Once assigned, the variable can be used throughout the template.

Here's a basic example of using the assign tag:

In the example above, a variable named greeting is created and assigned the string 'Hello, World!'. The variable is then output using the double curly braces syntax {{ greeting }}.

Using the Capture Tag

The capture tag is useful when you need to store larger blocks of content or perform operations that involve multiple lines of Liquid code. Unlike assign, it captures everything within the opening and closing tags and assigns it to a variable.

Here’s an example:

In this example, capture is used to create a variable called full_name that stores a block of text, including another variable last_name. This allows for more complex string manipulations or aggregations.

Variable Scope in Liquid

Liquid variables have a scope that determines where they can be accessed. Variables defined with assign or capture are generally available only within the block of code where they are declared, such as within a loop or an if statement.

Understanding variable scope is crucial for effective template design, as it ensures data is used and modified correctly.

Common Use Cases for Liquid Variables

Liquid variables are versatile and can be used in numerous scenarios, such as:

  • Storing and displaying user input or form data.
  • Performing calculations and storing results for use later in the template.
  • Creating dynamic content that changes based on user interaction or data conditions.

By leveraging Liquid variables, developers can create rich, dynamic shopping experiences tailored to customer needs and behaviors.

Previous
Syntax