Liquid reference

Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of EasyStore themes and is used to load dynamic content on storefronts.

Liquid uses a combination of tags, objects, and filters to load dynamic content. They are used inside Liquid template files, which are a group of files that make up a theme.

Tags

Liquid tags are the programming logic that tells templates what to do. Tags are wrapped in: {% %} characters.

{% if user.name == 'elvis' %}
     Hey  {{ user.name }}
{% endif %}

<!-- Output: "Hey elvis" -->

Objects

Liquid objects contain attributes to output dynamic content on the page. For example, the product object contains an attribute called title that can be used to output the title of a product.

Liquid objects are also often referred to as Liquid variables.

To output an object's attribute, wrap the object's name in {{ and }}, as shown below:

{{ product.title }} <!-- Output: "T shirt" -->

Filters

Filters are simple methods that modify the output of numbers, strings, variables and objects. They are placed within an output tag {{ }} and are denoted by a pipe character |.

{{ 'sales' | append: '.jpg' }} <!-- Output: sales.jpg -->
icon-accounticon-add-newicon-add-storeicon-appicon-appleicon-archiveicon-arrowdownicon-ascicon-bookicon-cancelicon-cart-addonicon-checkouticon-cherryicon-collectionicon-comfirmicon-confirmicon-couponicon-creditsicon-currencyicon-dashboardicon-discounticon-disintegrateicon-domainicon-dscicon-duplicateicon-editicon-emailicon-exclamation-triangleicon-exporticon-eyeicon-eye-slashicon-fullscreenicon-fullscreen-closeicon-generalicon-gifticon-gridicon-hddicon-helpicon-importicon-infoicon-integrationicon-invoiceicon-likeicon-listicon-locationicon-logouticon-new-tabicon-not-secureicon-optionicon-ordericon-outline-arrowdownicon-pageicon-paymenticon-plusicon-posicon-pricingicon-printericon-producticon-product-sumicon-product-sum-xicon-redirecticon-reporticon-reseticon-searchicon-secureicon-settingicon-shippingicon-staricon-storeicon-switch-storeicon-tagicon-taxesicon-templateicon-themeicon-tickicon-trashicon-unarchiveicon-uploadicon-user-tagicon-usersicon-weighticon-wholesale