> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://setubridge.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

#  Set up Multiple Color Variants & Image Mapping

Allow customers to select from multiple color variants while automatically displaying the corresponding variant image. This feature helps customers visualize their selection in real time, creating a more engaging shopping experience and improving purchase confidence.

Display multiple color variants in dropdown, button, or swatch formats, automatically switch product images based on the selected color, keep customization options available across all color variants, improve product visualization and reduce customer confusion, use Shopify variant images for a seamless and scalable setup, and support personalized products with dynamic previews.

This guide will help you create multiple color variants and display the corresponding variant image when a customer selects a color option.


### Video Guide
Watch our quick video tutorial to learn how to set up color variants and automatically display the corresponding variant images on your storefront.
🎥 **Video Tutorial:** 
${frame}[Set up Multiple Color Variants & Image Mapping](https://www.youtube.com/embed/eC1pn7g6Wp8?si=V6R3KnwJZsP4Rdzy)


**Example:**
When a customer selects **Black**, the black product image is displayed. When they select **White**, the white product image is displayed automatically, providing a real-time preview of the chosen color variant.

||| Note: Before configuring Variant Images in Product Options Personalizer, ensure that all required variants (Color, Size, Style, etc.) have already been created in your Shopify product. Variant image mapping relies on Shopify variants being configured correctly.


# Steps: 

1. Select the product:- Open **SB: Product Options** → Click **Products** from the left sidebar → Select the product you want to configure for color variants → Ensure the product is enabled → Click **Edit**.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/image_113cirs.png)


2. **Enable Variant Images :-  Open the template editor → Click the Side Settings (⋮)** menu for the side you want to configure → Select **Edit Side** → Scroll to the **Variant Images** section → Click **Turn On** to enable Variant Images

![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/merged-4_k1zs00.png)


3.  **Assign Images to Each Variant** : In the **Variant Images** section → Select the option that will control image switching (e.g., **Colors**) → Click **Upload** to add a new image or **Choose** to select an existing image from your product gallery → Assign the corresponding image to each variant value (White, Black, Forest Green, Gold, Maroon, etc.) → Repeat the process for all variant options → Click **Save**.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/merged2_9sghxy.png)


**Important:** Make sure each variant is mapped to the correct image according to its color. For example, the **White** variant should use the white product image, **Black** should use the black product image, **Forest Green** should use the green product image, and so on. Incorrect image mapping may cause customers to see the wrong product image when selecting a color variant.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/image_rj8h2v.png)




4. **Verift it on fron store** : Open the product page on your storefront → Select a color variant (e.g., White, Black, Forest Green, Gold, or Maroon) → Verify that the product image changes automatically according to the selected color → Test all available variants to ensure the correct images are displayed.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/image_1ugr6cl.png)



### Result
Once configured, customers can select a color variant and instantly view the corresponding product image. This creates a more interactive shopping experience and helps customers visualize the selected product before purchase.


### Need Help?
If you need help setting up translations or want assistance tailoring them for your store, feel free to contact our support team at support@setubridgeapps.com or on 
explains**WhatsApp: +91 8511963839**. We’re happy to help 😊


###### Feedback:

|| Found this helpful? ✅ [Leave a Review](ttps://apps.shopify.com/prescription-eye-contact-lens#modal-show=ReviewListingModal)