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
- Be Yours 4.0.0 or later
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:
- Hover on the image and click the six-dots button to open up the image's info
- Click Add alt text
- Use your option name you choose combining with the variant name. The syntax is very important here and must be in the following order:
For example, if I choose Color option and I want to associate an image to Black color, the alt text should be
variant-name(lowercase, replace all spaces by hyphens)
- Click Save alt text to save the changes
- 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!