# 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 agian in GLOBO Color Swatch</mark>

Go to **Dashboard** GLOBO Color Swatch, click button **Update data**<br>

<figure><img src="/files/kZHOKhq1ZAmpmpChRgEC" alt=""><figcaption><p>Update data</p></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/qbxvfFSbuOMsNaqbtrk9" alt=""><figcaption><p>Set up type option</p></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/VecOHOLPzsIAbdE7xJDV" alt=""><figcaption><p>Enable variant option show on collection page</p></figcaption></figure>
{% endstep %}

{% step %}

### <mark style="color:blue;">Enable setting "Dynamic swatch" in setting GLOBO Color Swatch</mark>

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

<figure><img src="/files/Rm04fZnfA3nShV5q2daa" alt=""><figcaption><p>Enable dynamic swatch</p></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/kTqFDqWKeQnAMi28GaCK" alt=""><figcaption><p>Enable dynamic variant image</p></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 *Swimm*) 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 %}

***

For further assistance, contact us via <mark style="color:blue;"><hi@globosoftware.net></mark>


---

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