Shopify Liquid Basics for Store Owners

Who it is for

Store owners curious about theme code

Time needed

An afternoon to learn the basics

What you need

A duplicate theme to practice on

Open any product page template in a Shopify theme and you'll find lines like {{ product.title }} and {% if product.available %}. That's Liquid. You don't need to become a developer to read it, and being able to read it changes how you work with your theme: you can make small changes safely, brief a developer precisely, and spot when an app has dropped code into a file it shouldn't have.

This guide covers the Liquid basics a store owner needs, with code examples you can actually use. Everything here was checked against Shopify's Liquid reference on shopify.dev on 7 November 2026.

What Shopify Liquid is and where it lives

Liquid is a template language. A template holds fixed content, like HTML, plus placeholders that Shopify fills with your store's data when someone visits. Shopify created Liquid and published it as an open source project, and other software uses it too. The version in Shopify themes adds store objects such as product, cart and collection.

Liquid runs on Shopify's servers before the page reaches the browser. Shoppers never see it. That's also why you can't read another store's Liquid: the source code viewer shows only the HTML it produced.

In a theme, Liquid lives in these folders:

• layout/theme.liquid wraps every page. It's the only file a theme strictly needs.
• sections/*.liquid are the sections you add in the theme editor, each with its settings in a {% schema %} tag.
• blocks/*.liquid are reusable theme blocks in newer themes.
• snippets/*.liquid are reusable pieces of code that sections include. Store owners can't see them in the editor.
• templates/*.json list which sections appear on each page type. In Online Store 2.0 themes these are JSON, not Liquid, and contain no code.

The three parts of Liquid

Filters run left to right, so you can chain them. Shopify's own example turns "Health potion" into "POTION":

{{ product.title | upcase | remove: 'HEALTH' }}

Adding a hyphen inside a delimiter, as in {%- or -%}, strips the whitespace on that side. It keeps the HTML output tidy and doesn't change what shows on the page.

Objects: your store's data

Objects hold data, and you reach their properties with a dot. The ones you'll meet most often:

• product on product pages: product.title, product.vendor, product.price, product.compare_at_price, product.available, product.tags, product.variants and product.featured_image.
• collection on collection pages, including collection.products.
• cart everywhere: cart.item_count, cart.total_price and cart.items.
• settings, the values from Theme settings, and section and block, the settings of the current section or block.
• Metafields, your custom fields: product.metafields.custom.care_guide, where custom is the namespace and care_guide the key.

Shopify identifies most things by a handle, a lowercase, hyphenated version of the title. "Health potion" becomes health-potion. If you rename the product later, the handle stays the same, which is why code that refers to a handle keeps working after a title change.

Tags: logic and loops

Tags make decisions and repeat things. They don't print anything themselves.

{% if product.available %}
  Price: {{ product.price | money }}
{% else %}
  Sorry, this product is sold out.
{% endif %}

• if, elsif, else, unless for conditions.
• for loops over a list, with options like limit: 4.
• assign creates a variable: {% assign threshold = 5000 %}.
• render includes a snippet: {% render 'price-badge', product: product %}. A rendered snippet can't see variables from outside unless you pass them in like this.
• section and sections output a single section or a section group, such as {% sections 'header-group' %} in the layout file.

Comparisons use ==, !=, >, <, >= and <=, combined with and and or, plus contains for text and lists. Two rules catch people out: parentheses aren't allowed in tags, and conditions are evaluated right to left. Split complicated logic into nested if tags instead.

Filters you'll use every week

• money formats a price using your store's currency format. {{ product.price | money }} turns 1000 into $10.00.
• image_url builds a resized image URL: {{ product | image_url: width: 800 }}. Widths go up to 5,760 px.
• image_tag turns that URL into a full <img> tag with width, height and a responsive srcset, and lazy loads images lower down the page.
• metafield_tag outputs a metafield in HTML suited to its type.
• handle, upcase, downcase, split and remove for text.

True, false, empty and blank

This is where most beginner bugs come from. In Liquid, only nil and false count as false. Everything else is true, including an empty string and the number 0.

So {% if product.metafields.custom.subtitle %} can print an empty wrapper when the field exists but holds no text. Check text with blank instead:

{%- if section.settings.heading != blank -%}
  <h2>{{ section.settings.heading }}</h2>
{%- endif -%}

Use empty to check whether an object exists before using it, as in {% unless pages.about-us == empty %}.

Shopify Liquid code examples for store owners

These are short, safe snippets I add to stores all the time. Paste them into a Custom Liquid block or section first, so you can test them in the theme editor without editing a theme file.

Sale badge when there's a compare-at price:

{%- if product.compare_at_price > product.price -%}
  <span class="sale-badge">Sale</span>
{%- endif -%}

A message only for products with a certain tag:

{%- if product.tags contains 'made-to-order' -%}
  <p>Made to order. Ships in 2 to 3 weeks.</p>
{%- endif -%}

Free shipping progress in the cart (5000 means $50.00, because cart totals are in the currency's subunit):

{%- assign threshold = 5000 -%}
{%- if cart.total_price >= threshold -%}
  <p>Your order ships free.</p>
{%- else -%}
  {%- assign remaining = threshold | minus: cart.total_price -%}
  <p>Spend {{ remaining | money }} more for free shipping.</p>
{%- endif -%}

Cart totals are in the shopper's local currency. If you sell in several currencies, a fixed threshold like this won't match, so ask a developer to handle each market.

A care guide stored in a metafield, shown only when filled:

{%- assign care = product.metafields.custom.care_guide -%}
{%- if care != blank -%}
  <div class="care-guide">{{ care | metafield_tag }}</div>
{%- endif -%}

Where to write Liquid safely

1. Duplicate your theme. In Online Store > Themes, use the actions menu and Duplicate. Never experiment on the live theme.
2. Try it in a Custom Liquid block. In the theme editor, add the block where you want the output and paste your code, then check the result in the preview.
3. Move it into the theme when it works. From the actions menu choose Edit code, create a snippet with New file... in the snippets folder, and render it where it belongs.
4. Use the file history if it breaks. Each file has a Timeline view. Right-click an earlier version and choose Restore contents.

Developers work locally with Shopify CLI instead: shopify theme dev previews a local theme against your store with hot reload, shopify theme check runs Theme Check for errors and best practices, and shopify theme console opens a Liquid console for testing expressions.

Common Liquid mistakes

• Printing raw prices. {{ product.price }} shows 1000, not $10.00. Always add | money.
• Checking text with if alone. Empty strings are true. Use != blank.
• Using parentheses in conditions. They aren't valid in Liquid. Nest your if tags.
• Expecting snippets to see your variables. With render, pass every variable the snippet needs.
• Hard-coding text into templates. If a store owner will want to change it, it belongs in a section setting, not in code.
• Editing app code inside theme files. Apps on Online Store 2.0 themes should use app blocks and embeds. Leftover app code in theme.liquid is a common cause of slow pages.

How to keep learning Liquid

If you're looking for a Shopify Liquid course, start with Shopify's own Liquid reference on shopify.dev. It's free, current and lists every object, tag and filter with examples. Then read the code of a free Shopify theme like Dawn, which is public on GitHub. Pick one section, such as the rich text section, and trace how each setting in its schema appears in the HTML. That teaches more than any cheat sheet.

Checklist before you change Liquid on a live store

• Work on a duplicate theme.
• Test new code in a Custom Liquid block first.
• Format every price with money and every image with image_url and image_tag.
• Check text and metafields with blank before printing wrappers.
• Put store-owner text in section settings, not in the code.
• Preview on mobile and desktop, and in each currency you sell in.
• Note what you changed and in which file.

Next steps

The natural next step after the basics is building a section of your own. My guide to building custom sections in Shopify shows the full structure, settings and schema, and the metafields guide covers custom product data. If you'd rather hand it over, theme changes are part of my Shopify development service, which starts from $300 with a fixed quote.

Frequently asked questions

Sources

1. Liquid reference, Shopify.dev
2. Liquid basics, Shopify.dev
3. render tag, Shopify.dev
4. cart object, Shopify.dev
5. Theme architecture, Shopify.dev
6. Shopify CLI theme commands, Shopify.dev

Related services and work

Written by Ashraf Siddik

I'm a Shopify developer and CRO specialist. I have built and improved Shopify stores since 2018, completed more than 1,000 projects, and hold a 4.96 average rating across 719 client reviews.

About me · Client reviews