Shopify Liquid Tutorial for Beginners (2026)

81% of Shopify merchants want to customize their store but lack technical skills. Liquid is Shopify's templating language -- it powers every page of your store. Understanding even the basics unlocks customizations that otherwise cost $50-150/hour with a developer.

You do not need to become a developer. You need to understand enough Liquid to make small changes, troubleshoot issues, and communicate effectively with developers or AI tools when you need help.

This tutorial covers everything a beginner needs to know.

What Is Liquid?

Liquid is a templating language created by Shopify. It is the code that turns your store data (products, collections, prices, customer info) into the HTML that shoppers see in their browser.

Every Shopify theme uses Liquid. When you see a product price displayed on a product page, Liquid is pulling that price from the database and inserting it into the page.

Liquid sits between your data and your HTML:

Store Data (products, prices, images)
        ↓
    Liquid Template
        ↓
HTML Page (what shoppers see)

Liquid is intentionally simple. Shopify designed it to be safe (you cannot break your database) and readable (non-developers can understand most of it).

The Three Building Blocks

Everything in Liquid comes down to three things: objects, tags, and filters.

1. Objects (Output Data)

Objects display data on the page. They use double curly braces: {{ }}.

{{ product.title }}
{{ product.price | money }}
{{ shop.name }}

What this does:

• {{ product.title }} -- Outputs the product name (e.g., "Classic Cotton T-Shirt")
• {{ product.price | money }} -- Outputs the price formatted as currency (e.g., "$29.99")
• {{ shop.name }} -- Outputs your store name (e.g., "My Awesome Store")

Common objects you will use:

• product -- The current product (title, price, description, images, variants)
• collection -- A collection of products
• cart -- The shopping cart (items, total, item count)
• shop -- Your store (name, URL, currency)
• customer -- The logged-in customer (name, email, orders)

2. Tags (Logic)

Tags control what gets displayed and when. They use curly braces with percent signs: {% %}.

If/else statements:

{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <button disabled>Sold Out</button>
{% endif %}

This shows an "Add to Cart" button only if the product is in stock. If it is sold out, it shows a disabled "Sold Out" button instead.

For loops:

{% for product in collection.products %}
  <div class="product-card">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

This loops through every product in a collection and creates a product card for each one.

Common tags:

• {% if %} / {% elsif %} / {% else %} / {% endif %} -- Conditional logic
• {% for %} / {% endfor %} -- Loop through items
• {% assign %} -- Create a variable
• {% comment %} / {% endcomment %} -- Add comments (ignored by the browser)
• {% render 'snippet-name' %} -- Include a code snippet

3. Filters (Transform Data)

Filters modify how objects are displayed. They use the pipe character: |.

{{ product.title | upcase }}
{{ product.price | money }}
{{ product.description | truncate: 100 }}
{{ 'now' | date: '%B %d, %Y' }}

What this does:

• upcase -- Converts text to uppercase ("CLASSIC COTTON T-SHIRT")
• money -- Formats a number as currency ("$29.99")
• truncate: 100 -- Cuts text to 100 characters with "..." at the end
• date: '%B %d, %Y' -- Formats a date ("January 15, 2026")

Useful filters:

• | money -- Format as currency
• | img_url: '400x' -- Generate image URL at specific size
• | upcase / | downcase -- Change text case
• | truncate: N -- Limit text length
• | replace: 'old', 'new' -- Replace text
• | split: ',' -- Split text into an array
• | default: 'fallback' -- Show fallback if value is empty

Practical Examples

Example 1: Show Sale Price with Original Price

{% if product.compare_at_price > product.price %}
  <span class="sale-price">{{ product.price | money }}</span>
  <span class="original-price" style="text-decoration: line-through;">
    {{ product.compare_at_price | money }}
  </span>
  <span class="discount-badge">
    Save {{ product.compare_at_price | minus: product.price | money }}
  </span>
{% else %}
  <span class="regular-price">{{ product.price | money }}</span>
{% endif %}

What this does: If the product has a compare-at price (meaning it is on sale), it shows the sale price, the original price with a strikethrough, and the savings amount. Otherwise it shows the regular price.

Example 2: Display Product Inventory Status

{% if product.available %}
  {% if product.variants.first.inventory_quantity <= 5 %}
    <p class="low-stock" style="color: red;">
      Only {{ product.variants.first.inventory_quantity }} left in stock!
    </p>
  {% else %}
    <p class="in-stock" style="color: green;">In Stock</p>
  {% endif %}
{% else %}
  <p class="sold-out" style="color: gray;">Sold Out</p>
{% endif %}

What this does: Shows a "low stock" warning in red when inventory drops below 5 units. Shows "In Stock" in green when inventory is healthy. Shows "Sold Out" in gray when unavailable.

Example 3: Conditional Free Shipping Message

{% assign threshold = 5000 %}
{% assign remaining = threshold | minus: cart.total_price %}

{% if cart.total_price >= threshold %}
  <p style="color: green;">You qualify for free shipping!</p>
{% else %}
  <p>Spend {{ remaining | money }} more for free shipping</p>
{% endif %}

What this does: Checks if the cart total meets the free shipping threshold ($50.00 -- Shopify stores prices in cents, so 5000 = $50). If yes, shows a congratulations message. If not, shows how much more the customer needs to spend.

Example 4: Display Related Products from the Same Collection

{% assign current_product = product %}
{% assign collection = product.collections.first %}

{% if collection %}
  <h2>You Might Also Like</h2>
  <div class="related-products">
    {% for related in collection.products limit: 4 %}
      {% if related.id != current_product.id %}
        <div class="related-product">
          <img src="{{ related.featured_image | img_url: '300x' }}" alt="{{ related.title }}">
          <h3>{{ related.title }}</h3>
          <p>{{ related.price | money }}</p>
        </div>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

What this does: Grabs the first collection the product belongs to, loops through up to 4 products from that collection (excluding the current product), and displays them as a "You Might Also Like" section.

Where Liquid Lives in Your Theme

Your Shopify theme is a collection of Liquid template files. Here is where to find them:

theme/
├── layout/
│   └── theme.liquid          # Master template (wraps every page)
├── templates/
│   ├── index.json            # Homepage
│   ├── product.json          # Product pages
│   ├── collection.json       # Collection pages
│   └── cart.json             # Cart page
├── sections/
│   ├── header.liquid         # Store header
│   ├── footer.liquid         # Store footer
│   └── product-info.liquid   # Product page sections
├── snippets/
│   ├── product-card.liquid   # Reusable product card
│   └── price.liquid          # Reusable price display
└── assets/
    ├── theme.css             # Styles
    └── theme.js              # JavaScript

Key files:

• layout/theme.liquid -- The master wrapper. Everything loads inside this file.
• sections/ -- Individual page sections. This is where most customization happens.
• snippets/ -- Reusable code chunks. Called with {% render 'snippet-name' %}.
• templates/ -- Page type templates (JSON in modern themes like Dawn).

How to Edit Liquid in Your Theme

Option 1: Shopify Theme Editor

1. Go to Online Store > Themes
2. Click "Edit code" on your current theme
3. Navigate to the file you want to edit
4. Make changes
5. Click Save

Best for: Small edits, adding code snippets, modifying existing sections.

Option 2: Shopify CLI (For Developers)

shopify theme dev --store=your-store.myshopify.com

This creates a local development environment where you can edit files and see changes in real-time.

Best for: Large projects, building new sections, theme development.

Option 3: AI-Powered Editing

Instead of editing Liquid manually, describe what you want:

With EcomCoder:

"Add a 'Frequently Bought Together' section on product pages showing 3 related products with Add to Cart buttons"

The AI generates the Liquid code, tests it, and adds it to your theme. You do not need to know which file to edit or what the syntax should be.

Best for: Non-developers who want custom features without learning Liquid syntax.

Common Beginner Mistakes

Mistake 1: Forgetting to Close Tags

{% if product.available %}
  <p>In Stock</p>

<!-- Missing {% endif %} — this will break the page -->

Fix: Every {% if %} needs an {% endif %}. Every {% for %} needs an {% endfor %}.

Mistake 2: Using the Wrong Object Context

<!-- On a collection page, there is no single "product" object -->
{{ product.title }}  <!-- This will be empty on a collection page -->

<!-- You need to loop through products -->
{% for product in collection.products %}
  {{ product.title }}  <!-- Now this works -->
{% endfor %}

Fix: Check which page template you are editing. product is only available on product pages. On collection pages, loop through collection.products.

Mistake 3: Not Handling Empty States

<!-- If the product has no compare_at_price, this breaks -->
Save {{ product.compare_at_price | minus: product.price | money }}

<!-- Better: check first -->
{% if product.compare_at_price > product.price %}
  Save {{ product.compare_at_price | minus: product.price | money }}
{% endif %}

Fix: Always use {% if %} checks before displaying data that might not exist.

Mistake 4: Editing Theme Code Without a Backup

Fix: Before editing any theme file:

1. Go to Online Store > Themes
2. Click Actions > Duplicate on your current theme
3. Edit the duplicate, not the live theme
4. Only publish when you are confident the changes work

Learning Liquid vs. Using AI

Here is an honest comparison for Shopify merchants:

| Factor | Learning Liquid | Using AI (EcomCoder) | |--------|----------------|---------------------| | Time investment | 20-40 hours to be useful | 0 hours | | Ongoing effort | Keep learning as Shopify updates | Describe what you want | | Customization speed | Minutes once you know it | Minutes from day 1 | | Understanding | Deep understanding of your theme | Surface-level understanding | | Cost | Free (your time) | $49-199/month | | Best for | Developers, technical merchants | Non-technical merchants |

Our recommendation: If you enjoy coding and want to understand your store deeply, learn Liquid. If you want results without the learning curve, use AI. Many merchants do both -- they learn Liquid basics to understand what AI generates, and use AI for speed.

Resources for Learning More

Official Shopify Liquid documentation:

• Shopify Liquid Reference (shopify.dev/docs/api/liquid) -- Complete reference for all objects, tags, and filters
• Shopify Dawn Theme (github.com/Shopify/dawn) -- The default theme. Great source code to study.

Practice:

• Duplicate your theme and experiment on the copy
• Start with small changes (modify a color, change text, add a badge)
• Use browser developer tools to inspect your theme and find which Liquid file generates each element

Conclusion

Liquid is not as intimidating as it looks. The three building blocks -- objects ({{ }}), tags ({% %}), and filters (|) -- cover 90% of what you will encounter in a Shopify theme.

You do not need to master Liquid to benefit from it. Understanding the basics lets you make small customizations, troubleshoot issues, and communicate better with developers or AI tools.

Start by duplicating your theme and experimenting. Change a product title display. Add an "if" statement. The best way to learn Liquid is by doing.

Start Free Trial -- Customize your Shopify store without learning Liquid.

---

Frequently Asked Questions

Do I need to learn Liquid to run a Shopify store?

No. Shopify's theme editor and apps handle most customization needs. Liquid knowledge becomes valuable when you want customizations beyond what the editor or apps provide, or when you want to reduce app dependency.

Is Liquid hard to learn?

Liquid is one of the easiest templating languages. If you can understand basic if/else logic and have ever written HTML, you can learn useful Liquid in a few hours. It was designed for non-programmers.

Can I break my store by editing Liquid?

You cannot damage your database or delete products by editing Liquid. The worst case is a broken page layout, which you fix by reverting your changes. Always duplicate your theme before editing so you have a backup.

What is the difference between Liquid and JavaScript?

Liquid runs on Shopify's servers and generates HTML before it reaches the browser. JavaScript runs in the browser after the page loads. Liquid decides what content to show. JavaScript makes that content interactive (animations, dynamic updates, form validation).

How does AI help with Liquid if I do not know the syntax?

AI tools like EcomCoder translate plain English into Liquid code. You describe what you want ("show a low stock warning when inventory is under 5"), and the AI generates the Liquid code, tests it, and adds it to your theme. You get the result without writing the code yourself.