Write some Liquid
Edit the template and watch it render. Try the image-size check: it's the same rule my Shopify app applies to a catalogue.
Sample data you can use
A products list with title, vendor, price (in cents), compare_at_price, tags and images (each with width, height and alt). They're the same test products as in the scanner screenshots.
{
"products": [
{
"title": "Canvas Tote Bag",
"vendor": "Northwind Goods",
"price": 2499,
"compare_at_price": 3499,
"tags": [
"bag",
"Canvas",
"new arrival"
],
"images": [
{
"alt": "",
"width": 499,
"height": 500
}
]
},
{
"title": "Bamboo Cutting Board",
"vendor": "Acme Supplies",
"price": 3999,
"compare_at_price": 0,
"tags": [
"kitchen",
"Bamboo"
],
"images": [
{
"alt": "Bamboo board",
"width": 490,
"height": 327
}
]
},
{
"title": "Ceramic Coffee Mug",
"vendor": "Acme Supplies",
"price": 1899,
"compare_at_price": 2299,
"tags": [
"kitchen",
"gift ideas"
],
"images": [
{
"alt": "",
"width": 1200,
"height": 1200
}
]
}
]
}How it works.This runs LiquidJS in your browser, which is very close to Shopify's Liquid but not identical. Shopify-only objects and tags (for example section, render and schema) aren't available, and I've added a few Shopify-style filters such as money, handleize and pluralize. Nothing you type leaves your browser.
Want the real thing? Read how I fix older themes for Shopify's stricter parser.
Hiring a senior Shopify developer?
I'm open to remote roles worldwide. Send a message and I'll reply within a day.