The variables simple tag sets top-level variables that are available in all subsequent renders, including snippets and includes. Use it in the before phase to prepare data that the page template will display.

:::note This tag works only inside a Liquid controller template (at controllers/<controller>/<action>.liquid), typically in the before block. It is a silent no-op outside a controller. :::

When variables runs

Use variables in the before block to prepare data before the template renders:

```liquid

{% before %} {% variables page_title: “Checkout”, show_progress: true, step: 2 %} {% endbefore %}

{{ page_title }}

{% if show_progress %} Step {{ step }} of 4 {% endif %} ```

Variables set this way are available to the main page template and all included snippets.

Syntax

```liquid

{% variables key1: value1, key2: value2, key3: value3 %} ```

Property	Value
Tag Name	variables
Type	Simple tag
Source	StoreConnect
Use in phase	before (primarily)

Parameters

Parameter	Description
key: value	Pairs of variable name and value, comma-separated. Values can be strings, numbers, booleans, or the result of filters

What’s available in variables

• Request params — values from current_request.params, including any merged in by {% params %} in an earlier phase
• Global variables — current_store, current_customer, current_cart
• Liquid filters — transform values before assigning them
• Expressions — conditionals, arithmetic, string operations

Common tasks with variables

1. Set rendering flags and metadata

```liquid

{% before %} {% assign show_sidebar = current_request.params.sidebar | default: true %} {% variables show_sidebar: show_sidebar, is_mobile: false %} {% params show_sidebar: show_sidebar %} {% endbefore %}

{% if show_sidebar %} {% render ‘sidebar’ %} {% endif %} ```

2. Prepare a title and description

```liquid

{% before %} {% params product_type: current_request.params.type %} {% variables page_title: “Browse Products”, page_description: “Find the perfect item for your needs” %} {% endbefore %} ```

3. Set feature flags or UI state

```liquid

{% before %} {% assign cart_size = current_cart.items.size %} {% variables show_progress: true, step: 1, can_checkout: cart_size > 0, discount_message: “Save 10% with code SAVE10” %} {% params cart_size: cart_size %} {% endbefore %}

{{ page_title }}

{% if show_progress %} Step {{ step }} of 4 {% endif %} {% if discount_message %}

{{ discount_message }}

{% endif %} ```

Key behaviors

• Available in rendering — variables set with {% variables %} are accessible in the page template and all included snippets
• Set before rendering — must be in the before block so they are available when rendering starts
• Comma-separated pairs — use commas to separate multiple key-value pairs on one line
• Values are immutable in template — the page template can read them but not reassign them (create new variables with {% assign %} in the template if needed)
• Available to includes and renders — any snippet or component rendered on the page can access these variables

Relationship to params

• {% params %} — extracts request parameters; values are accessed as params.key
• {% variables %} — sets top-level rendering variables; values are accessed directly as variable_name
• Common pattern — extract params in before, then use variables to prepare data for rendering

Difference from assign

• {% variables %} — sets controller-level variables in before; available everywhere on the page
• {% assign %} — a standard Liquid tag; available only from the point of assignment onward
• Use case — variables for controller-level setup; assign for template-level logic

Related tags

• {% params %} — extract request input before setting variables
• {% before %} — the phase where variables setup typically happens
• {% assign %} — Liquid’s standard variable assignment in templates