> For the complete documentation index, see [llms.txt](https://easify.gitbook.io/easify-product-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easify.gitbook.io/easify-product-options/product-personalizer-live-preview/how-it-works.md).
# How It Works
Our **Product Personalizer** feature is designed to be simpler and easier to use for non-tech users compared to other advanced personalization apps, while still offering all the essential features you need.
If you’ve been using the app and know how to set up custom options, you can continue setting up your custom product options as before. The live preview settings build on the core option settings, adding an advanced layer rather than replacing them.
> ⭐️ If you’re new to the app, we recommend starting with the basics – *setting up options **without** live previews* – to get a feel for how the app works. Once you’re comfortable, come back here to learn how to enable and customize live previews.
{% hint style="info" %}
This feature is available from the **Premium** **plan**.
{% endhint %}
## Supported Option Types
**1. Text fields:**
* [Text Box](/easify-product-options/guide-to-options/28-option-types/text-box.md) (single-line)
* [Text Area](/easify-product-options/guide-to-options/28-option-types/text-area.md) (multi-line)
* [Number Box](/easify-product-options/guide-to-options/28-option-types/number-box.md) (numeric input)
These can be combined with [Font Picker](/easify-product-options/guide-to-options/28-option-types/font-picker.md), [Color Picker](/easify-product-options/guide-to-options/28-option-types/color-picker.md), or [Color Swatch](/easify-product-options/guide-to-options/28-option-types/color-swatches.md) options for preview purposes.
**2. Image upload:** [File Upload](/easify-product-options/guide-to-options/28-option-types/file-upload.md).
**3. Other option types:**
* [Dropdown](/easify-product-options/guide-to-options/28-option-types/dropdown.md)
* [Color Swatch](/easify-product-options/guide-to-options/28-option-types/color-swatches.md)
* [Image Swatch](/easify-product-options/guide-to-options/28-option-types/image-swatches.md)
* [Checkbox](/easify-product-options/guide-to-options/28-option-types/checkbox.md)
* [Button](/easify-product-options/guide-to-options/28-option-types/buttons.md)
* [Radio Button](/easify-product-options/guide-to-options/28-option-types/radio-buttons.md)
* [Switch](/easify-product-options/guide-to-options/28-option-types/switch.md)
* [Product List](/easify-product-options/guide-to-options/28-option-types/product-list.md)
* [Design Layer](/easify-product-options/guide-to-options/28-option-types/design-layer.md)
## Introduction to the Setting panels
### 1. Product Personalizer tab
Each option that supports live preview has a ***Product Personalizer*** tab, located at the top right of the option’s settings area (***Basic*** and ***Advanced** settings* are on the left).
*Example: Text Box*
{% stepper %}
{% step %}
### Add a Text Box
{% endstep %}
{% step %}
### Enable Live preview in Product Personalizer tab
{% endstep %}
{% endstepper %}
The *Product personalizer* tab includes the live preview configuration options. It works closely with the *Basic settings* and *Advanced settings*.
{% hint style="info" %}
Therefore, it’s best to complete the *Basic settings* and *Advanced settings* first **before** configuring the *Product personalizer*.
{% endhint %}
📌 For example:
* If a text field has a Default value in the *Basic settings*, that value will appear as the default preview text ("Value") in the *Product personalizer*.
* Similarly, an option value with an image set as default (pre-selected) in the *Basic settings* will use that image in the preview.
### 2. Set View
When enabling live preview, the first step is to set view. Make sure to do this before adjusting any other preview settings.
You can do it by clicking at the button **Set view**, or navigate to the **Set view tab** at the top left of your screen.
***a. Product image view***
💡 Choose the image that will be used as the background for product personalizer.
There are 2 background options you can choose from: *Main product image* and *Custom background*.
* **Main product image:** The preview of text or images will appear directly on the product’s main image.
If your product does not have variants, the preview will display on the **first image of the product.**
* If your product has multiple variants, the preview will adjust based on the selected variant’s specific image.
* If you want to show different options with different previews depending on the chosen variant, you can set up advanced conditional logic with Shopify variants.
{% hint style="info" %}
**Select a specific product for preview**: You must select a specific product or product variant to show in the Preview panel before configuring additional settings. Even if your option set is assigned to multiple products rather than just one, you still need to pick a **single product** to guide the preview setup.
{% endhint %}
* **Custom background:** If you prefer not to use the product's main image for the preview, you can upload a custom background image instead.
* The custom background can overlay the main product image either *from the start* or *once the customer uploads their image or selects options*.
📌 *For example:*
* If you sell custom phone cases, your main product image might show an angled view of the phone case with an example design.
* However, for customization, you might want to *use a blank phone case (a straight-on view) as the background,* making it easier for customers to personalize their product.
***b. Apply to***
After selecting the product image view (either your main product image or a custom background you upload), decide **which product image customers can preview their personalization on**:
* **All product images** (default): Display selected options on all product images. Customers can switch between all images while the option preview remains visible.
*Example:*
 
* **First product image only**: Display selected options on the first product image. If customers switch to other images, the preview will not appear.
*Example:*
* **Variant images only:** Customers can view variant images with the option preview visible. Switching to non-variant images hides the preview.
* **Last product image only:** The option preview shows only on the last image; switching to others hides it.
* **Specific product image:** Pick a specific product image to show the option preview; switching to others hides it.
### 3. Preview Canvas
Once the *Product personalizer/ live preview* is enabled for at least one option, you’ll see 2 sections in the Canvas: **View and Options.**
* *View*: Shows the product image (or your custom background) and how the selected options appear over it.
* *Options*: Displays the list of options as customers will see them on the storefront.
In the **View**, you can:
* Drag and reposition text or image elements directly on the preview.
* Click on any element in the preview to show controls that let you freely resize and rotate that element.
#### Option and Text/Image element order
The order of the options created in the left panel determines the layer order of the design elements in the right panel.
* Options higher in the left panel appear lower in the layer order in the right panel (bottom to top).
* This follows the logic of customers selecting options from top to bottom on the storefront, often matching the inside-out design layers (e.g., for a poster, the background is selected first, followed by other elements on top).
Keep this in mind when creating options to ensure the correct visual layering in the final product preview.
## How To Set Up the Product Personalizer
{% stepper %}
{% step %}
### Identify Which Options Require Live Preview
Decide which options can (or should) be visualized in the product preview. For example, if you sell Ornaments that customers can personalize with a photo and text, those options should appear in the live preview. You might include:
* **File Upload:** For customers to upload their photo.
* **Text Box** or **Text Area:** For customers to enter their personalized text.
* (**Optional)** **Font Picker**, **Color Picker** or **Color Swatch**: For customers to change text style and color.
> 💡 You can also add more options without previews to complete your option set before assigning it to your product.
> {% endstep %}
{% step %}
### Set Up Options in Basic & Advanced Settings First
Begin by setting up your options in the *Basic* and *Advanced settings* tabs as you normally would. Don’t worry about the *Product personalizer* tab at this stage.
> 💡 For example, if you’re adding a *Text Box*, you can configure its label, minimum/maximum characters, placeholders, default value, pricing, conditional logic, etc., before moving on to the live preview settings.
> {% endstep %}
{% step %}
### Enable the Live Preview in the Product personalizer tab
Once you have finished configuring the *Basic* and *Advanced* settings, open the *Product personalizer* tab and enable the live preview for the relevant options.
If an option does not need a preview, you can leave it disabled. Also, for option types that don’t support *Product personalizer*, this tab will not appear.
{% endstep %}
{% step %}
### Configuring the Live Preview
Each option type may have unique settings in the *Product personalizer* tab. Below are detailed instructions for each supported type.
**Text Box/ Number Box**
**Default text for preview**
**Value:** Displays the default text value in the preview.
* If a "Default value" is already set in the *Basic setting*s, it will automatically populate here.
* If no "Default value" is set in *Basic settings*, you must define one here (e.g., "Your text" or "Your name"). Changes made here will not sync back to *Basic settings*; they apply only to the live preview.
**Color:**
* Set a default color for the text in the preview.
* If customers are not allowed to choose a text color, the default color will be applied to the final product.
**Font:**
* Set a default font for the text in the preview.
* If customers are not allowed to choose a font, this default font will be applied to the final product.
* Select a font from Google fonts or upload custom fonts in the *Settings* page.
**Size:**
* Set a default size for the text in the preview.
* If customers are not allowed to change the text size, this size will be applied to the final product.
**Text Position**
Drag and move the text in the Preview Panel, or manually adjust the X-axis, Y-axis, Rotate, and Arc settings. Changes made directly in the preview panel will reflect in the settings panel, and vice versa.
* **X-axis:** Moves the text horizontally. Increase the value to shift the text to the right; decrease it to move it left.
* **Y-axis:** Moves the text vertically. Increase the value to move the text down; decrease it to move it up.
* **Rotate:** Rotates the text. Adjust the value to tilt the text clockwise or counterclockwise.
* **Arc:** Adds curvature to the text. Increase the value to create more curvature or set to 0 for straight text.
**Text Effects**
Display customer-entered text in a more realistic visual style directly on the product page using Text Effects.
Instead of showing plain text only, this feature helps simulate how the final personalized text may look when applied to the actual product. Depending on the effect you choose, customers can preview text that looks engraved, embossed, outlined, or glowing.
**Linked with**
If you allow customers to select fonts or colors, link the *Text Box* to a *Font Picker* or *Color Picker/Color Swatch*. Ensure the linked options are already created before linking.
* **Font Picker:** Allows font selection via a dropdown or font swatches (supports Google Fonts, custom fonts, or both).
* **Color Picker:** Lets customers choose any color from a palette.
* **Color Swatch:** Restricts color selection to specific colors you define.
**Allowed customers to:**
* **Change text position:** Enable this to let customers drag and reposition text in the preview. Disable it to lock the position.
* **Change text size:** Enable this to let customers adjust text size in the preview. Disable it to lock the size.
***
**Text Area**
The settings for *Text Area* are similar to those for *Text Box*, with a few differences:
* **Value:** Allow multiline default text (press "Enter" for line breaks).
* **Arc:** This setting is not available for *Text Area;* arcs can only be applied to *Text Box*.
* **Width** and **Height:** Define the dimensions of the text area frame.
* **Alignment:** Adjust text alignment (left, center, or right) within the frame.
***
**File Upload**
**Preview shape**:
Choose from basic shapes or upload a custom PNG. The uploaded image will fit into the selected shape. You can adjust or unlock the shape’s size ratio if needed.
**Image sizing mode:**
Choose how customers' uploaded images will be sized to fit the live preview container.
* Fit: The entire image is scaled so it fits inside the container.
* Cover: The image is scaled to completely cover the container.
* Fit Width: The image is scaled so its width matches the container’s width.
* Fit Height: The image is scaled so its height matches the container’s height.
* Fill: The image is stretched (not proportionally scaled) to exactly match both width and height of the container.
**Allow customers to**:
* **Change image position:** Enable this to let customers drag the uploaded image in the preview. Disable it to lock the position.
* **Change image size:** Enable this to let customers resize the uploaded images in the preview. Disable it to lock the size.
**Background removal**
Give your customers a seamless, professional customization experience by enabling automatic background removal on uploaded images. With this feature, customers’ images are instantly cleaned up the moment they upload.
**Image size**
Drag the file upload image in the Preview panel to adjust its position. The values for *X-Axis*, *Y-Axis*, and *Rotate* will update automatically.
Set the Width and Height of the uploaded image preview. You can adjust these manually or by dragging in the preview panel. Changes made in the panel will automatically update the size fields. By default, the aspect ratio is locked, but it can be unlocked for free customization.
***
**Image Swatch, Dropdown, Button, Checkbox, Radio Button, Product List, Switch, Color Swatch**
**Optional Image for Preview:** For certain option types, you can choose to upload images for each option value. This feature offers three different preview options:
* **Single Image for Selection and Preview:** Upload one image. This image is used both in the option selection and the live preview.
* **Separate Images for Selection and Preview:** Upload two images.
* First image: Shown in the option selection. Upload it in Basic Settings.
* Second image: Used in the live preview. Upload it in Product Personalizer.
* **Preview Image Only:** Upload only the second image. The preview uses this image, and the option selection will display only the option labels without image swatches.
You can mix and match these three methods for different option values within your product option.
**Preview shape**:
* As with the File Upload type, you can choose a basic shape or upload a custom PNG shape for the preview.
* After selecting a shape, you can unlock the aspect ratio and adjust the shape’s size if needed.
{% hint style="info" %}
**Tip:** It’s recommended to select a default option value in the *Basic settings*. This way, the image of that option value will appear in the Preview panel, making it easier to visualize the setup.
{% endhint %}
**Image size**:
Set the Width and Height of the option image preview. You can adjust these manually or by dragging in the preview panel. Changes made in the panel will automatically update the size fields. By default, the aspect ratio is locked, but it can be unlocked for free customization.
**Image position**:
Drag the option image in the Preview panel to adjust its position. The values for *X-Axis*, *Y-Axis*, and *Rotate* will update automatically.
**Allow customers to:**
* **Change image position:** Enable this to let customers drag the selected option image in the preview. Disable it to lock the position.
* **Change image size:** Enable this to let customers resize the selected option image in the preview. Disable it to lock the size.
**Multiselection - For Image Swatch, Button, Checkbox, Product List**
For option types that allow selecting multiple values, you can still set up a preview. However, consider these points:
* **Initial option image positions**: If you enable multiselect or if the option type inherently supports multiple selections (like *Checkbox*), you must configure a default position for each selected option. When customers select these options, they will appear in the positions you’ve set.
* **Allow customers to change image positions**: You can enable this so customers can rearrange multiple selected options themselves.
*Examples of Multiselection with Live Preview:*
* **Charm Bracelets**: Customers can select multiple charms (hearts, initials, symbols) to add to a bracelet, and see them appear together in the preview.
* **Pizza Toppings**: Customers can choose multiple toppings and see them layered on the pizza in real time.
* **Gift Basket Items**: Customers can pick multiple items to include, and the preview will show the basket filled with their selections.
* **Birthday Cakes**: Customers can add candles, toppers, or decorations and see them appear on the cake preview as they select them.
***
**Color Swatch**
A *Color Swatch* can be linked with text fields to choose text colors that will show in the preview, or it can function independently.
Unlike option types that can directly use image swatches for preview, a *Color Swatch* requires you to **upload an image** **for each color** option value.
Other settings in the *Product personalizer* tab for *Color Swatch* are similar to those for the option types that support images.
{% endstep %}
{% step %}
### Assign the Option Set to Relevant Products
**Assign the Option Set:**
* Select the product(s) you want the option set to appear on.
* If you don’t assign the option set to any products, it won’t show up on your store.
**Re-select the Preview Product:**
* Even if you selected a product for the Preview panel earlier, you must select it again here.
* The selected product in the Preview panel is only for preview purposes and does not apply to the actual product assignments.
**Ensure Image Consistency:**
* If you’re assigning the option set to multiple products, make sure their images are similar.
* This consistency ensures that the defined text or image positions look good on all assigned products.
{% endstep %}
{% endstepper %}
## Learn more
* [What Is Product Personalizer?](/easify-product-options/product-personalizer-live-preview/what-is-product-personalizer-live-preview.md)
* [Ready-to-use Templates with Product Personalizer](/easify-product-options/product-personalizer-live-preview/ready-to-use-templates-with-product-personalizer.md)
* [Upcoming Features](/easify-product-options/product-personalizer-live-preview/upcoming-features.md)
### Need Assistance?
If you run into any challenges while configuring your product personalizer, feel free to reach out to us for assistance through our convenient **in-app live chat**, or by sending an email to . We're here to help!
