Reuseable contents
Basic Option Settings:
Advanced Option Settings:
2. Price display type
Decide whether to show or hide the additional price on the slider interface.
3. Show price
Customize how pricing is displayed with these options:
Only Option Value: Show price next to the option value.
Only Option Label: Show price next to the label.
Show All: Display prices with both label and value for maximum transparency.
4. Required field
Make this option mandatory, ensuring that customers must select a color before proceeding with their purchase.
9. One time charge
This setting allows you to modify how additional charges are applied to a specific option value. Normally, the extra charge for an option is multiplied by the quantity of the product purchased (e.g., an additional charge of $10 would become $50 if the quantity is 5). However, by enabling the "One time charge" feature, the extra charge will only be added once, regardless of the product quantity. This is useful when you want to apply a flat fee for certain options without scaling the charge with the number of items purchased.
5. Change product image on option selection
When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.
Change hint type
How to change product image upon option selection
5. Swatch title display
Control the visibility of the swatch title by choosing from the following options: "Default," "Show option value title," or "Hide option value title." This helps you tailor the display based on your design preferences.
8. Tooltip display
Default: Display only the selection's image on hover.
Tooltip as value: Show the selection image and option value on hover.
Tooltip as description: Display the selection's image and its description on hover.
1. Change product image on option selection
When the product image alt text aligns with the option value labels and the theme setup is correct, enabling this feature will update the product image according to the selected option.
4. Conditional Logic
Allows the Option Group to be displayed or hidden based on customer selections. This is useful for showing the group only when specific criteria are met.
III. Set up guides
Create option
In the Basic tab, enter option values and upload an image that matches or is associated with the product variant you want shown.
The option value you created here will be used in later steps.
How to create option
Live Preview 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 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.
Text Position:
Drag in preview panel
Or manually set values:
X (horizontal position)
Y (vertical position)
Rotation (angle in degrees)
Arc (curvature)
Linked Options: Connect the text to other input types like:
Color Picker
Font Selector
Customer Permissions:
Allow user to reposition text
Allow user to resize text
3.2 Multi-line Text
Ideal for messages or notes requiring multiple lines.
Value: Accepts line breaks.
Arc: 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 File Upload
Allows users to upload custom images (e.g., logos, photos).
Preview Shape:
Choose from default shapes (e.g., circle, square)
Or upload a transparent PNG mask
Aspect Ratio: Lock or unlock the ratio when resizing.
Size and Position:
Drag and drop in panel
Or manually input X, Y, Width, Height, and Rotation
Customer Permissions:
Enable/disable image repositioning
Enable/disable resizing
3.4 Option Types with Image Preview
Applies to: Swatch, Dropdown, Button, Checkbox, Radio, Product List, Switch
Preview Image Types:
Single Image: Same image is used for both selection and live preview
Dual Image: One image for selection, one for preview
Preview Only: No selection image; preview-only visual
Preview Shape: Upload PNG or select from standard options.
Image Positioning:
Set width/height
Adjust X, Y coordinates
Rotate if needed
Customer Permissions:
Allow image repositioning
Allow resizing
💡 Tip: Assign a default value for each input to show a preview when the page loads.
3.5 Multi-selection
Applies to: Image Swatch, Button, Checkbox, Product List
Default Image Positions: Set where each selected image will appear (X, Y).
Customer Permissions: Allow user to reposition multiple selected items.
Common Use Cases:
Charm bracelets (multiple charms)
Pizza toppings (layered ingredients)
Gift baskets (multiple visible items)
Birthday cakes (add decorations)
3.6 Color Swatch
Used to change colors of text or elements on the product.
Linked Behavior: Can affect text color or switch images.
Image Upload: Each color value requires a separate image.
Preview Configuration: Same steps as for other image-based types.
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