Product Personalizer - Live Preview Options
What is it?
Live preview allows shoppers to see their customizations applied to the product in real time before adding it to the cart. As customers select options (text, images, colors, buttons, swatches, etc.), the product preview updates instantly, showing exactly how the final product will look.
What Live Preview Can Do
Live Preview works seamlessly with your product options and variants to:
- Instantly reflect option changes on the product image
- Display text inputs, uploads, or selections directly on the product
- Update visuals without page reloads
- Support multiple option types: Text box, File upload, Image & Color Swatch (Note: Text box’s live preview can be combined with Color picker, Color Swatch, Font Picker (coming soon) to preview text color and styling in real time).
Customers can interact with options and immediately see the result — no guessing, no surprises.
When to Use Live Preview
If customers need to see it to trust it, Live Preview is the right solution 🤩.
Use cases | Typical examples | Why Live Preview matters |
Personalized products | Engraved names or messages.- Custom text on apparel, mugs, phone cases | Customers see exactly how their custom requests look on the product before buying. |
Visual option differences | Color or material selection- Pattern or style changes | Instantly updates the product image, making comparisons easy and intuitive |
Print-on-demand & custom designs | Uploading personal logos or images- Choosing print positions- Previewing artwork layout | Helps customers confirm design placement before checkout, reducing order errors |
Paid add-ons & upgrades | Gift wrapping styles- Extra decorations or finishes- Paid engraving or personalization | Visualizing upgrades makes added costs easier to justify |
Made-to-order or non-returnable items | Personalized or custom-built products | Visual confirmation is critical when products can’t be resold or returned |
Result: Shoppers feel confident in their choices, while merchants benefit from higher conversions, fewer errors, and reduced support requests.
How To Set Up
A. Explaining the setting panels
- Product personalizer tab
For options that support Live Preview (Text box, File Upload, Swatch), you’ll see a Product personalizer tab located at the top right, next to Option settings.
- What it does: The Product personalizer tab controls how the option appears in the live preview on your product page.
- How it works with Option Settings tab: The Product personalizer uses values from Option Settings, so we recommend setting those up first.
- Preview panel: Select background
When Live Preview is enabled, start by selecting the Background first.
Select background
Preview
After choosing a background, decide where the preview should appear:
All product images (default) | The preview appears on all product images. When customers switch between images, the preview remains visible on each image. |
First product image only | The preview appears only on the first product image. If customers switch to another image, the live preview will no longer be shown. |
Variant image only | The preview appears only on the selected variant’s image. When customers change variants, the background updates to the corresponding variant image, and the preview is shown on that image instead of the main product image. |
Last product image only | The preview appears only on the last image in the product’s media list. |
Specific product image | The preview appears only on a specific product image, based on its position in the product’s media list. Enter the image order number to select which image the preview should appear on. |
Note: The preview may look smaller during setup. Use Zoom In to check details. The final preview on your live store will display as expected.
How to set up the Product Personalizer (Live Preview)
- Decide which options need Live Preview (whether it is Text box / Swatch / File upload)
- Set up the option settings first
- Enable Live Preview in the Product Personalizer tab
- Select background & preview options
- Configure the Live Preview → Save → Choose product/customer condition for the option set
Configurations explanations:
- Font, Color, Size, Opacity, Curve, X-axis, Y-axis, Rotation: Default settings used in the preview and will be applied to the final product
- Allow customer to Change position / Change size: You can choose whether customers are allowed to: Change preview content’s position or/and size. Disable these options to lock the design.
Text box
- Default text for preview: The default text shown in the preview. If a Default value is set in Basic settings, it will be used automaticallyIf not, enter a sample value here (for example: “Add text”). Changes here affect preview only and won’t sync back to Basic settings.
- **Linked with other options - Swatch **(applicable for Color Swatch only): Use when you want to allow customers to select predefined colors to the text.
- **Linked with other options - Color picker: **Use when you want to allow customers to select their preferred color to the text.
File upload & Swatch
- **Preview shape: **Choose a basic shape or upload a custom PNG mask
Swatch
Updated on: 07/01/2026
Thank you!