> 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/product-variant-swatch/display-on-collection-page-home-page-and-other-pages/display-real-time-product-data-as-variations-change.md).

# Display real-time product data as variations change

✅ Product title - variant name

✅ Product price of the current variant

✅ Main image product of the current variant

✅ URL product with variant

✅ Dynamic variant image

❌ Second image product of the current variant (no)

## **Benefits**

* **Instant image updates:** Variant images change immediately through the app’s dynamic JavaScript feature, ensuring smooth and responsive performance without reloading the page.
* **Higher engagement:** Shoppers can explore multiple product options directly on the collection page with just one click.
* **Enhanced user experience (UX):** Customers can easily visualize the exact product variant they’re interested in without navigating to the product page.
* **Better conversion rate:** Fewer steps and a faster preview process encourage shoppers to add products to their cart more quickly.

***

## Quick setup dynamic swatch

{% stepper %}
{% step %}

### <mark style="color:blue;">Go to the Shopify admin product detail</mark>

#### Add multiple variants option variant

<mark style="color:purple;">E.g: Color: White, Pink, Black, Green</mark>

<figure><img src="/files/KXoOZraSmAPpUYtBj5Cl" alt=""><figcaption><p>Add variant color/model</p></figcaption></figure>

#### Sort group variant by color/model

The variant displayed as a color/image must appear before the variant displayed as a button

<figure><img src="/files/HUt6Y4Fbacdk8EQZzxSb" alt=""><figcaption><p>Sort group variant</p></figcaption></figure>

#### Add main image for variant group

<figure><img src="/files/FOdAsV0y0R4C0TrDbna6" alt=""><figcaption><p>Add main image variants</p></figcaption></figure>

#### Save product

{% endstep %}

{% step %}

### <mark style="color:blue;">Sync data again in GLO Color Swatch</mark>

Go to **Dashboard** GLO Color Swatch, click **Update data button**

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

{% step %}

### <mark style="color:blue;">**Setup option displayed as type color swatch or image**</mark>&#x20;

1. In **options list,** find your variant of product&#x20;
2. Setup type variant is in the types:&#x20;

```
✅ Swatch
✅ Pill swatch
✅ Automated swatch
✅ Image swatch with price
✅ Custom swatch with price
✅ Swatch dropdown
✅ Image dropdown
```

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

{% step %}

### <mark style="color:blue;">Enable variant show on collection and save</mark>

In **options list,** enable your option vairant show on collection page and save

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

{% step %}

### <mark style="color:blue;">Enable "Dynamic swatch" option</mark>

Go to **Settings** page, enable **dynamic swatch** function on collection, and **save.**

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

{% step %}

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

<figure><img src="/files/jwmaxhyB9C072dN6lXxY" alt=""><figcaption><p>Before click variant image</p></figcaption></figure>

<figure><img src="/files/jPgG43bFwejYVvM1GkdV" alt=""><figcaption><p>After click variant image</p></figcaption></figure>
{% endstep %}
{% endstepper %}

***

## **Dynamic variant image**

**🎯 Benefits**

* Provides a **seamless and intuitive shopping experience** — customers always see the correct images and prices for their selected variants.
* Reduces confusion when browsing products with multiple options.
* Automatically synchronizes all variant displays without requiring page reloads or manual selection.

{% hint style="info" %}
How it work?

* When the user clicks on a variant, the main product image will automatically switch to the image corresponding to that variant.
* For example: When the user selects the “Red” color and the “Swimsuit” style, the product image instantly changes to display the Red Swimsuit.
  {% endhint %}

{% stepper %}
{% step %}

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

* In setting page -> enable **dynamic variant image**

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

{% step %}

### <mark style="color:blue;">Setup combine variant with multiple image & price</mark>

* example:

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

{% step %}

### <mark style="color:blue;">How it work</mark>

This feature ensures that **images, prices, and variant options** are automatically synchronized when customers select different options such as *Color*, *Style Sport*, or *Size* on the product page.

**🔹 Example Scenario**

Suppose a product has three variant groups:

* **Color:** Red, Blue
* **Style Sport:** Bikini, Swimm
* **Size:** X, S, M, L

**🔹 Behavior**

1. **When a customer selects a Color:**
   * The product image updates to **reflect the selected color** (e.g., choosing “Red” shows the red product image).
   * The *Style Sport* options (*Bikini* and *Swim*) will **display images** corresponding to the selected color.
   * If *Style Sport* is displayed as a “swatch with price,” the **price** of each style will **update automatically** based on the selected color.
   * The *Size* options will only show **sizes available** for that color.\
     If *Size* is displayed as “button with price,” the **price for each size** will also **update** accordingly.
2. **When a customer selects a Style Sport:**
   * The images for each color (*Red* and *Blue*) will automatically **update** to display the selected style (e.g., selecting *Bikini* shows both red and blue Bikini images).
     {% endstep %}

{% step %}

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

* Try it on [demo site](https://nga-appstore.myshopify.com/collections/dynamic-variant-image)&#x20;

<figure><img src="/files/EhBDnzIbCpBAaHmd23ll" alt=""><figcaption><p>Demo</p></figcaption></figure>
{% endstep %}
{% endstepper %}

***

**💬 Need help?**

Email us at **📧 <contact@globo.io>** - we’re happy to assist!