Shopify Liquid Playground

Liquid, Shopify's templating language, normally only renders on Shopify's own servers, which means learning it usually means setting up a dev store, a theme, and a deploy step just to test one line of code. This playground renders real Liquid syntax entirely in your browser using LiquidJS, an open-source JavaScript implementation of Liquid, against realistic mock product, cart, and collection data, so you get the same instant feedback loop as writing plain HTML.

Why a browser can normally run Liquid at all

Liquid itself, the language, is separate from Shopify's specific implementation of it. LiquidJS parses and renders standard Liquid syntax, tags like for, if, assign, and case, exactly the way Shopify's own Ruby-based Liquid engine does, which is what makes an in-browser playground possible in the first place. Shopify layers its own store-specific objects and filters, like product and money, on top of that same base language, which this tool recreates with mock data and custom filters.

Realistic mock Shopify data, fully editable

The Data tab holds a complete mock Shopify data set as raw JSON, a product with variants, options, and multiple images, a collection of products, a cart with line items, plus a shop object, menu, FAQs, testimonials, and blog posts. Editing any value there, changing a price, adding a variant, emptying the cart, immediately changes what the Liquid on the page actually renders, which is the fastest way to understand how Liquid variables and objects behave without ever touching a real store.

20 premade sections covering real theme patterns

The section dropdown loads a complete, working pattern, a featured product, a variant picker, a FAQ accordion, a cart drawer, and more, each demonstrating a specific piece of Liquid: looping over collection.products, conditional pricing with compare_at_price, looping over product.variants to build an option picker. Loading a section replaces the current Liquid, CSS, and JS with that pattern, a fast way to see a real technique in context rather than reading about it in isolation.

Shopify-specific filters, recreated

Filters like money, img_url, and handle aren't part of standard Liquid, Shopify adds them specifically for store data, so this playground registers matching versions of them into the LiquidJS engine. {{ product.price | money }} correctly divides a price stored in cents and formats it as currency, exactly like it does on a real storefront, which is the detail that trips up a lot of beginners writing their first Liquid template.

An honest limitation: this isn't a full theme environment

Shopify-only tags like {% form %}, {% render %}, and {% schema %}, along with real snippet files, section settings, and metafields, aren't reproduced here, since they depend on Shopify's own theme architecture rather than the Liquid language itself. This playground focuses specifically on core Liquid syntax and common section patterns, the part that's genuinely portable knowledge, not a replacement for building and testing inside an actual Shopify theme.

Runs entirely in your browser

Parsing and rendering both happen client side, nothing you write here is uploaded, logged, or sent to a server. Once a pattern looks right, Download saves it as a single .liquid file with its CSS and JS bundled in, mirroring how a real Shopify section file is structured, ready to adapt into an actual theme. This tool is part of the broader Shopify Tools collection on Pixelquil.