Liquid Sandbox

{"subtitle":"A theme lab. Real patterns, sample data, instant results.","intro":"Pick an example, edit the Liquid and JSON, then run it. Everything stays in your browser.","choose":"Choose a theme example","use":"Where to use it","try_label":"Try changing","code":"Liquid code","data":"Sample data · JSON","data_hint":"Fictional data, not a connection to your store. The JSON must be an object.","run":"Execute code","reset":"Reset example","copy_code":"Copy code","copy_output":"Copy result","copied":"Copied to clipboard.","copy_failed":"Clipboard unavailable. Select the text and copy it with your keyboard.","output":"Result","text":"Text","html":"HTML preview","preview_title":"Safe HTML preview","safe_note":"Static preview: scripts, links, media, forms and custom styles are removed.","hint":"Edit the example. Press Escape to leave the code editor.","loading":"Rendering…","success":"Rendered successfully.","stale":"Inputs changed. Run the code again.","reset_done":"Example reset. Run it to see the result.","empty":"Run your example to see the result.","json_error":"Invalid JSON. Check quotes, commas and brackets.","json_object":"JSON must be an object, for example {\"product\": {...}}.","liquid_error":"Liquid syntax or rendering error.","missing_error":"A variable is missing. Add it to the JSON or correct the name in the Liquid code.","filter_error":"This filter is not available in LiquidJS. Use a standard filter or test it in your Jumpseller theme.","restricted_error":"This lab does not load external templates. Paste the snippet here instead of using include, render or layout.","limit_error":"The example is too large or took too long. Reduce the input or loop size.","line":"Line","engine_missing":"The Liquid engine could not load. Reload the page and try again.","reference":"Before using this in your theme","limitations":"This uses LiquidJS in your browser, not the Rails Liquid renderer used by Jumpseller. Sample objects are plain JSON, not live store objects. Test the final code in your theme.","filter_note":"Only standard LiquidJS filters are available. Jumpseller filters such as price, asset and image are not implemented. Examples show raw numeric prices with the currency code; they do not format money or calculate checkout totals.","strict_note":"Missing variables are reported in this lab. A live theme may handle them differently. Includes, render and layout are disabled.","objects":"Official object reference","filters":"Official filter reference","fictitious":"Fictional theme data","title":"Liquid Sandbox — Free Online Tool | Jumpseller","examples":[{"id":"price","name":"Price \u0026 discount","description":"Show the original and discounted price. product.discount is an amount, not a percentage.","location":"Product page or product card.","try":"product.price and product.discount.","code":"\u003carticle\u003e\n  \u003ch2\u003e{{ product.name | escape }}\u003c/h2\u003e\n  {% if product.discount \u003e 0 %}\n    \u003cp\u003e\u003cs\u003e{{ product.price }} {{ store.currency }}\u003c/s\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cstrong\u003e{{ product.price | minus: product.discount }} {{ store.currency }}\u003c/strong\u003e\u003c/p\u003e\n  {% else %}\n    \u003cp\u003e{{ product.price }} {{ store.currency }}\u003c/p\u003e\n  {% endif %}\n\u003c/article\u003e","data":{"product":{"name":"Linen shirt","price":80,"discount":20},"store":{"currency":"EUR"}},"reference":"https://jumpseller.com/support/liquid/#product"},{"id":"stock","name":"Stock \u0026 sold out","description":"Switch between unlimited stock, available stock and sold out.","location":"Product page or product card, near the purchase controls.","try":"product.stock = 0, or product.stock_unlimited = true.","code":"\u003ch2\u003e{{ product.name | escape }}\u003c/h2\u003e\n{% if product.stock_unlimited %}\n  \u003cp\u003eUnlimited stock\u003c/p\u003e\n{% elsif product.stock \u003e 0 %}\n  \u003cp\u003eIn stock: {{ product.stock }}\u003c/p\u003e\n{% else %}\n  \u003cp\u003e\u003cstrong\u003eSold out\u003c/strong\u003e\u003c/p\u003e\n{% endif %}","data":{"product":{"name":"Linen shirt","stock":8,"stock_unlimited":false}},"reference":"https://jumpseller.com/support/liquid/#product"},{"id":"category","name":"Category products","description":"Loop through the products supplied in category.products, including an empty category.","location":"Category template or a category product-list snippet.","try":"Add a product to category.products, or set it to [].","code":"\u003ch2\u003e{{ category.name | escape }}\u003c/h2\u003e\n\u003cul\u003e\n{% for product in category.products %}\n  \u003cli\u003e{{ product.name | escape }} — {{ product.price }} {{ store.currency }}\u003c/li\u003e\n{% else %}\n  \u003cli\u003eNo products in this category.\u003c/li\u003e\n{% endfor %}\n\u003c/ul\u003e","data":{"category":{"name":"Everyday essentials","products":[{"name":"Linen shirt","price":80},{"name":"Canvas bag","price":25}]},"store":{"currency":"EUR"}},"reference":"https://jumpseller.com/support/liquid/#category"},{"id":"variants","name":"Product variants","description":"List variant SKUs, prices and availability. Variant names are not assumed.","location":"Product page, beside the variant selector.","try":"Change a variant price, stock or stock_unlimited.","code":"\u003ch2\u003e{{ product.name | escape }}\u003c/h2\u003e\n\u003cul\u003e\n{% for variant in product.variants %}\n  \u003cli\u003e\n    {{ variant.sku | escape }} — {{ variant.price }} {{ store.currency }}\n    {% if variant.stock_unlimited %}Unlimited stock{% elsif variant.stock \u003e 0 %}In stock: {{ variant.stock }}{% else %}Sold out{% endif %}\n  \u003c/li\u003e\n{% endfor %}\n\u003c/ul\u003e","data":{"product":{"name":"Linen shirt","variants":[{"sku":"SHIRT-S","price":80,"stock":4,"stock_unlimited":false},{"sku":"SHIRT-M","price":85,"stock":0,"stock_unlimited":false}]},"store":{"currency":"EUR"}},"reference":"https://jumpseller.com/support/liquid/#product-variants"},{"id":"cart","name":"Cart \u0026 quantities","description":"Loop through order.products and calculate a sample line amount from price × qty.","location":"Cart template. order is the current object; cart is deprecated.","try":"Change order.products[0].qty from 2 to 4.","code":"{% assign sample_total = 0 %}\n\u003cul\u003e\n{% for orderedproduct in order.products %}\n  {% assign line_amount = orderedproduct.price | times: orderedproduct.qty %}\n  {% assign sample_total = sample_total | plus: line_amount %}\n  \u003cli\u003e{{ orderedproduct.name | escape }} — Quantity: {{ orderedproduct.qty }} — Line amount: {{ line_amount }} {{ store.currency }}\u003c/li\u003e\n{% else %}\n  \u003cli\u003eYour cart is empty.\u003c/li\u003e\n{% endfor %}\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSample total: {{ sample_total }} {{ store.currency }}\u003c/strong\u003e\u003c/p\u003e","data":{"order":{"products":[{"name":"Linen shirt","price":80,"qty":2},{"name":"Canvas bag","price":25,"qty":1}]},"store":{"currency":"EUR"}},"reference":"https://jumpseller.com/support/liquid/#ordered-product"},{"id":"featured","name":"Featured product badge","description":"Use a documented boolean to show a featured badge on a product.","location":"Product cards in a category or featured collection.","try":"Set product.featured to false.","code":"\u003carticle\u003e\n  \u003ch2\u003e{{ product.name | escape }}\u003c/h2\u003e\n  {% if product.featured %}\n    \u003cp\u003e\u003cstrong\u003eFeatured\u003c/strong\u003e\u003c/p\u003e\n  {% else %}\n    \u003cp\u003eRegular product\u003c/p\u003e\n  {% endif %}\n\u003c/article\u003e","data":{"product":{"name":"Linen shirt","featured":true}},"reference":"https://jumpseller.com/support/liquid/#product"}]}

Pick an example, edit the Liquid and JSON, then run it. Everything stays in your browser.

Before using this in your theme

This uses LiquidJS in your browser, not the Rails Liquid renderer used by Jumpseller. Sample objects are plain JSON, not live store objects. Test the final code in your theme.

Only standard LiquidJS filters are available. Jumpseller filters such as price, asset and image are not implemented. Examples show raw numeric prices with the currency code; they do not format money or calculate checkout totals.

Missing variables are reported in this lab. A live theme may handle them differently. Includes, render and layout are disabled.

Official object reference ↗Official filter reference ↗

Start your journey with us!

Start your free 7-day trial. No credit card required.

Design & Customization

Payments & Shipping

Apps

Support

Result

Before using this in your theme

Start your journey with us!

For Every Business

Sales Channels

Design & Customization

Payments & Shipping

Apps

Support

Liquid Sandbox

Result

Before using this in your theme

Start your journey with us!