List all layout liquid tags and filters

Table of contents 2 min

This tutorial requires the technical skills, including Liquid. If you have difficulty doing this, please contact us.

This article will write all additional filters and tags you can using in the layout. Beside them, you can still use the all default liquid filters and tags.

Tag: schema

Tag schema helps you to add custom settings to your layout. Please read more from this article.

Filter: img_url

string | img_url: width: , height:

Add width and height to an image from Shopify CDN.

width number The width of the image. This value is in the pixel.
height number The width of the image. This value is in the pixel.

Filter: img_tag

string | img_tag: alt:"", class:""

Convert an image URL to HTML tag.

alt string The alternative text for the image.
class string The class name for the image.

Filter: bar_code

string | bar_code: width: 2, height: 32, format: "auto", show_value: false, class=""

Generate a bar code from a given string.

width number The width of the bar code.
height number The height of the bar code.
format string The format of the bar code. Possible format: auto, CODE128, EAN13, UPC, EAN8, EAN5, EAN2, CODE39, ITF14, MSI, pharmacode, codabar
show_value boolean Allow showing a value under the bar code
classes string Add some additional classes to generated bar code

Filter: qr_code

string | bar_code: width: 200, class=""

Generate a QR code from a given string.

width number The width of the QR code.
classes string Add some additional classes to generated QR code

Filter: customer_money

MoneyBag | customer_money: width: 200, class=""

Format the price as the currency of the customer.

Filter: money

MoneyBag | customer_money: width: 200, class=""

Format the price as the currency of the shop.

Filter: masked_text

string | masked_text: remaining: 2

Add * to a string. For example: Andrew Doan will become to An**** **an.

remaining number The remaining characters are in the first and last parts of the string.

Filter: t

string | t: language:

Translate a key to multiple language.

language string The language code you want to translate.
I hope this tutorial may help you to design your layout. If you have any issues relating to this, please contact us to get help.
Andrew Doan
Andrew Doan Founder at Doran

Hey! I'm Andrew Doan. I'm a founder at Doran. Let me help you.