Set up the Personalizer

The background, the layers, and the order to build them in — everything between a plain product photo and a working live preview.

A live preview requires two things: a background and one or more layers.

The background belongs to the option set, and the layers belong to individual options.

The two are connected: Change background lives on the preview panel's Personalize tab, and that tab only appears once at least one option has the Personalizer turned on. So you cannot set the background before you have an option with the Personalizer enabled.

Layer positions are measured against the background, so set the background before you position any layer. If you change it later, you have to reposition every layer.

Watch it done — 1:48. An engraving field on a necklace, wired to a live preview so the customer reads their own text on the product before checking out.

The three parts

Part	What it is	Where you set it
The background	The image the layers are drawn on — a product photo, or one you upload	Once per option set, from the builder's preview panel
The layers	One per option with the Personalizer on. Text or image	Per option, on its Personalizer tab
Customer controls	Which layers the customer may move, resize, or rotate	Per option, per layer

The order to work in

1. Build the options. Add the options you want personalized, and set their labels, limits, prices, and conditional logic. See Build your options.

2. Turn the Personalizer on for each option. This is what makes the Personalize tab appear in the preview panel. See Turning it on as an option below.

3. Set the background. See Choosing the background below.

4. Give every text layer a default value. Without one the layer is not drawn, so the preview looks empty. See Always give a text layer a default value below.

5. Style and position each layer. Positions are measured against the background, so do this after step 3. See Layer settings.

6. Select what the customer can adjust. See Customer controls. Add a crop area if you allow any adjustment.

7. Test on a real product page using View in Store. Enter realistic content, such as a full name rather than test, and check the result on a phone.

Choosing the background

Select Change background in the preview panel. You then choose which image to use, and which of the product's images it applies to.

Turn on Personalizer on the option, then select Change background in the preview panel.

Two decisions: which image, and which of the product’s images it applies to.

Product image or custom image

Choice	What it uses	Best for
Product image	The product's own photographs. You also pick a product to preview against while you work in the builder; on the storefront each customer's actual product is used	Almost everything. One option set works across a whole catalog, and every product shows its own photo
Custom image	One image you upload, used for every product this option set applies to	Products that photograph badly for personalization, or where a clean mock-up sells better than the real photo

Selecting Custom image also displays the When to replace product image setting.

Apply to: which of the product images

With Product image selected, this setting controls which photograph the layers are drawn on.

Choice	Behavior	Use when
All product images	Every image gets the layers	All your photographs show the same personalizable face
First product image only	Only the first	The first image is your clean front-on shot and the rest are details
Last product image only	Only the last	You keep a dedicated personalization mock-up at the end of the gallery
Specific product image	The one at the position number you enter	Your personalizable shot is always, say, the third image

All product images is rarely the right choice. A layer positioned for a front-facing photo may appear in the wrong place on close-up or lifestyle photos.

Select a single product image and keep it in the same gallery position across your products. First product image only, using a consistent front-facing photo, is the most reliable option. Specific product image requires all product galleries to use the same image order, so check several products before using this setting.

When to replace product image

This setting is displayed only when Custom image is selected. It controls when the customer sees your uploaded image instead of the product photo.

Choice	Behavior	Use when
Immediately on page load	Your image is shown from the start	The mock-up is the best sales image you have
Only after personalization	The product photo shows first; your image appears once they start personalizing	The real photograph sells better, and the mock-up is only there to show their design

Only after personalization is usually the better choice. Customers see the real product first, and your image appears when they start personalizing.

What makes a good background photograph

The quality of the preview depends on this image.

Do	Avoid
A flat, front-on view of the surface being personalized	Angled or three-quarter shots — flat text on a perspective surface looks wrong
Even, diffuse lighting	Strong shadows or highlights across the personalization area
A plain area where the text will sit	Busy patterns behind the text
Consistent framing across your products	Different crops per product, when one option set covers many
Large enough to stay sharp on a big screen	Small images that soften when scaled up

If your products are photographed at an angle, use a flat Custom image mock-up instead. It is less authentic but produces a more accurate preview.

Turning it on as an option

Open the option and go to the Personalizer tab, beside Basic and Advanced. Turn on Enable personalize. No other settings are displayed until you do.

The tab is available on the twelve supported option types only. If the tab is missing, the option type does not support the Personalizer. If it is grayed out, the Personalizer is not included in your plan.

Nothing on the tab appears until the switch is on.

What you get by option type

The available settings depend on whether the option produces text or an image.

Setting group	Text, Textarea, Number	File upload and the eight selection types
Color, font size, font style, font family	Yes	No
Text alignment	Textarea only	No
Text effects	Yes	No
Curve and auto-fit max width	Text and Number only	No
Image shape and background mode	No	Yes
Width and height	Textarea only	Yes
X position, Y position, opacity, rotation	Yes	Yes
Crop area	Yes	Yes
Allow customers to	Yes	Yes

Text and Number are single-line types, so they support curve and auto-fit instead of width and height. Textarea is a block, so it supports alignment, width, and height. Image types support shape and fit mode.

Always give a text layer a default value

A text layer with no content is not drawn, so the preview appears empty until the customer enters text.

Set a Default value on the Basic tab, such as Your name or Your text. The preview then always has content to display.

The default value is also submitted if the customer does not change it, so choose a suitable value.

Several personalized options on one product

Layers are drawn together on one background, and they can overlap.

Combination	What to watch
A name and a date	Different Y position values so they sit on separate lines
Text over an uploaded photo	Contrast — dark text on a dark photo disappears. Consider a stroke effect
Two alternative designs, never both	Conditional logic, so only one is ever visible
Layers that must stay inside a printable area	Give each one a crop area
Many layers	Performance on older phones. Keep it to what the product really needs

A hidden option draws no layer, so you can use conditional logic to switch between alternative designs.

What the preview is, and is not

It is	It is not
A representation of the finished product, good enough to sell from	A print-ready proof
Live, updating as the customer types	Color-accurate — screens are not calibrated
A record of what the customer intended	A guarantee that production will match it exactly

State this where it matters. Add a line of help text such as "The preview is a guide. Final placement may vary slightly."

Notes

• One background per option set. For products framed very differently, use separate option sets. See Assign to products.

• Layer positions are percentages rather than pixels, so a layer keeps its relative position at any display size. This works only if your product photos are framed consistently.

• The builder preview uses the product you selected under Change background. The storefront uses the product the customer is viewing.

• A custom background image is uploaded to your store's files.

• Turning the Personalizer off leaves the option working normally. It stops drawing the layer, and no settings are lost.

• Layer settings are per option, so the same option type can be configured differently in two places.

• The customer's text or file is stored in the order in both cases. The Personalizer adds the visual design record. See Designs in cart and orders.

If the Personalizer does not behave as described here, see Troubleshooting personalizer.