Preview zones
A preview zone is the rectangle on your product photo where the customer’s text is rendered live. You draw it once in the admin; the storefront then reproduces it pixel-for-pixel — the admin editor and the storefront share the same rendering engine.
The zone editor
Section titled “The zone editor”Open a product’s configuration and enable Define a zone in the Live preview card.
- Drag the rectangle to position it; resize it with the corner handles.
- Coordinates are stored in percent of the image, so they stay correct at every screen size and image resolution. The numeric values next to the editor are editable if you prefer typing exact numbers.
- Set the horizontal alignment (left / center / right) and vertical alignment (top / middle / bottom) of the text inside the zone.
- Set the maximum and minimum font size and the line height.
- Type a sample text and pick a test font and color — the preview updates live, side by side with the controls.
Automatic fitting
Section titled “Automatic fitting”The storefront starts at the maximum font size and steps down until the text fits the zone’s width and height, never going below the minimum. Multi-line text is supported when the field allows it. Rendering is plain HTML (no canvas), which keeps it crisp, accessible and fast.
Fallback without a zone
Section titled “Fallback without a zone”If you don’t define a zone, the preview appears in a clean framed area below the block, using the chosen font and color. This is a perfectly valid mode — some merchants prefer it for products where overlaying the photo doesn’t make sense.
The fallback also engages automatically if the product image can’t be located in a particular theme’s markup, so customers always get a preview.
How the preview anchors to your photo
Section titled “How the preview anchors to your photo”- The block finds the featured product image in your theme’s gallery and overlays the zone on it.
- When the customer switches variants and the image changes, the preview follows and repositions automatically.
- In image carousels, the preview is anchored to one image: when that image scrolls out of view, the overlay hides rather than floating over an unrelated lifestyle photo, and returns when the image is visible again.
One zone or many
Section titled “One zone or many”The basic setup uses a single zone bound to one text field. To engrave several spots — front and back, name and number — see Multi-zone previews. To bend or rotate the text, see Curved text, rotation & shadow.