Product Personalizer - Live preview
The Product Personalizer allows customers to customize products directly on the store. They can add text, upload images, choose colors, and more—all with a live preview. It’s a simple way to let shoppers see their personalized design before adding it to the cart.
I. Available options:
Single line text/ Multi-line text/ Number: Demo link
Color/ Image swatch: Demo link
File upload (Coming soon)
Dropdown Menu (Coming soon)
Button (Coming soon)
Checkbox (Coming soon)
Radio Button (Coming soon)
Switch (Coming soon)
Combo box (Coming soon)
You can check the demos here
II. Panel Navigation
1. Product Personalizer Menu
Each option contains:
Basic Setting
Advanced Setting
Product Personalizer
Use the Product Personalizer tab to enable the live preview feature.
2. Preview Menu
Once enabled, the live preview appears on the right, featuring a Change background button and a Zoom button. You can either display the product's default image or upload a personal image.
2.1 Select Background
Choose between:
a. Main Product Image
Single-Variant Product: The preview appears on the product's first image.
Multi-Variant Product: The preview updates based on the selected variant's image.
b. Custom Background Option:
Upload a custom background to use instead of the product’s main image.
Example: For custom phone cases, use a blank phone case image for easier personalization, even if the main product image shows an angled view with a design.
2.2 Preview Options
Once you've selected a preview background (either your main product image or a custom background you upload), choose how to display the options:
All product images (default): Selected options will appear on all product images. Customers can switch between images while the option preview remains visible.
First product image only: Selected options will only appear on the first product image. If customers switch to other images, the preview will not be shown.
3. Option and Text/Image Element Order
The order of options and their values in the left panel determines the layering of design elements in the right panel. Options listed higher in the left panel will appear lower in the layer order on the right (from bottom to top).
This typically follows the logic of customers choosing options from top to bottom on the storefront, aligning with inside-out design layers (e.g., for a poster: background first, followed by other elements). Ensure options are correctly ordered to achieve the desired visual layering in the final product preview.
III. Setup Guide
STEP 1. Create Options
Go to the Basic tab in the app. Enter the option values (text, number, images, etc.) that users will interact with when customizing their product. You can also upload preview images here that will later be used to simulate how the final product looks.
These values and assets will be referenced in the Product Personalizer step, so be sure to label them clearly and consistently.
STEP 2. Enable Live Preview
Navigate to the Product Personalizer tab. Turn on the Live Preview switch for each option to display it on the product mockup.
Note: Not all input types support preview (e.g., text fields do, dropdowns may not). If an option doesn't support preview, the personalizer tab will not appear. Refer to Section I: Available Options for supported types.
STEP 3. Configure Live Preview by Option Type
3.1 Single Input (Text/Number)
Used for custom names, messages, numbers, etc.
Default value for preview:
Text: Sets the starting value shown in preview (e.g., "Your Name"). This can differ from the value in the Basic tab.
Color: Set default color of the text. If color selection is restricted, this becomes the fixed color.
Font: Choose from available Google Fonts or upload your own. This becomes the fixed font if font selection is restricted.
Size: Set the initial text size in pixels.
Position:
You can drag and move the text directly in the Preview Panel, or manually adjust the X-axis, Y-axis, Rotate, and Curved text values. Changes made in either the panel or settings will sync automatically.
X-axis: Moves text horizontally. Increase to shift right, decrease to shift left.
Y-axis: Moves text vertically. Increase to move down, decrease to move up.
Rotate: Tilts text clockwise or counterclockwise.
Curved text: Adds curvature. Increase for a stronger curve, set to 0 for straight text.
Linked with: Connect the text to other input types like:
Color Picker
Font Selector
Color swatch
Allow Customers To Change:
Text Position: Enable to allow customers to reposition the text within the preview. Disable to fix the text position.
Text Size: Enable to allow customers to resize the text mage. Disable to lock preset dimensions.
How the customer can edit the input field:
In live preview: Allows customers to make changes directly by interacting with the live preview.
With font size picker: Allows customers to customize text using font and size selectors.
Allow both: Enables both methods for maximum flexibility.
3.2 Multi-line Text
Ideal for messages or notes requiring multiple lines.
Default value for preview:
Text: Accepts line breaks.
Curved text: Not supported for multi-line.
Text Box Size: Set width and height.
Alignment: Align left, center, or right.
All other settings are the same as Single Input.
3.3 Option Types with Image Preview
Applies to: Swatch, Image swatch Dropdown, Button, Checkbox, Radio Button, Switch
Preview Image
Enhance the live preview for option types like Image Swatch, Dropdown, or Checkbox by configuring preview images in one of three ways:
Single Image: Use one image (set up in the Basic setting) for both the preview and the selector swatch. By default, any uploaded image will be used for both.
Dual Image: Upload a separate image in the Personalizer > Preview section to differentiate the preview image from the selector swatch.
Preview Only: If an image isn't uploaded in the selector Basic settings and only a preview image is added under Personalizer > Preview, the option will display as a text label in the selector but will show the uploaded image in the live preview. This approach is beneficial when swatches are unnecessary, yet a visual is required in the final design.
Preview Shape Choose a standard shape or upload a custom PNG to define how the image appears. Adjust the shape's size and unlock the aspect ratio for more customization.
Image Size & Position Manually set the Width and Height of the preview image or adjust directly in the Preview panel. Changes reflect in size fields; the aspect ratio is locked by default but can be unlocked. Fine-tune placement by dragging the image; the X-Axis, Y-Axis, and Rotate values will update accordingly.
Image scaling mode: Choose how the uploaded image fits within the preview shape
Fit – Displays the entire image, even if it leaves borders around the edges.
Cover – Fills the entire shape; parts of the image may be cropped.
Fit Width – Matches the shape’s width; may leave gaps at the top and bottom.
Fit Height – Matches the shape’s height; may leave gaps on the sides.
Fill – Stretches the image to completely fill the shape; may distort the image.
Allow Customers To Change:
Image Position: Enable to allow customers to reposition the image within the preview. Disable to fix the image position.
Image Size: Enable to allow customers to resize the image. Disable to lock preset dimensions.
Disable any option to lock these features.
💡 Tip: Assign a default value for each input to show a preview when the page loads.
3.4 Color Swatch
Used to change colors of text or elements on the product.
Linked Behavior: Can affect text color or switch images.
Preview Configuration: Same steps as for other image-based types.
Preview Image: To enable live preview for this option, please upload an image in Personalizer > Preview.
3.5 File Upload
Preview Shape: Choose a preset shape or upload a custom PNG to set the image boundary. The image will adapt to the chosen shape. Unlock the aspect ratio for flexible adjustments if required.
Preview Image: Upload an image here to serve as a placeholder. This image will appear in the preview area before the customer uploads their own.
Image Size: Specify the default Width and Height for the preview image manually or by adjusting it in the Preview Panel. Changes here will automatically update in the size settings. The aspect ratio is locked by default for proportion preservation but can be unlocked for custom resizing.
Image Position: Drag the uploaded image in the Preview Panel to reposition it. X-axis, Y-axis, and Rotate values will update in real time based on placement.
Image scaling mode: Choose how the uploaded image fits within the preview shape
Fit – Displays the entire image, even if it leaves borders around the edges.
Cover – Fills the entire shape; parts of the image may be cropped.
Fit Width – Matches the shape’s width; may leave gaps at the top and bottom.
Fit Height – Matches the shape’s height; may leave gaps on the sides.
Fill – Stretches the image to completely fill the shape; may distort the image.
Allow Customers To Change:
Image Position: Enable to allow customers to reposition the image within the preview. Disable to fix the image position.
Image Size: Enable to allow customers to resize the image. Disable to lock preset dimensions.
STEP 4. Assign Option Set to Products
After setting everything up, assign the option set to the correct products in your store.
The selected preview product must be re-selected here. Preview settings won't carry over unless this is done.
Ensure that all assigned products have similar base images to maintain accurate positioning.
📌 Note: Live preview will only work if the assigned products have matching dimensions to the preview mockup.
Last updated