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 Be Yours, in which you can specify certain images for one option 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. Be Yours 4.0.0 or later

  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.

    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 option value.

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 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:

We know that most clients care about SEO and you will be able to improve your SEO efficiency by adding alt tags to all images as per the instructions above. 

SEO: Image Optimizer Page Speed by AVADA is a highly recommended app for image SEO to help you outrank your competitors in search results. This app leverages your SEO at ease with automation by:

  • Optimizing image ALT/ meta tags/ JSON-LD to be Google-Search-friendly.
  • Optimizing image sizes without quality loss to speed up your website.

>> Learn more about SEO: Image Optimizer Page Speed today!

Back to Be Yours Support