Variant Images

Tired of Shopify only allowing a single image per variant—or showing a cluttered gallery of every color at once? With Aris Color Swatch, you can assign multiple gallery photos (up to 50 images per option value or variant) directly from your Shopify Media library. When shoppers click a swatch on the Product Page or hover over a swatch on the Collection Page, the gallery updates instantly to show only the matching photos!

Follow this quick guide to organize your variant images in minutes!

1. Click Variant Images in the left sidebar menu.

2. Browse your catalog, filter by All, Assigned, or Unassigned tabs, or use the search bar to find a product.

3. Click Assign images on the product you want to configure to open its image workspace.

At the top of the product workspace, use the mode switcher to choose how images should be organized for this product:

• Assign by Options (Recommended): Assign a group of photos to an option value (e.g., Color = Red). Whenever a shopper selects Red, they will see all Red photos regardless of which Size or Material they pick. Switch between option tabs (e.g., Color, Size) at the top of the left card if needed.

• Assign by Variants: Assign photos to a specific full variant combination (e.g., Blue x S x Linen). Ideal if different sizes or materials of the same color have unique product photos.

You can assign up to 50 images per option value or variant using either method:

Method A: Manual Drag-and-Drop

1. Look at the Unassigned Shopify Media panel on the right (the product's main featured image is automatically excluded so your primary cover stays intact).

2. Drag and drop one or more photos into the desired option value or variant box on the left (or click + Add inside the box).

3. Reorder photos: Drag thumbnails left or right within an option/variant box to set their exact gallery display order. The first image is also used as the preview image when shoppers hover or click swatches on Collection cards.

Method B: One-Click Auto Assign

1. Click the Auto assign images button in the top-right corner of the workspace.

2. The app automatically scans the filename and alt text of all unassigned media and assigns any photo that uniquely matches an option value or variant (for example, red-hoodie-front.jpg is automatically assigned to Red).

1. Common Images: Have a size chart, fabric care guide, or lifestyle photo that should show for every variant? Drag it into the Common images section on the right (or click Add to common images). Common images appear at the end of the gallery for all variants and do not count toward the 50-image limit.

2. Hide Unassigned Images: Keep the Hide images not assigned to the selected variant toggle turned ON (enabled by default) so shoppers only see the photos assigned to their selected variant plus Common Images—hiding all other colors from the gallery.

   

• Out-of-Stock & Deleted Media Protection: If a variant goes completely out of stock or an image is removed from Shopify Media, Aris Color Swatch automatically hides those images on your storefront and shows a Hidden on storefront badge in your workspace. Once you restock the variant, the images reappear automatically - no need to reassign them!

• Safe Mode Switching: Switching between Assign by Options and Assign by Variants never deletes the assignments you created in the other mode.

Pro Tip: Naming your product image files with the color or option value before uploading to Shopify (e.g., navy-front.jpg, navy-back.jpg) lets you organize hundreds of photos in a single click using Auto assign images!

Need Help? If your theme uses a custom product gallery slider and needs adjustment, click Chat with us at the bottom right. Our support team is always ready to help!