> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/options/product-personalizer-live-preview/general-look.md).

# General Look

The **Product Personalizer** function allows you to show a **live option preview** directly on the main product images.\
This helps customers see how their selected options (e.g., text, colors, uploads) will look on the product before purchasing.\
\
For the detailed instruction, you can refer to the video here**:** [**How to Setup Live Preview for Custom Products in Shopify with Globo Product Options** ](https://youtu.be/Q8EwrbBIs98?si=Pwy5XGLWk_CCOJkP)

### <mark style="color:blue;">Supported Option Types</mark>

Not all option elements support live preview. Currently, the following option types are supported:

* **Text / Text area**
* **Number**
* **File Upload**
* **Dropdown / Color Dropdown / Image Dropdown**
* **Swatch / Color Swatch / Image Swatch**
* **Radio Button**
* **Checkbox**

### <mark style="color:blue;">Personalize Panel</mark>

* Each option that supports live preview has a **Product Personalizer tab**.
* You can find it in the **top-right corner** of the option’s settings area.
* Other settings (**Basic** and **Advanced**) remain on the left panel.

<figure><img src="/files/F1xRFBelIawJLaSgXbzw" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Preview Panel Setup</mark>

The **Preview Panel** controls how your option preview is displayed on the product image.

### <sup>1. Enable Personalize Editor</sup>

* Go to the **right tab** of the option settings.
* Switch on the toggle **“Show Personalize Editor”**.

### <sub>2. Select Background</sub>

You can choose what background to use for the preview:

* **Product image** – Use the product image itself as the background.

<figure><img src="/files/xmI79X6L8MluAVXizJom" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/GTaAYtpVUPfwl3u9Folw" alt=""><figcaption></figcaption></figure>

* **Custom image** – Upload your own background image to replace the product image.

<figure><img src="/files/sk6fIkG5nOYJXmSITIf3" alt=""><figcaption></figcaption></figure>

### <sub>3. Set Conditions to Apply</sub>

Choose which product images the personalization will be applied to:

* **All product images** – Apply preview to every product image.
* **First product image only** – Apply preview to the first product image.
* **Last product image only** – Apply preview to the last product image.
* **Specific product image** – Select a particular product image to apply the preview.<br>

<figure><img src="/files/EWDHJRiV3DhEouCpZ6ZO" alt=""><figcaption></figcaption></figure>

📧 **Need Help?**\
If you run into any issues while setting up your option set, feel free to reach out to us at **Chat** or email [**contact@globo.io**](mailto:contact@globo.io)**.**

We’re always here and happy to help — with sincerity and care!