Unlock your dream Shopify store (it’s easier than you think)
Ever look at another Shopify store and think, “How did they do that?” Standard themes are a solid start, but they can feel a little… standard. If you want your shop to feel unmistakably you, the key is learning a little Shopify Liquid.
What is Shopify Liquid (and why it rocks)?
Liquid is Shopify’s template language. It acts as a bridge between your store’s data (products, prices, customers) and your theme’s HTML. Liquid decides what data appears and where it goes on the page. Learn a few basics and you can stop wishing your theme did something — and make it happen.
Where Liquid lives in your theme
Your theme is a set of files — layout, templates, sections and snippets — mixed with CSS and JavaScript. Liquid appears throughout:
-
Layout (e.g.,
theme.liquid): global frame used on every page. -
Templates (Online Store 2.0 uses JSON templates, e.g.,
templates/product.json,templates/collection.json,templates/page.json). Legacy themes may useproduct.liquid/collection.liquid. - Sections: configurable blocks (hero, product grid) that output dynamic content with Liquid.
- Snippets: small reusable pieces (price display, product card) included inside sections/templates.
How to access your theme code safely
- Shopify admin → Online Store → Themes.
- Next to your theme, open Actions → Duplicate. Work on the copy.
- Open Actions → Edit code to view files.
Image: The safe route to the code editor — always duplicate first.
The ABCs of Liquid: objects, tags and filters
-
Objects — placeholders for data, output with
{{ }}.
Example:{{ product.title }},{{ shop.name }}. -
Tags — logic and control flow, written with
{% %}.
Example:{% if product.available %}…{% endif %},{% for item in collection.products %}…{% endfor %}. -
Filters — format/transform output via the pipe operator
|.
Example:{{ product.price | money }},{{ product.description | strip_html }}.
Copy‑paste examples you can try
Show a badge for products in a “Bestsellers” collection
{% for collection in product.collections %}
{% if collection.handle == 'bestsellers' %}
<span class="bestseller-badge">Our Bestseller!</span>
{% endif %}
{% endfor %}
Low‑stock message when inventory runs low
{% if product.inventory_quantity < 10 and product.inventory_management %}
<p class="low-stock-message">Only {{ product.inventory_quantity }} left in stock!</p>
{% endif %}
Display a custom metafield value
{% if product.metafields.custom.estimated_delivery_time %}
<p>Estimated Delivery: {{ product.metafields.custom.estimated_delivery_time }}</p>
{% endif %}
Image: Metafield‑powered delivery information on the product page.
FAQs
Is Liquid a full programming language?
No. It’s a safe templating language for outputting data and simple logic. Heavy lifting (apps, APIs) lives elsewhere.
Is editing Liquid risky?
It can be — if you edit the live theme. Duplicate first, make small changes, and test on the copy.
Where do I find good docs?
The official Shopify Liquid documentation is the source of truth. Pair it with your theme’s existing examples.
Tips to level up
- Start tiny: one block, one snippet, one condition at a time.
- Learn basic HTML/CSS; Liquid decides what, HTML where, CSS how it looks.
- Use the browser inspector to locate elements and classes before editing.
- Read your theme’s existing Liquid for patterns you can reuse.
Liquid quick cheat sheet
{# Objects #}
{{ product.title }}
{{ shop.name }}
{# Tags (logic/loops) #}
{% if product.available %}In stock{% endif %}
{% for block in section.blocks %}
{{ block.settings.heading }}
{% endfor %}
{# Filters #}
{{ product.price | money }}
{{ product.description | strip_html | truncate: 160 }}
Starter exercises
- Add a “Low stock” message when quantity < 5.
- Show a metafield (e.g., care instructions) on the product page.
- Create an alternate product template (e.g.,
product.special.json) and add a Custom Liquid block. - Include a snippet for a reusable badge and render it in two sections.
- Use a filter to truncate long titles on collection tiles.
Useful links
Glossary
Liquid
Shopify’s templating language used to output dynamic data inside themes.
Object
A data placeholder output with {{ }} (e.g., {{ product.title }}).
Tag
Logic/control instruction written with {% %} (e.g., {% if %}, {% for %}).
Filter
A modifier applied to output with | (e.g., | money, | downcase).
Section
Configurable theme block that renders part of a page and can include snippets.
Snippet
Small reusable code partial included inside sections/templates.
Metafield
Custom field for products, variants and more; accessed in Liquid via namespace.key.