Introducing the Liquid Playground
An interactive tool for testing Shopify Liquid templates with live preview and editable mock data. Experiment with filters, loops, and conditionals without touching your theme.
Testing Liquid code shouldn’t require pushing to a development theme and refreshing your browser twenty times. That’s why we built the Liquid Playground—an interactive environment where you can write, test, and perfect your Liquid templates instantly.
The Problem with Testing Liquid
Shopify’s Liquid templating language is powerful, but testing it has always been awkward:
- No local preview: You need a Shopify store and theme to see your code render
- Slow feedback loop: Push code, wait for sync, refresh browser, repeat
- Mock data hassles: Testing conditionals and loops requires real products, customers, or orders
- Filter guesswork: Does
money_without_trailing_zerosstrip the cents? Only one way to find out…
Enter the Liquid Playground
Our Liquid Playground solves all of this. Write Liquid code on the left, see it render on the right—instantly.
1. Live Preview Rendering
As you type, the preview updates automatically (or manually if you prefer). See your HTML output rendered with proper styling, including:
- Product cards and collection grids
- Cart tables and order summaries
- Formatted prices and dates
- Tags, badges, and styled elements
2. Editable Mock Data
The playground comes pre-loaded with realistic Shopify data: products, collections, cart items, customers, articles, orders, and more. But here’s the magic—you can edit it all.
The collapsible JSON tree view lets you:
- Click any value to edit it inline
- Expand/collapse nested objects and arrays
- See changes instantly reflected in your preview
Want to test what happens when a product is out of stock? Click available, type false, and watch your template respond.
3. 10 Preset Templates
Not sure where to start? Choose from ready-made templates covering common scenarios:
- Product Card: Display a product with price, variants, and availability
- Collection Grid: Loop through products in a collection
- Cart Summary: Show cart items, totals, and discounts
- Customer Greeting: Personalized content for logged-in users
- Blog Article: Article with author bio and related posts
- Order Confirmation: Full order details with shipping info
- Shop Info: Store details, currencies, and locales
- Conditionals Demo:
if,elsif,unless,case/whenexamples - Loops Demo:
forloops withlimit,offset,forloopvariables - Filters Demo: String, math, array, date, and money filters
Each template is fully editable—use them as starting points for your own code.
4. Full Shopify Filter Support
The playground supports the filters you actually use:
Money filters: money, money_with_currency, money_without_currency, money_without_trailing_zeros
String filters: upcase, downcase, capitalize, handle, truncate, strip_html, url_encode, json
Array filters: size, first, last, join, sort, reverse, map, where, uniq
Date filters: Full date formatting with strftime patterns
Shopify-specific: image_url, asset_url, pluralize, and more
5. Complete Object Coverage
All the Shopify objects you need are available:
| Object | What’s Included |
|---|---|
shop | Name, currency, address, locales |
product | Title, price, variants, images, tags |
collection | Products array, description, image |
cart | Items, totals, discounts, notes |
customer | Name, addresses, orders, tags |
article | Content, author, comments, tags |
blog | Articles array, title |
page | CMS page content |
order | Line items, shipping, totals |
settings | Theme settings |
request | Host, path, locale |
6. Workflow Features
Small things that make a big difference:
- Auto-save: Your code and data persist in browser storage
- Copy buttons: One-click copy for template code and rendered output
- Reset buttons: Restore defaults with a confirmation prompt
- Tab indentation: Press Tab to indent code properly
- Line counter: See how many lines you’re working with
Who Is This For?
- Theme developers prototyping section templates
- Agency developers debugging client issues without store access
- Beginners learning Liquid syntax and filters
- Anyone who wants faster feedback when writing Liquid
Try It Now
The Liquid Playground is free at /tools/liquid-playground. No account needed.
Write better Liquid, faster. And when you’re ready to go deeper, explore our Liquid Fundamentals course for comprehensive coverage of Shopify’s templating language.
Got a filter or object we should add? Feature requests welcome—we’re building this for real developers with real workflows.
Discussion
Loading comments...