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.
STEPS:
Requirements
- Be Yours 4.0.0 or later
-
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
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 White, Wheat, and Black 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:
- Hover on the image and click the six-dots button to open up the image's info
- In the Alt text box, type your alt text using 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
NOTES:
From the Be Yours version 7.2.0, we support for multiple languages in our multiple option images feature.
Take a look at this example below for English and French. The option name is 'Color' in English and 'Couleur' in French, the option value is 'Black' in English and 'Noire' in French.
After clicking on the image you want to add ALT text, set the ALT text:
#en:color_black,fr:couleur_noire
Here's how to do it:
- Include the language code: Add the language code, followed by a colon (:), before each color name.
- Separate each language pair with a commas: Separate each language pair with a commas (,). This will indicate the end of one language pair and the beginning of the next.
- Hover on the image and click the six-dots button to open up the image's info
- Click Save 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!
* The images are used for non-commercial product demonstration purposes only, and are solely intended for use in Be Yours theme instruction documentation.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, don't hesitate to reach out to Roartheme's support team for expert guidance.
Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp
