How to work with Shopify Liquid variables?

Tweet LinkedIn

Shopify’s templating language, Liquid, uses a variety of objects, tags, and filters to load dynamic content in the templates.

Variables in Liquid are pivotal for storing data that you want to reuse throughout your template.

In comparison with other programming languages Liquid uses a simple word to declare a variable and that is “assign”.

In conclusion a variable is defined with the assignment tag “{% assign %}” and can hold data types like strings, numbers, booleans, and even complex objects and arrays.

How is the Liquid code working behind the scenes?

Parsing

When a Shopify page is requested, the server reads the Liquid templates associated with that page. 

The Liquid code is parsed, which means the interpreter breaks down the Liquid syntax into a form it can understand and work with.

This step involves analyzing the structure of the code, including variables, objects, filters, and tags.

Interpreting

After parsing, the interpreter executes the Liquid code.

This involves replacing variables with their actual values, executing control structures like loops and conditionals, and applying filters to modify the output.

Rendering

The final step involves generating HTML content from the interpreted Liquid code.

The dynamic data fetched and processed by Liquid is inserted into the appropriate places in the template, and the server sends this rendered HTML to the client’s web browser.

Declaring variables in Shopify Liquid

To declare a variable in Liquid, you use the {% assign %} tag.

The general syntax is:

{% assign myVariable = "value" %}

Store a string value inside a Liquid variable

A string value in programming represents a sequence of characters used to store and manipulate text.

It’s enclosed in quotes, either single (‘ ‘) or double (” “), and can include letters, digits, symbols, and whitespace characters (like spaces or tabs).

In languages like JavaScript, PHP, and many others, strings are used extensively for displaying text on the web, processing user input, and communicating data between systems.

{% assign myString = "Hello, world!" %}

Store a number value inside a Liquid variable

Number values in programming are used to represent numerical data, such as integers, floats (decimal numbers), and more complex numbers like binary, hexadecimal, or scientific notation values.

They are fundamental in calculations, comparisons, and storing measurable quantities in code.

{% assign myNumber = 42 %}

Store a boolean value inside a Liquid variable

A boolean is a data type that can only have one of two values: true or false.

This binary nature makes booleans essential for conditional logic in programming, where they are used to make decisions, control program flow, and handle “yes/no”, “on/off”, or “true/false” conditions.

{% assign myBoolean = true %}

Store objects inside a Liquid variable

In Shopify Liquid, objects are used to store and manipulate complex data structures, including collections of key-value pairs.

These objects can represent various types of data such as products, collections, customers, and more providing a structured way to access information about different aspects of a Shopify store.

Objects in Liquid are accessed using dot notation or square bracket notation.

For example, to access the title of a product, you would use:

{% assign myProduct = all_products[“product-handle”] %}

Store array inside a Liquid variable

Arrays are data structures used to store multiple values in a single variable.

They hold a list of items that can be of the same type or different types, depending on the programming language.

Arrays are ordered, meaning each item has a numerical index starting from a specific number (usually 0 or 1, depending on the language) which you can use to access or modify the value at that position.

Is not only that you can store an array inside a variable but in liquid this is the only way to create an array:

{% assign myArray = "apple, banana, cherry" | split: ", " %}

Capture

Captures the string inside of the opening and closing tags and assigns it to a variable.

Variables created using capture are stored as strings.

{% capture my_variable %}This is a value.{% endcapture %}

Using capture, you can create complex strings using other variables created with “assign” and you can use interpolation.

{% assign myFirstVariable = "John Doe" %}
{% assign mySecondVariable = 35 %}

{% capture myThirdVariable %}
I am {{ myFirstVariable }} and my age is {{ mySecondVariable }}.
{% endcapture %}

Accessing variable values

To output the value of a variable, you simply wrap the variable name in {{ }}:

{{ myVariable }}

How to control white space in variables?

In Liquid, you can include a hyphen in your tag syntax {{- -}}, {%- and -%} to strip whitespace from the left or right side of a rendered tag.

Normally, even if it doesn’t output text, any line of Liquid in your template will still output an empty line in your rendered HTML.

Use inside Liquid code:

{%- myVariable -%}

Output to screen:

{{- myVariable -}}

Conclusion

Variables in Shopify’s Liquid templating language are incredibly powerful for creating dynamic, reusable content.

By understanding how to declare, modify, and use variables within your Shopify themes you can greatly enhance the customization and functionality of your online store.

Remember, the key to mastering Liquid variables is practice and experimentation.

Use this guide as a stepping stone to create more complex and dynamic templates in your Shopify projects.