Glossary

liquid-shopify

What is Liquid Shopify? Definition

Shopify Liquid: template language definition, object and filter syntax, vs JavaScript HTML, OS 2.0 sections, and useful merchant tips.

Updated on

June 4, 2026

Shopify Liquid is the template language used by Shopify to turn store data into customer-facing web pages. It automatically displays a product's title, price, stock, images, collections, or conditional blocks within a theme. Liquid bridges the gap between the Shopify back-office and the final HTML sent to the browser. As a merchant, it is not always necessary to master it, but understanding it helps you communicate better with an agency or developer.

Summary

Shopify Liquid Definition

Why Liquid is essential in a Shopify store

Theme structure and the role of Liquid

Edit Liquid on Shopify without weakening the theme

Points of attention when working with Liquid

In summary

Associated terms, FAQ, and useful resources

Shopify Liquid Definition

Liquid mixes static HTML and dynamic tags that inject values from Shopify (product price, collection title, canonical URL).

Three basic syntaxes:

In practice, this mainly covers Output: {{ product.title }} displays the product title; Logic tags: {% if product.available %}In stock{% endif %}; and Filters: {{ product.price | money }} formats the price in local currency.

Common Liquid objects in e-commerce:

In practice, this mainly covers product: title, price, variants, images, description; collection: products in a section (Shopify collection); cart: cart lines, total; shop: shop name, domain, currency; customer: logged-in customer (account); and request: current page, locale.

Useful Liquid tags:

In practice, this mainly covers {% for %}: loop over products, variants, menu links; {% assign %}: temporary variable; {% render %}: include a reusable snippet; and {% section %}: OS 2.0 section (legacy).

Useful distinctions:

In practice, this mainly covers Liquid vs JavaScript: Liquid = Shopify server; JS = client browser; Liquid vs HTML: Liquid generates the final HTML; Liquid vs PHP (WooCommerce): other CMS use other template languages; Liquid theme vs Shopify API: Liquid accesses objects on the current page; the REST/GraphQL API for apps and external integrations; and Liquid storefront vs Liquid notifications: order emails also use Liquid (order, line_items variables).

Liquid is therefore not just a technical detail: it is the layer that allows a Shopify theme to remain dynamic. The same structure can display different information depending on the product, collection, availability or navigation context.

Why Liquid is essential in a Shopify store

Every Shopify Online Store is powered by Liquid: even without coding, the Theme Editor modifies sections written in Liquid under the hood.

In practice, this mainly covers Real-time catalog data: prices, stock, promos displayed without a static base; Theme customization: product layout, badges, conditional blocks; Technical SEO: {{ canonical_url }} , dynamic titles (canonical links, meta tags); Internationalization: translation filters, Markets, currencies; Transactional emails: custom Liquid order confirmations; Schema.org: product JSON-LD injected via Liquid snippets (structured data); and Apps and themes: apps sometimes expose Liquid objects or blocks within sections.

Merchants can sell without mastering Liquid (the Theme Editor is enough). Liquid becomes essential for custom developments with an agency or a theme developer.

From an e-commerce glossary perspective, the challenge is therefore to understand the concept, but also its concrete effects on conversion, internal organization, margins, or the quality of the customer experience.

Theme structure and the role of Liquid

Typical Shopify 2.0 theme directory structure:

In practice, this mainly covers layout/theme.liquid: global HTML skeleton (head, body, scripts); templates/*.json: section composition by page type (product, collection, index); sections/*.liquid: modular blocks (hero, featured collection); snippets/*.liquid: reusable components (cart icon, price); assets/: CSS, JS, static images; and config/settings_schema.json: Theme Editor settings.

Product price snippet example:

{% if product.compare_at_price > product.price %}
  <span class="price-sale">{{ product.price | money }}</span>
  <span class="price-compare">{{ product.compare_at_price | money }}</span>
{% else %}
  <span class="price">{{ product.price | money }}</span>
{

{% if product.compare_at_price > product.price %}
  <span class="price-sale">{{ product.price | money }}</span>
  <span class="price-compare">{{ product.compare_at_price | money }}</span>
{% else %}
  <span class="price">{{ product.price | money }}</span>
{

{% if product.compare_at_price > product.price %}
  <span class="price-sale">{{ product.price | money }}</span>
  <span class="price-compare">{{ product.compare_at_price | money }}</span>
{% else %}
  <span class="price">{{ product.price | money }}</span>
{

Use case: A DTC brand wants to display "Free shipping from €60" only if the cart > €60. The developer adds a condition {% if cart.total_price > 6000 %} (price in cents) to snippets/free-shipping-bar.liquid. The snippet is included via {% render 'free-shipping-bar' %} in theme.liquid. Theme Editor allows the merchant to enable/disable the section without touching the code. The duplicated theme is previewed before going live.

This type of case shows that a technical or marketing concept only has value if it is linked to a specific use: a better journey, a more reliable decision, a better-controlled cost, or a clearer experience for the buyer.

Edit Liquid on Shopify without weakening the theme

Two levels of Liquid access (Shopify Help Center):

In practice, this mainly covers Theme Editor (without code): reorganizing sections, texts, images; underlying Liquid not visible; and Edit code: Online Store > Themes > Actions > Edit code; access to .liquid files.

Useful workflow tips:

First, duplicate the live theme before any Liquid modification. Next, work on a preview theme, test product/collection/cart. Then, use {% render %} for snippets rather than copy-pasting. After that, document custom changes (parent theme updates can overwrite). Finally, publish after mobile and SEO validation (View Source).

Official resources:

In practice, this mainly covers Shopify.dev Liquid reference: objects, tags, filters; Theme Check: Liquid linter (useful tips, errors); and GitHub Dawn theme: OS 2.0 open source reference theme.

Liquid limitations: no arbitrary database access, no external HTTP calls from Liquid storefront (security). Complex logic or external data go through JavaScript + Ajax API or apps.

On Shopify, the logic generally consists of starting from native features, then completing with a theme, an app, or an integration only when the business need justifies it.

Points of attention when working with Liquid

In practice, this mainly covers reusable Snippets: price, badges, cart icon in a single file; Clear conditions: if product.available before buy button; money / image_url filters: native formatting rather than hardcoding €; Escaping user content: escape filter if HTML injection is risky; Performance: avoid huge for loops on all_products; Metafields: product.metafields.custom.xxx for custom data; and Liquid Comments: {% comment %} ... {% endcomment %} for maintainability.

Points of vigilance:

In practice, this mainly covers modifying theme.liquid live without a backup (storefront outage); Confusing Liquid and JavaScript ({{ }} syntax in .js file); Forgetting that Liquid prices are in cents (6000 = 60.00 €); Hardcoding texts instead of Theme Editor settings (difficult i18n); Duplicating 500 lines instead of a render snippet; Updating the parent Dawn theme without merging custom Liquid; and Heavy business logic in Liquid: prefer app or Functions.

The best practice is to document the rules, test transitions on a limited scope, and verify their actual impact before rolling them out to the entire store.

In summary

In practice, this mainly covers Liquid = Shopify template language (output, tags, filters); Objects: product, collection, cart, shop, customer; Files: layout, JSON templates, sections, snippets; Distinct from JavaScript (client), HTML (result), API (apps); and Theme Editor for merchants; Edit code for devs; duplicate theme before modification.

The essential part is to link this concept to a concrete use case: sell better, measure better, organize the shop better, or reduce friction in the customer journey.

Associated terms, FAQ, and useful resources

Associated terms

Shopify Theme: container for Liquid files.
JavaScript: additional client-side interactivity.
HTML: output generated by Liquid.
Shopify API: integrations beyond the template.
Canonical URL: example canonical_url variable.

FAQ

Is it necessary to learn Liquid to sell on Shopify?

No for daily use: the Theme Editor is sufficient for most stores. Liquid becomes useful for theme customisations, fixing a display issue, or working with a developer.

Liquid and JavaScript: which one to modify for the AJAX cart?

The initial HTML of the cart comes from Liquid. The reload-free behavior (Ajax Cart) is handled in JavaScript, which calls /cart/add.js. The two work together.

Where to edit Liquid on Shopify?

Go to Online Store > Themes > Actions > Edit code. Modify sections, snippets, or layout. Always duplicate the live theme before making changes.

Is Liquid exclusive to Shopify?

Created by Shopify, Liquid is open source and used elsewhere (Jekyll, certain CMS). In e-commerce, it is mainly associated with Shopify themes and Shopify email notifications.