Playground

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.

template.liquid
Loading…
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.