# 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fif8bqp84lOvFTrNusOIk%2Fimage.png?alt=media&#x26;token=809398f4-47d1-4203-bcf8-5fa584e77538" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FVQC8EaQeHUrwWQIqfz7C%2Fimage.png?alt=media&#x26;token=71876800-aaae-4ba5-90ba-1b8b47214621" alt=""><figcaption><p>Sort group variant</p></figcaption></figure>

#### Add main image for variant group

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FJx3A2D95GTx9eKHc0Xq3%2Fimage.png?alt=media&#x26;token=3735879c-3448-4c6d-a1b7-2711343ca554" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FXKvAiqzhq4DMIXPrUdQZ%2Fimage.png?alt=media&#x26;token=63ec5136-f190-4856-b365-e33a3d72b8ba" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FpFq5gu7JIW0uOyzWbiU5%2Fimage.png?alt=media&#x26;token=4296bd9e-0c36-41f8-b424-909cefe49388" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FpIQ2EPhRN6f3V2Yll7c0%2Fimage.png?alt=media&#x26;token=418a9c71-0c1b-4de6-b1d4-361ca3529ab3" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FmUbArV77DNZmjKIiDdLZ%2Fimage.png?alt=media&#x26;token=be14288d-88ab-4663-bd6e-845b778a0ba3" alt=""><figcaption><p>Enable dynamic swatch</p></figcaption></figure>
{% endstep %}

{% step %}

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

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FQ37R9jQt13JXom3ZOUxP%2Fimage.png?alt=media&#x26;token=6a221cee-7113-4e62-8e27-335096c92303" alt=""><figcaption><p>Before click variant image</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FIUw1i52545tff2QAjxbg%2Fimage.png?alt=media&#x26;token=537038d4-26b6-4ddf-89c2-fd803fbed8ef" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FatHOgMiGa8ivbpv4brVI%2Fimage.png?alt=media&#x26;token=db9fc75d-944c-4063-8500-a7f3db9ecd34" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FZ4MzaVGFcU0leYAPgRT1%2Fimage.png?alt=media&#x26;token=ad384600-e576-4865-8006-243a8b15407a" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FzAQG0nODJngSRbcFXTX6%2Fimage.png?alt=media&#x26;token=34164d4f-fb00-4b27-b81c-89b97821f55c" alt=""><figcaption><p>Demo</p></figcaption></figure>
{% endstep %}
{% endstepper %}

***

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