Display real-time product data as variations change

On the collection page we can show a preview of the selected variant including:

✅ 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

1

Go to the Shopify admin product detail

Add multiple variants option variant

E.g: Color: White, Pink, Black, Green

Add variant color/model

Sort group variant by color/model

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

Sort group variant

Add main image for variant group

Add main image variants

Save product

2

Sync data agian in GLOBO Color Swatch

Go to Dashboard GLOBO Color Swatch, click button Update data

Update data

3

Setup option displayed as type color swatch or image

1. In options list, find your variant of product

2. Setup type variant is in the types:

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

Set up type option

4

Enable variant show on collection and save

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

Enable variant option show on collection page

5

Enable setting "Dynamic swatch" in setting GLOBO Color Swatch

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

Enable dynamic swatch

6

Demo

Before click variant image

After click variant image

---

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.

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.

1

Setting

• In setting page -> enable dynamic variant image

Enable dynamic variant image

2

Setup combine variant with multiple image & price

• example:

3

How it work

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).

4

Demo

• Try it on demo site

Demo

---

For further assistance, contact us via [email protected]