Can I have multiple images associated with one option?

Shopify lets you add pictures to product options, so customers can see what each choice looks like. However, being regulated by Shopify, you can associate only one image with one option value. So, the question is, how to have multiple images associated with one option?

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

On this page

Requirements

  1. This article is about setting up in Concept theme.

  2. You must turn off the Hide other variants' media after selecting a variant. This option is compatible with native Shopify behavior - associating only one image with one option value.

  3. In Concept, this option is available in the following sections:

    • Featured product section.
    • Product information sectione (in product pages.)

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. The Flow Harmony product is available in Gold Tone, Black, Chestnut, Navy, and Crimson Shadow colors and I only want to show the respective images when a user selects a option.

Edit the ALT tag of the images

You need to edit the alt tag to specify the 'option name and option value' 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 option value. The syntax is very important here and must be in the following order:

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

    For example, if I choose Color option and I want to associate an image to Gold Tone color, the alt text should be #color_gold-tone

  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:

We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.