FREE · NO APP · NO SUBSCRIPTION
A free Shopify product configurator.
Let shoppers choose colours, fonts and engraving and watch the product redraw live on your own photography. It installs as two theme blocks, takes about fifteen minutes, and every choice arrives on the order as a line item property your team can actually fulfil.
Caps, t‑shirts, hoodies, bags, pet collars, signage — anything with an area a customer can personalise.
Try it — this is the real thing.
Not a video. These are the same web components a merchant installs, loaded from the same CDN URL, running on your machine right now.
Loading the live demo…
EMBROIDERED CAP
One text layer, any thread colour.
The swatch recolours the stitching and the highlight and shadow follow it, so adding a thread colour is one hex value rather than a whole extra layer. Swap the lettering and the type re-fits itself.
Caps, beanies, patches — anything stitched
Loading the live demo…
EMBROIDERED COLLAR
Your product photos, not a mock-up.
Each colour swaps the photograph behind the stitching rather than tinting it, so the product stays exactly as photographed. Text colour and size are separate choices a shopper can mix freely.
Collars, t‑shirts, totes — one photo per colourway
INSTALL IT ON A CLIENT STORE
Five steps, about fifteen minutes.
Nothing here needs a build step, a Partner app or a terminal. Do it in the Shopify admin.
-
01
Upload your artwork to Shopify Files
Content → Files. Upload the product photo for each colourway, plus any overlay art. Do this first: the configuration stores their URLs, so they have to exist before you write it.
Artwork must live in Shopify Files. Images served from a host without CORS headers taint the canvas, and the PNG export then fails at add-to-cart time on a live store — the worst possible moment to find out.
-
02
Copy the theme files in
Online Store → Themes → ⋯ → Edit code. Add each file from the download into the matching folder. Nothing is overwritten and no existing theme file is touched.
-
03
Create the metafield definition
Settings → Custom data → Products → Add definition. Type must be JSON.
The namespace and key must be exactly configurator.config — not the definition name. Shopify generates the key from the name and sanitises it, so typing “configurator.config” as the name silently produces custom.configurator_config, and the theme then finds nothing at all with no error anywhere.
-
04
Build the configuration
Open the builder, add your layers and option groups, preview it with the real component, then Copy for metafield and paste it onto the product. Export is blocked while anything is unresolved, so a broken configuration cannot reach a storefront.
-
05
Add the block and turn off dynamic checkout
Theme editor → your product template → Add block → Product configurator. For a split layout, set it to Preview only and add a Configurator options block beside Add to cart.
Turn off the dynamic checkout buttons (Shop Pay, PayPal, Google Pay) on that template. They bypass the cart and lose line item properties — a configuration silently vanishing between the product page and the order is the worst failure this can have.
WHAT IS IN THE DOWNLOAD
The theme files.
Copy each into the matching folder of your theme. Only the first four are required; the rest cover layouts you may not need.
| File | Needed | What it does |
|---|---|---|
| assets/product-configurator.iife.js | Required | The engine. Built output — never edit it by hand. |
| assets/product-configurator-cart.js | Required | Mirrors the selection into the product form. Without it the preview works and nothing reaches the order. |
| snippets/product-configurator.liquid | Required | The markup. Emits no script tags of its own. |
| blocks/product_configurator.liquid | Required | What a merchant drags in from the theme editor. |
| blocks/product_configurator_options.liquid | Split layout | The controls on their own, for placing beside Add to cart. |
| snippets/product-configurator-options.liquid | Split layout | The markup the options block renders. |
| sections/product-configurator.liquid | Older themes | For themes whose product section does not accept blocks. |
| sections/product-configurator-split.liquid | Optional | A whole product page — preview one side, options and Add to cart the other. |
| snippets/product-configurator-cart-preview.liquid | Optional | Re-renders the configured preview on the cart page. |
| templates/product.configurator.json | Optional | An example product template using the split section. |
The zip includes INSTALL.md, which covers the same steps plus the failure modes worth knowing before you go live.
Prefer to load the engine from our CDN rather than copying it in? Use
https://cdn.simple-configurator.garusin.com/v/0.1.1/product-configurator.iife.js
— that URL is immutable, so it can never change under a live store.
What it will not do.
Worth knowing before you build a store plan around it.
Can options change the price?
No. Selections travel as line item properties, and Shopify has no mechanism for those to alter what it charges. A page that displays “+$5 for engraving” and charges the base price is a chargeback waiting to happen, so the component renders no price UI at all. Charging for options needs real variants or a Cart Transform Function — both of which we build. Email info@garusin.com to arrange a consultation.
Arrange a consultationDoes it work on any theme?
It needs Online Store 2.0. The two-block split layout also needs theme-block support (Dawn 15 or equivalent). Older themes can use the standalone section instead.
Is there a catch to “free”?
No licence key, no account, no usage cap. We build ecommerce storefronts for a living — this is the part of that work we can give away, and some of the people who use it will want the rest.
Does the configured image reach the order?
The selections do, as readable properties, and the cart page can re-render the preview from them. A genuinely uploaded image — one that shows in the confirmation email and the admin — needs a backend, which this deliberately does not have.
The full documentation
Everything is written down — the install, every field of the config, and the reasoning behind how it renders. No sign-up, no sales call in the way.
Want it built for you?
We build Shopify storefronts for a living — including the artwork, configuration and fulfilment plumbing behind configurators like this one. If you would rather it were done than do it, tell us about the store.
Prefer a form? Use the one on the homepage.