Developer Resource
Master Shopify
Liquid
Free guides, cheat sheets, and code examples to help you build and customize Shopify themes. From first template to production code.
AI Liquid code generator coming soon. Get early access.
{% for product in collection.products limit: 4 %}
<div class="product-card">
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
{% if product.available %}
<button>Add to Cart</button>
{% else %}
<span>Sold Out</span>
{% endif %}
</div>
{% endfor %}Guides & References
Everything you need to learn Shopify Liquid — from beginner tutorials to complete reference guides.
Shopify Liquid Cheat Sheet
Quick reference for Liquid tags, objects, and filters with copy-paste code examples.
Read guideShopify Liquid for Beginners
New to Liquid? Start here. Learn what it is, where it's used, and write your first template code.
Read guideShopify Liquid Filters
Complete reference of Liquid filters — string, number, array, date, and money transformations.
Read guideShopify Liquid If/Else & Loops
Master conditionals and iteration. Practical examples with if, unless, case, for, and tablerow.
Read guideShopify Liquid Code Examples
15+ real-world code examples organized by use case — products, collections, cart, navigation, and more.
Read guideAI Liquid Code Generator
Generate production-ready Shopify Liquid code from plain English. Coming soon — join the waitlist.
Read guideTry Shopify Liquid Code
Explore real-world Liquid template examples — see the code and what it renders.
{% for product in collection.products limit: 3 %}
<div class="product-card">
<img src="{{ product.featured_image | img_url: '400x' }}" alt="{{ product.title }}">
<h3>{{ product.title }}</h3>
<p class="price">{{ product.price | money }}</p>
{% if product.compare_at_price > product.price %}
<span class="sale-badge">Sale</span>
{% endif %}
<button {% unless product.available %}disabled{% endunless %}>
{{ product.available | default: false | ternary: "Add to Cart", "Sold Out" }}
</button>
</div>
{% endfor %}<div class="product-card">
<img src="//cdn.shopify.com/s/.../tee_400x.jpg" alt="Classic Cotton Tee">
<h3>Classic Cotton Tee</h3>
<p class="price">$29.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="//cdn.shopify.com/s/.../hoodie_400x.jpg" alt="Zip-Up Hoodie">
<h3>Zip-Up Hoodie</h3>
<p class="price">$59.99</p>
<span class="sale-badge">Sale</span>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="//cdn.shopify.com/s/.../cap_400x.jpg" alt="Snapback Cap">
<h3>Snapback Cap</h3>
<p class="price">$18.00</p>
<button disabled>Sold Out</button>
</div>Want more? Browse 15+ real-world Shopify Liquid code examples →
What Is Shopify Liquid?
Shopify Liquid is the open-source template language that powers every Shopify storefront. Created by Shopify and written in Ruby, Liquid sits between your store's data and the HTML that customers see in their browsers. Every product page, collection grid, cart drawer, and checkout message you encounter on a Shopify store is rendered through Liquid templates.
The language is built around three core building blocks: objects, tags, and filters. Objects like {{ product.title }} pull dynamic data into your templates. Tags like {% if product.available %} add logic — conditionals, loops, and variable assignments — that control what gets rendered. Filters like {{ price | money }} transform output inline. Our Shopify Liquid cheat sheet has copy-paste examples for every common pattern.
Because Liquid is a safe template language, it deliberately restricts operations that could slow down or break a storefront. There is no arbitrary code execution, no file-system access, and no ability to run unbounded loops. This sandboxed design makes Liquid ideal for multi-tenant platforms where thousands of merchants share the same infrastructure. Our beginner's guide to Shopify Liquid walks through the basics step by step.
In practice, Liquid templates live inside .liquid files in your Shopify theme. The main template files — product.liquid, collection.liquid, cart.liquid, and layout files like theme.liquid — define the structure of your store. You'll use Liquid filters to format data on the fly and conditionals and loops to build dynamic layouts.
Why Learn Shopify Liquid?
Shopify powers millions of online stores, and every one of them relies on Liquid for front-end customization. Whether you're a merchant tweaking your own theme, a freelancer building stores for clients, or a developer at an agency, understanding Liquid is essential. It is the single most impactful skill for anyone working in the Shopify ecosystem.
Learning Liquid also opens the door to building custom Shopify themes from scratch, creating bespoke sections for the theme editor, and integrating apps seamlessly into storefronts. Many high-paying Shopify development jobs list Liquid proficiency as a core requirement. The demand for skilled Liquid developers continues to grow as more businesses migrate to Shopify.
Ready to get started? Jump straight into our Shopify Liquid for Beginners tutorial.
Coming Soon
An AI That Writes Liquid Code For You
We're building an AI assistant that understands Shopify Liquid inside and out. Describe what you want, get production-ready template code. Get early access.
No spam. One email when we launch.