The storefront customizer

The customizer is what your shopper sees on a product page. Modal-over-the-page — no detour, no new tab.

The Customise button#

Once you link a template to a product, a Customise button appears on that product's page automatically. You don't edit theme code. You don't install a second app. It just shows up.

Variants (size, colour, material) stay visible on the product page. Your customer picks the variant first, then opens the customizer to design.

The live canvas#

The canvas is a real-time preview. Drag a corner, change a font, type a name — your customer sees the result in the same frame. No "show preview" button. No spinner.

What they can do depends on the placeholders you've set up:

• Text — type, change font, change colour, change alignment, move and resize (when you've allowed it)
• Images — drop a file in, then drag, resize, and rotate inside the bounding box
• Stickers — click to add, click again to remove
• Backgrounds — pick from the options you've made available
• AI tools — remove the background from an upload, generate an image from a prompt, or generate stylised text (only the tools you've turned on for the template)

The toolbar across the top changes with what they've selected. Tap a text element, the toolbar shows font/colour/alignment. Tap an image, it shows rotate and AI background removal.

Multiple sides#

If the template has front, back, sleeves — any combination — your customer sees tabs at the top. Tab switches the canvas; the preview updates per side.

A counter shows how many sides still need attention. They're not forced to fill every slot, but the counter nudges them toward a complete design.

Add to cart#

When the customer clicks Add to cart, the design locks in and a thumbnail of it shows up next to the line item in the cart. The modal closes. They keep shopping or check out.

If they want to tweak before checkout, Edit customisation in the cart reopens the customizer with their design exactly as they left it.

What rides along with the order#

Each customized line in the order carries a thumbnail of the design and a link to a full-resolution preview. You see them on the order detail page in your Shopify admin. Your fulfilment team sees them in whatever tool you've wired to order tags.

If you want the thumbnail to also show up in your order confirmation email, that's a five-minute paste — see Customizing order confirmation emails.

What happens after the order is paid#

That's Order flow — tags, metafields, print-ready files.