Variables - Theme Reference - 0.10.11

Variables are key-value pairs that you can use to provide configuration options for your theme.

Theme Variables

You can add theme variables from the Related tab of your Theme.

Here we have a Key field. This must be unique per Theme. It can be anything you like, however it is good practice to use a naming convention, eg group related items together using dot notation: locations.search.default_distance.

When to use Theme Variables

Theme variables are best used when you are creating a theme but want to give some configuration options that affect some aspect of the theme, so that the theme can be tweaked without having to alter the template code.

Example

The example theme variable locations.search.default_distance is a real-world example of a variable from our built-in theme. It’s used in the Location Finder liquid template to set the default search radius for the location search.

We are aware that each Store that uses our built-in theme may want to have a different default distance for the search. So we provided a variable that can be used to change this distance.

When Creating Themes

Theme authors will use variables when they are aware that the end-users of their themes may want to configure some aspect slightly differently. They should extract that value into a variable and provide a good default value for the variable.

When Configuring Themes

Those who are using and configuring existing themes with variables can just adjust the value of the variable. If you are configuring one of the built-in themes, you will need to create a matching variable in your theme and set the value to whatever you need. This is how you override built-in theme variables.

Using the theme variable in liquid code

Theme variables can be accessed using the global variable theme_variables.

Example

Once again using our example variable, this is how you access its value:

{{ theme_variables["locations.search.default_distance"] }}

20

That’s it for Theme Variables.

Back to Overview