How to Add Variant Images in Shopify (3 Easy Methods)

Introduction

When selling products with multiple options such as size, color, or style so customers expect the product image to update as they choose a variant. Shopify makes this possible by letting you assign variant-specific images so shoppers see exactly what they’re selecting. This not only improves the shopping experience but also reduces confusion, builds trust, and can boost conversions.

In this guide, you’ll explore how to add variant images in Shopify using three methods: directly in the Shopify Admin, with custom coding, or by using Shopify apps.

Why Add Variant Images?

Adding variant-specific images enhances the user experience by displaying customers with the exact product option they select. It builds trust by reducing confusion and lowering the chances of returns. When shoppers can clearly preview their chosen variant, they’re more likely to complete the purchase, boosting conversions. Plus, having clean and professional product pages strengthens your brand’s overall look and feel.

 

Methods for Adding Variant Images in Shopify

There are different methods for Adding Variant Images in Shopify. Some of these are listed below.

1. Assign Variant Images in Shopify Admin
2. Add Variant Images with Custom Coding
3. Add Variant Images using Apps

Method 1: Assign Variant Images in Shopify Admin

You can easily assign specific images to each product variant directly in the Shopify admin. This ensures that when customers select a different size, color, or style, the matching image updates automatically on the product page. Follow these steps to add Variant Images in Shopify Admin.

Step 1: Navigate to Shopify Admin > Products.

Step 2: Choose the product that you want to update.

Step 3: Upload all variant images in the Media section of the product.

Step 4: Scroll down to the Variants section and add variant images for each variant.

Step 5: Save the changes.

Step 6: When customers choose a variant, Shopify automatically swaps the product image.

 

Along with strong visuals, optimizing your product data also boosts trust and visibility. Learn how to Add Schema Markup to Shopify for better search rankings and click-through rates.

Method 2: Add Variant Images with Custom Coding

If your theme doesn’t support variant image switching by default, you can add it using custom code. By editing your theme’s files, you can display the correct image whenever a customer selects a different variant. Follow these steps to add Variant images using Custom Coding.

Step 1: Navigate to Shopify Admin > Products.

Step 2: Choose the product that you want to update.

Step 3: Upload all variant images in the Media section of the product.

Step 4: Scroll down to the Variants section and add variant images for each variant.

Step 5: Save the changes.

Step 6: Navigate to Online Store > Themes > Edit code.

Step 7: Go to the product-template.liquid or main-product.liquid file depending on the theme.

Step 8: Locate the variant picker code or add it to your desired location if it does not already exist. Replace the default dropdown color code with the Variant image swatches.

  
    <div class="variant-swatches">
      {% assign color_options = '' %}
      {% for variant in product.variants %}
        {% assign color_value = variant.option1 %}
        {% unless color_options contains color_value %}
          {% assign color_options = color_options | append: color_value | append: ',' %}
          <label class="swatch">
            <input 
              type="radio" 
              name="Color" 
              value="{{ color_value }}" 
              data-variant-id="{{ variant.id }}">
            <span 
              class="swatch-bg" 
              style="background-image:url('{{ variant.featured_image | default: product.featured_image | img_url: '200x200' }}');">
            </span>
          </label>
        {% endunless %}
      {% endfor %}
    </div>
  

Step 9: Add some CSS for Swatch styling in your theme.css or base.css file, depending on the theme.

  
    .variant-swatches {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 15px 0;
    }

    .swatch {
      position: relative;
      cursor: pointer;
    }

    .swatch input {
      display: none;
    }

    .swatch-bg {
      width: 45px;
      height: 45px;
      border: 2px solid #ddd;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      display: block;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .swatch:hover .swatch-bg {
      border-color: #333;
      transform: scale(1.05);
    }

    .swatch input:checked + .swatch-bg {
      border-color: #000;
      box-shadow: 0 0 0 2px #000 inset;
    }
  

Step 10: Save the changes.

Method 3: Add Variant Images using Apps

You can simplify the process of assigning images to product variants by using Shopify apps. These apps often offer features like bulk image uploads, automatic variant-image matching, and advanced display options without needing to edit code. Follow these steps to add Variant Images using the Shopify Apps.

Step 1: Navigate to Shopify Admin > Apps.

Step 2: Click on the App and sales channel button.

Step 3: Visit the Shopify App store.

Step 4: Search for the app, such as Globo Product Options, Variant.

Step 5: Install the App.

Step 6: Reconfirm the installation in the Shopify Admin.

Step 7: Click on the Create option set button.

Step 8: Click on the Add element button and add options of your choice, like Image Swatch.

Step 9: Select the image here.

Step 10: Select the products where you want to add this Option set.

Step 12: Navigate to Online Store > Themes > Customize.

Step 13: Check this box and save the changes.

Step 14: Navigate to the Product page in the Customizer and in the Product information section, add a block related to that app.

Step 15: Save the changes.

Some popular apps are listed below:

• Globo Product Options, Variant
• Easy Variant Images
• SA Variant Image Automator
• SC Product Options
• Color Swatch King: Variants

For additional no-code improvements, see: How to Change View Cart Color in Shopify (Easy Methods)

Conclusion

Adding variant images in Shopify is one of the simplest yet most powerful ways to improve your product pages. Whether you choose the built-in Shopify Admin method, apply custom coding for advanced layouts, or use apps for automation, showing customers the correct variant image ensures a clear, professional, and user-friendly shopping experience.

Want to maximize the impact of your product visuals? Our Shopify CRO Experts Services focus on boosting conversions through optimized layouts, while our Shopify SEO Agency helps your products rank higher and reach more shoppers.