The storefront customizer

The customizer is what your shopper sees on a product page. By default it's a modal over the page — no detour, no new tab. Templates can also run in embedded layout, where the customizer sits inline in the product page itself — see Embedded layout.

The Customise button#

Once you assign a template to a product (and the Customise Button block is on that product template in your theme), a Customise button appears on the product page. You don't edit theme code. You don't install a second app.

Variants (size, colour, material) stay visible on the product page. Your customer picks the variant first, then opens the customizer to design. If the template uses variant images, the canvas swaps the blank to match.

A product with the block but no template shows the button disabled as Customisation unavailable.

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. A dashed outline marks the printable area (you can hide it per template).

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

• Text — type, change font, change colour, change alignment and size, move and resize (each of those only when you've allowed it)
• Images — upload a file, then drag, resize and rotate inside the slot; cut the background out; reorder which image sits on top
• Stickers — tap to add, tap again to remove (or add many copies, if the template allows)
• Masks — toggle on and off, when you've made them selectable
• Backgrounds — pick one per side from the options you've made available

Selecting an element on the canvas shows a small toolbar: Move, Align, Fit and Scale actions, an aspect-ratio padlock on images, and text alignment and font size for text. Undo and Redo sit in the header, next to Start Again, which clears the design after a confirmation.

The tools panel#

The tools sit beside the canvas. By default every tool is visible at once, stacked; Brand & language → Tools Layout can switch to tabs. Sections only appear when the template has something for them:

• Images — the upload button, a tile per image slot ("2 / 3"), and the Cut Out Toggle if background removal is on. With Wrangler AI on, Generate an image and Style Remix appear here too.
• Text Areas — one field per text element with your placeholder hint and character counter, then the font, colour and icon pickers you enabled. Word Art appears here when it's on.
• Graphics — Add Stickers, Add Masks and Add Backgrounds.

Uploads accept PNG, JPEG and SVG up to 10 MB by default (Settings → Image Upload Limits). Images below 300 px on a side are rejected with a message; there's no soft "low quality" warning above that, so set the minimum to match your print needs.

Multiple sides#

If the template has front, back, sleeves — any combination — a side selector shows each side's name. Tapping switches the canvas; the preview updates per side. A side that carries a surcharge shows its price ("+$5.00") and a tick once the shopper has customised it.

Customers aren't forced to fill every side. Only the sides they customise render into print files.

Continue → review → cart#

Continue opens the review panel. It has two steps, then a success screen:

1. Review your design. Previews of every side (tap to zoom) and a checkbox — by default "This design is mine to print — I have the rights to it." If part of the design sits outside the dotted print area, a second checkbox asks them to acknowledge that it won't be printed. Continue stays disabled until the boxes are ticked.
2. Select Size & Quantity. Variant tabs (or a dropdown when there are many), quantity steppers with low-stock and Sold Out states, a Size Guide button if you linked one, the Spend & Save progress bar, and the totals: items, any surcharge, savings, total. Then Add to Cart. Single-variant products skip this step and add straight away.
3. Added to Cart! — with the design thumbnail and three choices: Keep Editing (continue with a copy of the design), Start New Design, or View Cart. If you set up cross-sells, this screen also offers the same design on the template's other products.

If an AI image or Word Art is still generating when they press Continue, a Still generating dialog asks whether to Wait or Continue anyway. Continuing drops the unfinished generation from the design — it won't appear on the product.

In the cart#

The cart line shows the design thumbnail with a Custom badge (briefly "Preparing preview" while it renders), a View Design button that opens a full preview, and an Edit design pencil that reopens the customizer with their design exactly as they left it — see Cart editing. Surcharges show as "Customization: +$5.00" under the line.

This needs the Cart Design Preview block on your cart page and, for drawer carts, the Cart Preview (Global) app embed — see Installing.

What rides along with the order#

Each customized line in the order carries a thumbnail of the design, a link to a full-resolution preview, links to the print files, and the text and images the customer used — as line item properties. 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.

Every word is yours#

The labels above are the defaults. Nearly all of them — tool titles, button text, the confirmation checkbox, error messages, discount messages — can be reworded in Brand & language. See Styling the customizer.

What happens after the order is paid#

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