Liquid Toolkit

Basics

Liquid Variables

Declaring Liquid Variables

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

Introduction to Liquid Variables

Liquid is a templating language used in Shopify and other platforms to create dynamic content. Variables in Liquid allow developers to store data and reuse it throughout their templates. This can be done primarily through assign and capture tags.

Using the Assign Tag

The assign tag is used to create a new variable and assign a value to it. Once assigned, the variable can be used throughout the template. The syntax for using assign is straightforward:

In the example above, the variable product_name is assigned the value 'Awesome T-shirt'. You can then use {{ product_name }} to output the variable's value.

Using the Capture Tag

The capture tag allows you to store content, including HTML, within a variable. This is useful for capturing dynamic content that may include template logic. Here's an example:

In this example, the variable full_name stores the string 'John Doe'. The captured content can be output using {{ full_name }}.

Differences Between Assign and Capture

While both assign and capture are used to create variables, they serve slightly different purposes:

  • Assign is used for simple variable assignments, typically for strings or numbers.
  • Capture is used when you need to capture a block of content, which can include HTML or other Liquid logic.

Best Practices for Using Liquid Variables

When working with Liquid variables, consider the following best practices:

  • Use descriptive variable names to make your templates more readable and maintainable.
  • Avoid overwriting variables unless necessary, as it can lead to confusion.
  • Use capture for multi-line content or complex logic to keep your templates clean.

Conclusion

Liquid variables are a powerful feature in Shopify that allows you to create dynamic and reusable content. By understanding the differences between assign and capture, you can effectively manage variables in your Liquid templates.

Basics

Previous
Syntax
Next
Data Types