Shopify App Documentation

Echo Swatch & Variant Images

Complete user documentation for setting up image swatches, color swatches, and variant-specific product galleries.

Start Setup View Tutorials
Main Product
Thumb 1
Thumb 2
Thumb 3
Thumb 4
ECHO STUDIO

Pegasus Trail

Professional Grade Studio Equipment

Color: Cyan

Sage
Onyx
Silver
Overview

App Overview

Echo Swatch & Variant Images helps Shopify merchants display the right product images for every selected variant. It keeps product pages clean, organized, and easy to shop.

Clean Product Gallery

Hide unrelated images and show only the media connected to the selected variant.

Beautiful Swatches

Use image swatches and color swatches to improve product selection.

Feature Breakdown

Feature Description Benefit
Variant Image Filtering Display only selected variant images. Cleaner gallery
Image Swatches Use product images as swatch buttons. Visual selection
Color Swatches Show color options as clickable swatches. Better UX
Swatch Customization Control size, shape, and active styles. Matches branding
Live Preview Preview product page behavior inside the app. Easy testing
Mobile Optimized Responsive storefront experience. Better mobile shopping

How It Works

Before

A customer selects one variant, but unrelated images are still visible in the product gallery.

  • Messy product gallery
  • Customer confusion
  • Lower product clarity
After

Only images related to the selected variant are displayed automatically.

  • Clean product gallery
  • Better shopping experience
  • More professional storefront

Getting Started

1
Install the App

Install Echo Swatch & Variant Images from the Shopify App Store.

2
Open the Dashboard

Go to Shopify Admin → Apps → Echo Swatch & Variant Images

3
Enable App Embed

Open theme customizer, enable Echo Swatch & Variant Images from App Embeds, then save.

4
Configure Products

Assign variant-wise images manually or use AI Auto Assign to automatically match and assign images for each variant with one click.

5
Manage Swatch

Customize variant swatches with custom colors or images to match your store branding and improve the variant picker experience.

Setup & Configuration Guide

Use this workflow to configure a product:

  1. Select the product you want to configure.
  2. Choose the variant option, such as Color, Style, or Material.
  3. Drag images from the Media Tray into the correct variant group, or use AI Auto Assign to automatically match images with variants.
  4. Save configuration.
  5. Preview the product page and test variant switching.

Variant Image Features

Variant-Specific Galleries

Create a separate image gallery for each variant value.

Smart Image Filtering

Automatically hide unrelated images when customers select a variant.

Multiple Variant Support

Works with Color, Style, Material, Pattern, Finish, and more.

Live Preview

Preview selected variant images before publishing.

Swatch Features

Swatch Type Use Case Example
Image Swatches Use product images as selectors. Shoes, bags, apparel
Color Swatches Use color blocks as selectors. Black, Beige, Blue
Rounded Swatches Soft modern appearance. Fashion stores
Circle Swatches Traditional color picker style. Beauty, accessories

UI Explanation

Media Tray

Shows product images that can be assigned to variants.

Assignment Board

Controls which images belong to each variant value.

Live Preview

Shows how the storefront product page will behave.

Swatch Settings

Customize swatch shape, size, image display, and active state.

Step-by-Step Tutorials

Open product configuration, select the variant option, drag images into the correct variant group, save, and preview.

Go to Manage Swatch → Customize Appearance, select shape and size, then save changes.

Choose Square, Rounded, or Circle swatches. Adjust swatch size, border, and active selection style to match your store theme and branding.

Tips & Best Practices

Use High-Quality Images

Clear images improve trust and product understanding.

Keep Image Groups Clean

Only assign related images to each variant.

Test on Mobile

Make sure swatches are easy to tap on smaller screens.

Use Consistent Variant Names

Use clean names like Black, Brown, Blue, or Beige.

Troubleshooting

Problem Possible Cause Solution
Images are not changing Images not assigned or app embed disabled Recheck assignments and enable app embed
Swatches not showing Swatches disabled, app embed disabled, or theme conflict Enable swatches, check app embed settings, and refresh the storefront
Gallery is cluttered Too many unrelated images assigned Organize image groups properly

FAQ

Echo Swatch is designed to work with most modern Shopify themes. Some themes may require app embed activation or small compatibility adjustments.

Yes, Echo Swatch also supports popular Shopify page builder apps, allowing you to display variant swatches and variant-wise images seamlessly on custom product and landing pages. However, some page builders may require minor compatibility adjustments depending on their custom structure or scripts.

Yes. Each variant can have its own dedicated image gallery with multiple product images.

Yes. You can customize swatch shape, size, color style, image style, and active selection states.

Echo Swatch is designed to be lightweight and optimized for storefront performance.

Need more help?

Our support team is available 24/7 to assist with your setup.

Email: binaryvines@gmail.com