Multi-zone previews

Multi-zone mode renders several texts on the product photo at once — each zone bound to its own text field. Typical uses:

• a pendant engraved front and back,
• a jersey with name and number,
• a board with a title line and a date line.

Enabling multi-zone mode

1. In the product’s Live preview card, switch the zone editor to multi-zone mode.
2. Add zones (up to 5 per product). Select a zone in the list — or click it on the image — to move and resize it.
3. Bind each zone to a text field: the zone renders that field’s value, in the customer’s chosen font and color.
4. Each zone keeps its own alignment, font-size range — and its own curve and rotation settings.

Zones are drawn on the product’s featured image. If none of the bound fields have a zone that can be displayed (for example, the image isn’t visible in the current carousel slide), the previews fall back to framed boxes below the block, one per field.

Compatibility notes

• Multi-zone mode takes priority over the single-zone setup; your existing single-zone products keep working unchanged until you switch them.
• The multi-zone renderer ships as a separate storefront module that loads only on products configured with zones — products with a single zone or no zone don’t pay any extra bytes.
• Checkbox, swatch and image fields can’t be bound to a zone — zones render text fields only.

Design advice

Keep zones from overlapping, and leave breathing room around each one: the fitting algorithm uses the whole zone rectangle, so two adjacent zones with generous maximum font sizes can visually collide even if their rectangles don’t.