Liquid

https://shopify.dev/docs/api/liquid
Admin
Liquid is a template language created by Shopify that allows developers to dynamically render...
Tokens:263,389
Snippets:2,434
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Example with action: 'follow'

Source: https://shopify.dev/docs/api/liquid/filters/login_button

Example usage of the login_button filter with the action parameter set to 'follow'.

```liquid
{{ shop | login_button: action: 'follow' }}
```

--------------------------------

### color_scheme object example

Source: https://shopify.dev/docs/api/liquid/objects/color_scheme

Example of a color_scheme object with an id and settings.

```json
{
  "id": "background-2",
  "settings": {}
}
```

--------------------------------

### Output for metafield example

Source: https://shopify.dev/docs/api/liquid/objects/metafield

Shows the rendered output of the metafield example.

```html
Type: single_line_text_field
Value: Take with a meal.
```

--------------------------------

### tablerow with offset: 2 example

Source: https://shopify.dev/docs/api/liquid/tags/tablerow

Example using the offset parameter set to 2. The output starts from the third product (Health potion) and shows the remaining two in a single row.

```liquid
<table>
  {% tablerow product in collection.products offset: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>
```

```json
{
  "collection": {
    "products": [
      {
        "id": 6816899596353,
        "title": "Draught of Immortality"
      },
      {
        "id": 6792632795201,
        "title": "Glacier ice"
      },
      {
        "id": 6786188247105,
        "title": "Health potion"
      },
      {
        "id": 6786989391937,
        "title": "Invisibility potion"
      }
    ]
  }
}
```

```html
<table>
  <tr class="row1">
<td class="col1">
    Health potion
  </td><td class="col2">
    Invisibility potion
  </td></tr>

</table>
```

--------------------------------

### part object example

Source: https://shopify.dev/docs/api/liquid/objects/part

Example of a part object with properties is_link, title, and url.

```json
{
  "is_link": true,
  "title": "2",
  "url": "/collections/all?page=2"
}
```

--------------------------------

### Output of assign example

Source: https://shopify.dev/docs/api/liquid/filters

Output of the assign example, showing the variable's value.

```text
My custom string.
```

--------------------------------

### store_availability object example

Source: https://shopify.dev/docs/api/liquid/objects/store_availability

Example of a store_availability object with properties for available, location, physical_storefront, pick_up_enabled, and pick_up_time.

```json
{
  "available": true,
  "location": {},
  "physical_storefront": false,
  "pick_up_enabled": true,
  "pick_up_time": "Usually ready in 24 hours"
}
```

--------------------------------

### Example rule for robots.txt

Source: https://shopify.dev/docs/api/liquid/objects/rule

Example of a rule for the robots.txt file. A rule consists of a directive (Allow or Disallow) and a value of the associated URL path. This example shows a Disallow directive for the /policies/ path.

```text
Disallow: /policies/
```

--------------------------------

### tablerow with limit: 2 example

Source: https://shopify.dev/docs/api/liquid/tags/tablerow

Example using the limit parameter set to 2. The output shows only the first two products in a single row.

```liquid
<table>
  {% tablerow product in collection.products limit: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>
```

```json
{
  "collection": {
    "products": [
      {
        "id": 6816899596353,
        "title": "Draught of Immortality"
      },
      {
        "id": 6792632795201,
        "title": "Glacier ice"
      },
      {
        "id": 6786188247105,
        "title": "Health potion"
      },
      {
        "id": 6786989391937,
        "title": "Invisibility potion"
      }
    ]
  }
}
```

```html
<table>
  <tr class="row1">
<td class="col1">
    Draught of Immortality
  </td><td class="col2">
    Glacier ice
  </td></tr>

</table>
```

--------------------------------

### blake3 filter example with output

Source: https://shopify.dev/docs/api/liquid/filters/blake3

Example usage of the blake3 filter with an empty string input, and its corresponding output hash.

```liquid
{{ '' | blake3 }}
```

```html
af1349b9f5f9a1a6a0404dea36dcc9499bcb25c9adc112b7cc9a93cae41f3262
```

--------------------------------

### Sample data for highlight_active_tag example

Source: https://shopify.dev/docs/api/liquid/filters/highlight_active_tag

Sample data used with the highlight_active_tag example. It defines a collection with all_tags and a template set to 'collection'.

```json
{
  "collection": {
    "all_tags": [
      "extra-potent",
      "fresh",
      "healing",
      "ingredients"
    ]
  },
  "template": "collection"
}
```

--------------------------------

### size filter example with data and output

Source: https://shopify.dev/docs/api/liquid/filters/size

Example showing the size filter applied to a string and an array, with the input data and resulting output.

```liquid
{{ collection.title | size }}
{{ collection.products | size }}
```

```json
{
  "collection": {
    "products": [],
    "title": "Sale potions"
  }
}
```

```html
12
4
```

--------------------------------

### tablerow with cols: 2 example

Source: https://shopify.dev/docs/api/liquid/tags/tablerow

Example using the cols parameter set to 2. The output shows two rows with two columns each.

```liquid
<table>
  {% tablerow product in collection.products cols: 2 %}
    {{ product.title }}
  {% endtablerow %}
</table>
```

```json
{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}
```

```html
<table>
  <tr class="row1">
<td class="col1">
    Draught of Immortality
  </td><td class="col2">
    Glacier ice
  </td></tr>
<tr class="row2"><td class="col1">
    Health potion
  </td><td class="col2">
    Invisibility potion
  </td></tr>

</table>
```

--------------------------------

### increment tag example and output

Source: https://shopify.dev/docs/api/liquid/tags/increment

Example usage of the increment tag. Each call increments the variable by 1, starting from 0. The output shows the values 0, 1, and 2.

```liquid
{% increment variable %}
{% increment variable %}
{% increment variable %}
```

```html
0
1
2
```

--------------------------------

### Sample data for product.price

Source: https://shopify.dev/docs/api/liquid/filters/money_without_trailing_zeros

Provides sample data used in the example. The price is 1000 (in the store's currency units).

```json
{
  "product": {
    "price": 1000
  }
}
```

--------------------------------

### for loop with offset parameter example

Source: https://shopify.dev/docs/api/liquid/tags/for

Starts iterating from the third item (offset: 2), outputting the last two product titles.

```liquid
{% for product in collection.products offset: 2 -%}
  {{ product.title }}
{%- endfor %}
```

```json
{
  "collection": {
    "products": [
      {
        "id": 6816899596353,
        "title": "Draught of Immortality"
      },
      {
        "id": 6792632795201,
        "title": "Glacier ice"
      },
      {
        "id": 6786188247105,
        "title": "Health potion"
      },
      {
        "id": 6786989391937,
        "title": "Invisibility potion"
      }
    ]
  }
}
```

```html
Health potion
Invisibility potion
```

--------------------------------

### JSON data for product.description

Source: https://shopify.dev/docs/api/liquid/filters/strip_html

Provides the sample data used in the example. The description contains HTML tags and a newline.

```json
{
  "product": {
    "description": "<h3>Are you low on health? Well we've got the potion just for you!</h3>\n<p>Just need a top up? Almost dead? In between? No need to worry because we have a range of sizes and strengths!</p>"
  }
}
```

--------------------------------

### Create unique cycle groups with named groups

Source: https://shopify.dev/docs/api/liquid/tags/cycle

Syntax and example for creating unique cycle groups. Without a group name, multiple cycle tags with the same parameters are treated as the same group, so they may not start at the first string. Specifying a group name (e.g., 'group_1', 'group_2') makes each cycle tag independent, always starting at the first string.

```oobleckTag
{% cycle string: string, string, ... %}
```

```liquid
<!-- Iteration 1 -->
{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 2 -->
{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 3 -->
{% for i in (1..4) -%}
  {% cycle 'group_1': 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 4 -->
{% for i in (1..4) -%}
  {% cycle 'group_2': 'one', 'two', 'three' %}
{%- endfor %}
```

```html
<!-- Iteration 1 -->
one
two
three
one


<!-- Iteration 2 -->
two
three
one
two


<!-- Iteration 3 -->
one
two
three
one


<!-- Iteration 4 -->
one
two
three
one
```

--------------------------------

### Sample data for compact filter example

Source: https://shopify.dev/docs/api/liquid/filters/compact

JSON data representing a collection with products, each having a `compare_at_price` field, some of which are `null`.

```json
{
  "collection": {
    "products": [
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": 100000059
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": 1000
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": 2500
      },
      {
        "compare_at_price": 40000
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      },
      {
        "compare_at_price": null
      }
    ]
  }
}
```

--------------------------------

### Using asset_url filter to get CDN URL

Source: https://shopify.dev/docs/api/liquid/filters/asset_url

The liquid filter asset_url is used to generate the CDN URL for a file in the assets directory. The example shows the input liquid code and the resulting output URL.

```liquid
{{ 'cart.js' | asset_url }}
```

```html
//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/cart.js?v=83971781268232213281663872410
```

--------------------------------

### Example: external_video_tag with YouTube and Vimeo

Source: https://shopify.dev/docs/api/liquid/filters/external_video_tag

Iterates over product media, applies `external_video_url` with different parameters for YouTube and Vimeo, then applies `external_video_tag`. The data shows the expected media structure, and the output is an `<iframe>` for a YouTube video.

```liquid
{% for media in product.media %}
  {% if media.media_type == 'external_video' %}
    {% if media.host == 'youtube' %}
      {{ media | external_video_url: color: 'white' | external_video_tag }}
    {% elsif media.host == 'vimeo' %}
      {{ media | external_video_url: loop: '1', muted: '1' | external_video_tag }}
    {% endif %}
  {% endif %}
{% endfor %}
```

```json
{
  "product": {
    "media": [
      {
        "media_type": "external_video"
      },
      {
        "media_type": "video"
      }
    ]
  }
}
```

```html
<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/vj01PAffOac?color=white&amp;controls=1&amp;enablejsapi=1&amp;modestbranding=1&amp;origin=https%3A%2F%2Fpolinas-potent-potions.myshopify.com&amp;playsinline=1&amp;rel=0" title="Potion beats"></iframe>
```

--------------------------------

### slice filter with positive index

Source: https://shopify.dev/docs/api/liquid/filters/slice

Shows the slice filter with a positive index. The first example returns the first character of the title, the second returns the first five characters, and the third returns two array items starting at index 1, joined with a comma and space.

```liquid
{{ collection.title | slice: 0 }}
{{ collection.title | slice: 0, 5 }}

{{ collection.all_tags | slice: 1, 2 | join: ', ' }}
```

```json
{
  "collection": {
    "all_tags": [
      "Burning",
      "dried",
      "extra-potent",
      "extracts",
      "fresh",
      "healing",
      "ingredients",
      "music",
      "plant",
      "Salty",
      "supplies"
    ],
    "title": "Products"
  }
}
```

```html
P
Produ

dried, extra-potent
```

--------------------------------

### format_address with shop.address

Source: https://shopify.dev/docs/api/liquid/filters/format_address

Example using shop.address with format_address, showing the input data and the generated HTML output.

```liquid
{{ shop.address | format_address }}
```

```json
{
  "shop": {
    "address": {}
  }
}
```

```html
<p>Polina&#39;s Potions, LLC<br>150 Elgin Street<br>8th floor<br>Ottawa ON K2P 1L4<br>Canada</p>
```

--------------------------------

### Expected output for compact filter example

Source: https://shopify.dev/docs/api/liquid/filters/compact

Shows the rendered output of the Liquid example. The original prices list includes empty lines for `nil` values, while the compacted list only shows the non-nil prices.

```html
Original prices:

- 
- 
- 
- 
- 100000059
- 
- 
- 
- 1000
- 
- 2500
- 40000
- 
- 
- 
- 
- 
- 
- 

Original prices - compacted:

- 100000059
- 1000
- 2500
- 40000
```

--------------------------------

### Sample data for metafield_tag examples

Source: https://shopify.dev/docs/api/liquid/filters/metafield_tag

Sample data structure for the metafield_tag examples. The product object contains a metafields object that would hold the metafield values used in the Liquid examples.

```json
{
  "product": {
    "metafields": {}
  }
}
```

--------------------------------

### quantity_rule object example

Source: https://shopify.dev/docs/api/liquid/objects/quantity_rule

Example of a quantity_rule object with min, max, and increment properties.

```json
{
  "min": 5,
  "max": 100,
  "increment": 5
}
```

--------------------------------

### Basic for loop example with data and output

Source: https://shopify.dev/docs/api/liquid/tags/for

Iterates over `collection.products` and outputs each product title. The data shows an array of products, and the output lists the titles.

```liquid
{% for product in collection.products -%}
  {{ product.title }}
{%- endfor %}
```

```json
{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      },
      {
        "title": "Health potion"
      },
      {
        "title": "Invisibility potion"
      }
    ]
  }
}
```

```html
Draught of Immortality
Glacier ice
Health potion
Invisibility potion
```

--------------------------------

### Liquid if/else example with data and output

Source: https://shopify.dev/docs/api/liquid/tags/conditional-else

Complete example of using `else` with an `if` tag. The provided data sets `product.available` to `true`, so the output is the first branch. If `available` were `false`, the `else` branch would render.

```liquid
{% if product.available %}
  This product is available!
{% else %}
  This product is sold out!
{% endif %}
```

```json
{
  "product": {
    "available": true
  }
}
```

```html
This product is available!
```

--------------------------------

### Sample product media data

Source: https://shopify.dev/docs/api/liquid/filters/external_video_url

Sample data structure for the example. It shows a product with media array containing an external_video and a video entry.

```json
{
  "product": {
    "media": [
      {
        "media_type": "external_video"
      },
      {
        "media_type": "video"
      }
    ]
  }
}
```

--------------------------------

### Output of color_difference example

Source: https://shopify.dev/docs/api/liquid/filters/color_difference

The output of the color_difference filter example. It returns the numeric color difference value.

```html
539
```

--------------------------------

### Liquid example using compact filter

Source: https://shopify.dev/docs/api/liquid/filters/compact

Demonstrates using `compact` to remove `nil` values from an array of product prices. The example assigns `original_prices` from `collection.products` and then creates `compacted_original_prices` using `compact`.

```liquid
{%- assign original_prices = collection.products | map: 'compare_at_price' -%}

Original prices:

{% for price in original_prices -%}
  - {{ price }}
{%- endfor %}

{%- assign compacted_original_prices = original_prices | compact -%}

Original prices - compacted:

{% for price in compacted_original_prices -%}
  - {{ price }}
{%- endfor %}
```

--------------------------------

### Example request object JSON

Source: https://shopify.dev/docs/api/liquid/objects/request

Example JSON representation of the request object, showing all its properties with sample values.

```json
{
  "design_mode": false,
  "host": "polinas-potent-potions.myshopify.com",
  "locale": {},
  "origin": "https://polinas-potent-potions.myshopify.com",
  "page_type": "index",
  "path": "/",
  "visual_preview_mode": false
}
```

--------------------------------

### Using the size parameter

Source: https://shopify.dev/docs/api/liquid/filters/product_img_url

Example of using product_img_url with a size parameter ('large') on the first image in the product's images array. The output shows the large size CDN URL.

```liquid
{{ product.images[0] | product_img_url: 'large' }}
```

```json
{
  "product": {
    "images": [
      "files/science-beakers-blue-light-new.jpg",
      "products/science-beakers-blue-light.jpg",
      "files/science-beakers-blue-light_9c5badcd-ea54-4ddc-916c-a45c6c67c704.jpg",
      "files/science-beakers-blue-light_40984233-47bf-4b8b-844c-88020e3da712.jpg"
    ]
  }
}
```

```html
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_large.jpg?v=1683744744
```

--------------------------------

### Example forloop object

Source: https://shopify.dev/docs/api/liquid/objects/forloop

Example JSON representation of a forloop object, showing the values of its properties for a hypothetical iteration.

```json
{
  "first": true,
  "index": 1,
  "index0": 0,
  "last": false,
  "length": 4,
  "rindex": 3
}
```

--------------------------------

### Example: collection.url | sort_by: 'best-selling' with data and output

Source: https://shopify.dev/docs/api/liquid/filters/sort_by

Example of applying `sort_by` to `collection.url` with the value `'best-selling'`. It shows the input template, the sample data object, and the resulting URL with the `sort_by` query parameter appended.

```liquid
{{ collection.url | sort_by: 'best-selling' }}
```

```json
{
  "collection": {
    "url": "/collections/sale-potions"
  }
}
```

```html
/collections/sale-potions?sort_by=best-selling
```

--------------------------------

### md5 filter example and output

Source: https://shopify.dev/docs/api/liquid/filters/md5

Example of applying the `md5` filter to an empty string, producing the MD5 hash `d41d8cd98f00b204e9800998ecf8427e`.

```liquid
{{ '' | md5 }}
```

```html
d41d8cd98f00b204e9800998ecf8427e
```

--------------------------------

### Display discount applications with Liquid loop

Source: https://shopify.dev/docs/api/liquid/objects/cart

This example shows how to display all discount applications on the cart. The Liquid code iterates over `cart.discount_applications` and outputs the discount title and savings. The JSON data and HTML output illustrate the expected input and result.

```liquid
{% for discount_application in cart.discount_applications %}
  Discount name: {{ discount_application.title }}
  Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}
```

```json
{
  "cart": {
    "discount_applications": [
      {
        "title": "Bloodroot discount!",
        "total_allocated_amount": 250
      },
      {
        "title": "Ingredient Sale",
        "total_allocated_amount": 4224
      }
    ]
  }
}
```

```html
Discount name: Bloodroot discount!
  Savings: -$2.50

  Discount name: Ingredient Sale
  Savings: -$42.24
```

--------------------------------

### Output for JSON metafield example

Source: https://shopify.dev/docs/api/liquid/objects/metafield

Expected output when rendering the JSON metafield example. Shows the temperature, unit, and iterated properties.

```html
Temperature: 700
Unit: degrees

Temperature: 700
Unit: degrees
Scale: Fahrenheit
```

--------------------------------

### format_address with customer.default_address

Source: https://shopify.dev/docs/api/liquid/filters/format_address

Example using customer.default_address with format_address, showing the input data and the generated HTML output.

```liquid
{{ customer.default_address | format_address }}
```

```json
{
  "customer": {
    "default_address": {}
  }
}
```

```html
<p>Cornelius Potionmaker<br>12 Phoenix Feather Alley<br>1<br>Calgary AB T1X 0L4<br>Canada</p>
```

--------------------------------

### Output of highlight_active_tag example

Source: https://shopify.dev/docs/api/liquid/filters/highlight_active_tag

Expected output of the highlight_active_tag example. The active tag 'extra-potent' is wrapped in a span with class 'active', while other tags are not.

```html
<a href="/services/liquid_rendering/extra-potent" title="Show products matching tag extra-potent"><span class="active">extra-potent</span></a>

<a href="/services/liquid_rendering/fresh" title="Show products matching tag fresh">fresh</a>

<a href="/services/liquid_rendering/healing" title="Show products matching tag healing">healing</a>

<a href="/services/liquid_rendering/ingredients" title="Show products matching tag ingredients">ingredients</a>
```

--------------------------------

### Basic default_pagination example

Source: https://shopify.dev/docs/api/liquid/filters/default_pagination

Basic usage of default_pagination with default previous and next link text. The output shows the pagination links with 'Next »'.

```liquid
{% paginate collection.products by 2 %}
  {% for product in collection.products %}
    {{- product.title }}
  {% endfor %}

  {{- paginate | default_pagination -}}
{% endpaginate %}
```

```json
{
  "collection": {
    "products": [
      {
        "title": "Draught of Immortality"
      },
      {
        "title": "Glacier ice"
      }
    ],
    "products_count": 4
  }
}
```

```html
Draught of Immortality
  
Glacier ice
  
<span class="page current">1</span> <span class="page"><a href="/services/liquid_rendering/resource?page=2" title="">2</a></span> <span class="next"><a href="/services/liquid_rendering/resource?page=2" title="">Next &raquo;</a></span>
```

--------------------------------

### color_brightness filter example and output

Source: https://shopify.dev/docs/api/liquid/filters/color_brightness

Example usage of the color_brightness filter on the color '#EA5AB9', which outputs the perceived brightness value 143.89.

```liquid
{{ '#EA5AB9' | color_brightness }}
```

```html
143.89
```

--------------------------------

### Action parameter: shop | login_button: action: string

Source: https://shopify.dev/docs/api/liquid/filters/login_button

Controls the behavior of the button after authentication. Accepts 'default' for authentication only or 'follow' to follow the shop in the Shop app (requires additional configuration).

```oobleck
shop | login_button: action: string
```

--------------------------------

### base64_encode filter example

Source: https://shopify.dev/docs/api/liquid/filters/base64_encode

Example of using the base64_encode filter on the string 'one two three'. The output is the Base64-encoded string 'b25lIHR3byB0aHJlZQ=='.

```liquid
{{ 'one two three' | base64_encode }}
```

```html
b25lIHR3byB0aHJlZQ==
```

--------------------------------

### Liquid example with and without strip_html

Source: https://shopify.dev/docs/api/liquid/filters/strip_html

Shows the product.description variable rendered with and without the strip_html filter. The first line outputs the raw HTML, the second strips all HTML tags.

```liquid
<!-- With HTML -->
{{ product.description }}

<!-- HTML stripped -->
{{ product.description | strip_html }}
```
Tokens:
Raw