Can I have multiple images associated with one variant?

In Shopify you can add images to your product variants to let your customers see what each variant of a product looks like. However, being regulated by Shopify, you can associate only one image with one variant. So, the question is, how to have multiple images associated with one variant?

There is an answer in Be Yours, in which you can specify certain images for one option variant. This function is especially suitable for color option, but you can completely use it for other purposes you want.

On this page

Requirements

  1. Be Yours 4.0.0 or later
  2. You must turn off the option that hides other variants' media after selecting a variant. This option is compatible with native Shopify behavior - associating only one image with one variant.

    In Be Yours, this option is available in the following sections:

    • Featured product section
    • Product information section (on product pages)
    • Product information section (on product modal)

Choose an option you want

Look at your product in your admin and choose an option you want to classify your images. In the example below, I decided to choose Color. My product is available in Black, Green, and Pink colors and I only want to show the respective images when a user selects a variant.

Edit the ALT tag of the images

You need to edit the alt tag to specify the variant that the image belongs to:

  1. Hover on the image and click the six-dots button to open up the image's info
  2. Click Add alt text
  3. Use your option name you choose combining with the variant name. The syntax is very important here and must be in the following order:

    # (hashtag character)
    option name (lowercase)
    _ (underscore character)
    variant-name (lowercase, replace all spaces by hyphens)

    For example, if I choose Color option and I want to associate an image to Black color, the alt text should be #color_black
  4. Click Save alt text to save the changes
  5. Do the same process for other images

Set (or keep) my own alt text

What if I want to set (or keep) my own alt used for SEO purposes? Just add anything in the alt field before the # character, like this: