Compatibility: All Shopify 2.0 FREE themes ONLY. Works from lower version to version 15
Looking to add an extra level of interactivity to your product pages? With a variant select feature that uses thumbnail images, you can give your customers a unique browsing experience - and the good news is, it's not as complicated as it may seem!
While there are plenty of video tutorials available online, they often don't work with newer Shopify themes like Dawn 5.0. And while some may suggest downloading an external app, that's not always necessary either. With a simple code snippet, you can implement the thumbnail image variant select feature yourself.
In addition to the basic functionality, We have added a feature that allows for the selection of multiple variant images using the image alt feature. While assigning alt tags to multiple images can be time-consuming, it's a straightforward process if you already have a CSV file for your product.
Please note that this feature won't work with apps that change the product options. Before you begin, make sure to uncheck the "Hide other variants' media after selecting a variant" option in your theme editor, and use either the "thumbnail carousel" or "thumbnails" option. Additionally, make sure to assign an image to every variant option and use the image alt tag. If you're already using image alt tags for SEO purposes, contact us to discuss other options.
So, what are you waiting for? Enhance your product pages today with this engaging and interactive variant select feature using thumbnail images!
NOTE: Please be aware that we will be using the image alt to connect to the variant. If you need to use the image alt for SEO, we need to add a code. Please contact us for quote.
Why Automatic Select Variant Option Using Product Images
Think about your own online shopping habits. Wouldn't it be easier to see a product in different colors or styles by clicking a picture instead of fiddling with a dropdown menu? Thumbnail variant selection offers several benefits:
- Enhanced User Experience: Customers can quickly visualize the product in different variations, making browsing and selection more intuitive and enjoyable.
- Increased Sales: A smoother buying experience can lead to more conversions and happy customers.
- Improved Brand Image: Interactive features like this showcase your store's modern and user-friendly approach.
Bonus Tip: For themes requiring SEO-specific image alt tags, the article suggests contacting the provider for alternative solutions to avoid compromising search engine optimization.
What you are buying:
- Select the product option using multiple thumbnail images
- Works with either dropdown or radio buttons variant picker
- Updates the product information, eg. price
- We need to use the image ALT for this to work
- Only works on carousel and thumbnail carousel Desktop layout
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
Steps on how to add Automatic Select Variant Option Using Product Images
Step #1. Open your code editor
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit codeStep #2. Open the file and find the code
We need to open the Asset folder and look for media-gallery.js. If you don't have this file, this code will not work for you. Open the media-gallery.js and find the code below.
Then insert the code below it. Please refer to the image for placement
Step #3. Insert another code
Let's start in a new line, then add the code below, after the closing curly bracket. Please refer to the image for placement. Then click SAVE.
Code Placement:
Step #4. Add the code in the media-gallery
We need to add the code in the media-gallery. Please check which version of Dawn do you have.
For Dawn below 8.0 version, open the Section folder and open the main-product.liquid. Inside the file, search for "<media-gallery." Below the media-gallery code and after the ">", add the code below.
For Dawn above 8.0 version, open the product-media-gallery.liquid under the Snippet folder, add the code below after the ">", please refer to image below
Step #5. Save all your changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.Step #6. Add the alt text on product images
Go to your Admin screen and click "Products", click the product, then under the Media section. Click on the images and assign the media alt the same with the variant option. Please check the image for more information. Make sure to click SAVE.
Add the image alt the same as the variant option. E.g. Variant option is "White", add a media alt "White." This is case sensitive.
NOTE: If you don't assign a media alt, this image will not be use to select the variant option.
Step #7. Disable the "Hide other variants' media"
Go to your theme editor, and go to Products, then default products. Click the Product information and uncheck the checkbox, "Hide other variants' media." You need to change the "Desktop layout", either use carousel or thumbnail carousel. Other options will not work.
Conclusion
Remember to disable the "Hide other variants' media" option in your theme editor to ensure the feature functions correctly. With these steps followed, you'll be well on your way to offering a more interactive and customer-friendly shopping experience on your Shopify store.
So, what are you waiting for? Unleash the power of thumbnail variant selection and watch your product pages come alive!
Copied!
6 comments
Hey there, I purchased your code snippet and it is great in it’s own right! However, my concern is that it is using alt tag which should be reserved for SEO. Do you have a code snippet that uses that image linked to the variant?
Thanks in advance