Skip to main content

Images for selected color variants

Shopify natively supports only one image per variant, which can be limiting in certain cases. For example, if you’re selling a T-shirt in Black and White, you might want to show a full gallery of images for each color—say, five for Black and five for White—while hiding the others when a specific variant is selected.

While Shopify doesn’t yet offer a built-in way to handle this, our theme includes a built-in workaround to achieve this effect seamlessly and better management for variant images. While other themes use alt tag for images, Futurer use metafields - which helps manage all color variant images in one place, better for long-term scaling.

Here is how to set up images for selected variants in Futurer.

Step 1. Set up a metaobject definition​

Futurer

Go to Settings -> Custom data

Scroll down to Metaobject definition, click Add definition

Name the definition as Variant Images Grouping

Futurer

Add fields

  • Add a Single line text field, name it Name, add ^[a-zA-Z0-9_-]+$ to Regular expression, make it a Required field
  • Add a Product variant field, choose List of product variants
  • Add a File field, name it File grouping, choose List of files

Save the metaobject definition

Step 2. Set up product metafield​

Futurer

Go back to Settings -> Custom data

In Metafield definitions, select Products

Click on Add definition, name it Variant Images Grouping List

Then select type Metaobject. In Reference, choose Variant Images Grouping as we created previously. Select List of entries.

Save the product metafield definition.

Step 3. Add entries​

Futurer

Go to Content -> Metaobjects, select Variant Images Grouping, then click Add entry

Name the entry in the exact format of name__color. For example: black-phone-case__color.

Then select product variants which are connected to the entry.

In File Grouping, click on Select files to choose the images associated with this variant. For example, if black-phone-case__color has 5 images, select all of them.

Click Save.

Step 4. Choose the metafield inside a product.​

Futurer

Go to Products, then select your desired product.

Scroll down to Metafields, find Variant Images Grouping List. Then select the entries that you created for the product.

Step 5. Enable the variant image setting.​

Futurer

Go to Online store -> Themes, and Customize your Futurer theme.

In pages, select any Product page, scroll to and select the Product information section.

Enable a setting called "Only show selected variant image". Now, when a variant is selected, you will only see the images of the entries created for this variant.

Conclusion​

Futurer's approach in setting up images for color variants help put all images into one place, so you can easily manage and edit in the Metafields. Even if the number of products grow, this approach will prove to be optimized.