Articles on: Product Options Personalizer

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:

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:

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.

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

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.

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.

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.

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

explainsWhatsApp: +91 8511963839. We’re happy to help 😊

Feedback:

Found this helpful? ✅ Leave a Review

Updated on: 04/06/2026

Was this article helpful?

Thank you!