> 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/how-it-works.md).

# How It Works

This document shows you how to set up the live preview for each option element. 

In each option element, please enable the Personalize Setting. 

{% stepper %}
{% step %}

### Text - Textarea - Number

* If a **Default value** is set in **Basic settings**, it will automatically appear in the live preview.
* If no default is set, you’ll need to enter one here (e.g., *“Your text”* or *“Your name”*).
* Any changes you make here apply **only to the live preview** and will not sync back to the Basic settings.

<mark style="color:blue;">**Adjust**</mark>:&#x20;

* Text color&#x20;
* Font size
* Text alignment
* Font style
* Font family

<mark style="color:blue;">**Control how the preview element appears on the product image:**</mark>

* **Position** – Adjust placement using **X-Axis** and **Y-Axis**.
* **Opacity** – Set transparency of the preview.
* **Rotation** – Rotate the element to the desired angle.

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

<mark style="color:blue;">**Custom effect for text preview:**</mark>

* **No effect**
* **Stroke**
* **Neon light**&#x20;
* **Emboss**

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

<mark style="color:blue;">**Allow customers to interact with the preview by enabling:**</mark>

* **Move** – Let customers change the position.
* **Resize** – Let customers adjust the size.
* **Rotate** – Let customers rotate the preview.
  {% endstep %}

{% step %}

### File Upload

When a customer uploads a file, the uploaded image will appear directly on the main product image as a preview.\
\ <mark style="color:blue;">**Image Shape:**</mark>

* Select from the available preset shapes: You can control how the preview looks by changing its **shape** Or upload your own custom shape.

The customer’s uploaded file will be displayed within the shape you configure.

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

<mark style="color:blue;">**Background Mode:**</mark>

This setting controls how the background image is displayed inside the preview shape area:

* **Stretch** – Forces the image to fill the entire shape (may distort).
* **Cover** – Scales the image to cover the entire shape while keeping proportions (parts may be cropped).
* **Contain** – Scales the image to fit inside the shape without cropping (may leave empty space).
* **Full Width** – Stretches the image across the full width of the preview area.
* **Full Height** – Stretches the image across the full height of the preview area.

<mark style="color:blue;">**You can control how the preview element appears on the product image:**</mark>

* **Position** – Adjust placement using **X-Axis** and **Y-Axis**.
* **Opacity** – Set transparency of the preview.
* **Rotation** – Rotate the element to the desired angle.

<mark style="color:blue;">**You can also allow customers to interact with the preview by enabling:**</mark>

* **Move** – Let customers change the position.
* **Resize** – Let customers adjust the size.
* **Rotate** – Let customers rotate the preview.

<figure><img src="/files/tLY5C8MxPC9qg0OeF3s5" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Dropdown - Color Dropdown - Image Dropdown

For each dropdown value, you can **upload an image**. When a customer selects a value, the corresponding image will display on the main product image.

<mark style="color:blue;">**Image Shape:**</mark>

* Select from the available preset shapes: You can control how the preview looks by changing its **shape** Or upload your own custom shape.

The customer’s uploaded file will be displayed within the shape you configure.

<mark style="color:blue;">**Background Mode:**</mark>

This setting controls how the background image is displayed inside the preview shape area:

* **Stretch** – Forces the image to fill the entire shape (may distort).
* **Cover** – Scales the image to cover the entire shape while keeping proportions (parts may be cropped).
* **Contain** – Scales the image to fit inside the shape without cropping (may leave empty space).
* **Full Width** – Stretches the image across the full width of the preview area.
* **Full Height** – Stretches the image across the full height of the preview area.

<mark style="color:blue;">**You can control how the preview element appears on the product image:**</mark>

* **Position** – Adjust placement using **X-Axis** and **Y-Axis**.
* **Opacity** – Set transparency of the preview.
* **Rotation** – Rotate the element to the desired angle.

<mark style="color:blue;">**You can also allow customers to interact with the preview by enabling:**</mark>

* **Move** – Let customers change the position.
* **Resize** – Let customers adjust the size.
* **Rotate** – Let customers rotate the preview.
  {% endstep %}

{% step %}

### Button - Color Swatch - Image Swatch&#x20;

For each value of Button - Color Swatch - Image Swatch, you can upload an image. When customers select that value, the corresponding image will automatically display on the main product image.

<mark style="color:blue;">**Image Shape:**</mark>

* Select from the available preset shapes: You can control how the preview looks by changing its **shape** Or upload your own custom shape.

The customer’s uploaded file will be displayed within the shape you configure.

<mark style="color:blue;">**Background Mode:**</mark>

This setting controls how the background image is displayed inside the preview shape area:

* **Stretch** – Forces the image to fill the entire shape (may distort).
* **Cover** – Scales the image to cover the entire shape while keeping proportions (parts may be cropped).
* **Contain** – Scales the image to fit inside the shape without cropping (may leave empty space).
* **Full Width** – Stretches the image across the full width of the preview area.
* **Full Height** – Stretches the image across the full height of the preview area.

<mark style="color:blue;">**You can control how the preview element appears on the product image:**</mark>

* **Position** – Adjust placement using **X-Axis** and **Y-Axis**.
* **Opacity** – Set transparency of the preview.
* **Rotation** – Rotate the element to the desired angle.

<mark style="color:blue;">**You can also allow customers to interact with the preview by enabling:**</mark>

* **Move** – Let customers change the position.
* **Resize** – Let customers adjust the size.
* **Rotate** – Let customers rotate the preview.
  {% endstep %}

{% step %}

### Radio Button - Checkbox&#x20;

For each value of Radio button or Checkbox, you can upload an image. When customers select that value, the corresponding image will automatically display on the main product image.

<mark style="color:blue;">**Image Shape:**</mark>

* Select from the available preset shapes: You can control how the preview looks by changing its **shape** Or upload your own custom shape.

The customer’s uploaded file will be displayed within the shape you configure.

<mark style="color:blue;">**Background Mode:**</mark>

This setting controls how the background image is displayed inside the preview shape area:

* **Stretch** – Forces the image to fill the entire shape (may distort).
* **Cover** – Scales the image to cover the entire shape while keeping proportions (parts may be cropped).
* **Contain** – Scales the image to fit inside the shape without cropping (may leave empty space).
* **Full Width** – Stretches the image across the full width of the preview area.
* **Full Height** – Stretches the image across the full height of the preview area.

<mark style="color:blue;">**You can control how the preview element appears on the product image:**</mark>

* **Position** – Adjust placement using **X-Axis** and **Y-Axis**.
* **Opacity** – Set transparency of the preview.
* **Rotation** – Rotate the element to the desired angle.

<mark style="color:blue;">**You can also allow customers to interact with the preview by enabling:**</mark>

* **Move** – Let customers change the position.
* **Resize** – Let customers adjust the size.
* **Rotate** – Let customers rotate the preview.
  {% endstep %}
  {% endstepper %}

📧 **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!