# 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@globosoftware.net>**.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.globo.io/options/product-personalizer-live-preview/how-it-works.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.