Liquid Basics for Merchants — Edit Your Theme Without Breaking It

Liquid looks more intimidating than it actually is. You don't need to become a developer — but knowing enough to read it, make small edits, and not panic when you open a theme file unlocks capabilities that would otherwise cost you money every time you need a tweak.

What is Liquid and why should merchants care?

Liquid is a template language created by Shopify that connects store data (products, cart, customers...) with the HTML that renders in a browser. When you open a .liquid file in your theme, the HTML provides the static structure, and Liquid fills in the dynamic data.

The three core components of Liquid

1. Objects — variables that hold data

Objects hold data from your store. You output them using double curly braces: {{ }}

{{ product.title }}          → product name
{{ product.price | money }}  → formatted price
{{ customer.name }}          → logged-in customer's name
{{ cart.item_count }}        → number of items in cart

2. Tags — logic control

Tags use curly braces with percent signs: {% %}. Used for conditionals, loops, and variable assignment.

{% if product.available %}
  <button>Add to cart</button>
{% else %}
  <p>Out of stock</p>
{% endif %}

{% for product in collection.products %}
  <div>{{ product.title }}</div>
{% endfor %}

3. Filters — data transformers

Filters come after the pipe character | to transform data before displaying it.

{{ product.price | money }}               → $25.00
{{ product.title | upcase }}              → POLO SHIRT
{{ product.description | truncate: 100 }} → Truncated to 100 chars
{{ 'logo.png' | asset_url }}              → Full URL to the asset file

The theme file structure

When you go to Online Store → Themes → Edit code, you'll see 6 folders. The ones you'll work with most:

• sections/ — Every section in Theme Editor has a corresponding .liquid file here
• snippets/ — Small reusable code fragments (e.g. product-card.liquid, icon-chevron.liquid)
• assets/ — Theme CSS and JavaScript. Usually the safest place to make small style tweaks
• layout/theme.liquid — The global template for every page, rarely needs direct editing

Common small edits you'll actually need

Adding static text to a section

Find the relevant section file, locate the right spot in the HTML, and add your text or HTML. For example, adding "Free local delivery" text to the header section — find header.liquid, find the closing </header> tag, and add your markup just before it.

Changing button colors, hiding elements

Most colors are controlled through CSS variables in base.css or theme.css in the assets folder. Find variables like --color-button and change the value. To hide an element, add display: none to the right CSS class.

Practice: "Bestseller" badge based on product tag

A very common real-world example. Goal: show a "Bestseller" badge on a product card if the product has the "bestseller" tag.

Find card-product.liquid in the snippets folder (name may vary by theme), and add this inside the product image section:

{% if product.tags contains 'bestseller' %}
  <div>Bestseller</div>
{% endif %}

Then add the CSS to base.css:

.badge-bestseller {
  position: absolute;
  top: 12px; left: 12px;
  background: #2D6A4F; color: white;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

Debugging with Shopify Theme Inspector

Shopify Theme Inspector is a free Chrome extension that shows you which Liquid file is rendering each part of a page, the render time per file, and what values variables currently hold. Essential when you're not sure which file you should actually be editing.

Resources to go further

• Shopify Dev Docs — shopify.dev/docs/api/liquid (the most complete official reference)
• Liquid Cheat Sheet — shopify.github.io/liquid (quick lookup for filters and tags)
• Shopify Community — community.shopify.com (Q&A and free code snippets)