This guide explains what your customers see in the live preview while they personalize a product. It is for merchants who want to understand how the preview behaves before a shopper adds the item to the cart. Knowing this helps you set up products that look right at every step.
The preview updates live
The preview sits next to the personalization fields. Every time a shopper changes a field, the preview redraws right away. Type a name and it appears on the design. Pick a color and the design takes that color. There is no separate refresh or apply button.
The preview uses the same render engine that builds the final print file. So what the shopper sees on screen matches what gets produced. A name that fits inside the design in the preview fits the same way in print.
The editable print area is shown with a subtle dashed border. This tells the shopper where their content sits on the product. Anything inside the dashed line is part of the personalized area.
To see how a shopper moves through the whole flow, read how a shopper personalizes a product. For the fields that drive these changes, see personalization form fields.
Design view and product mockup view
A product can show the preview in two ways.
Design view shows the artwork flat on a clean surface. There is no product photo behind it. This is the same flat layout your customer edits, so it is easy to read and to position text.
Product mockup view shows the same artwork placed on a photo of the real product. The shopper sees their design as it would look on the finished item, for example printed on a mug or a shirt.
You can enable both views for one product. When you do, the shopper sees two buttons below the canvas: Design and Preview. They tap Design for the flat view and Preview for the product photo view. The preview keeps updating live in whichever view is active.
Product mockup view needs a product mockup set up first. The mockup tells Composerie how to place the design onto the product photo. Without one, the preview stays flat in design view, even if mockup view is requested. Set up the mockup on the product before you turn on the mockup or both view modes.
Multiple sides and multiple designs
Some products have more than one side to personalize, such as a front and a back. These products show a row of tabs above the preview. The shopper clicks a tab to switch to that side. Each side has its own view in the preview.
When a piece of text is shared across sides, changing it once updates it on every side. For example, a name that appears on both the front and the back updates everywhere when the shopper types it in. The shopper does not have to retype the same text on each side.
A product can also offer more than one design. When it does, a row of design chips floats over the preview. The shopper taps a chip to switch to that design. The preview swaps to the chosen design and keeps any personalization the shopper has entered.
The preview letterboxes to fit the screen. It scales down so the whole design stays visible without overflowing. On mobile it resizes responsively, so the shopper sees the full preview on a small screen.
Common questions
Why is there no Design and Preview button on my product?
Those buttons only appear when both views are enabled and the product has a mockup with placement corners. Without a capable mockup the preview stays flat.
Does the preview match the printed result?
Yes. The preview uses the same render engine as the print file, so what the shopper sees is what gets produced.
What is the dashed border in the preview?
It outlines the editable print area. Content inside the dashed line is the personalized part of the product.
If I change shared text on the front, does the back update too?
Yes. Text shared across sides updates on every side when you change it once.
Next
Set up the product photo view in the mockup preview so shoppers can see their design on the real product.