Compatibility: Compatible with Dawn version 2.5 to 15, and other new Shopify 2.0 FREE themes .
If you have Dawn below 2.5 version, follow this steps here.
I am not sure why Shopify 2.0 has not offered this option yet. The Shopify theme only hide the one images when you assign the image to that variant. What if we want to have multiple images assigned to the variant? There are several ways to do it. We can do this with NO APP or EXTERNAL library. But we will use the simplest way, and that is by using the image alt. The code adjust to what ever desktop layout and desktop media size you choose. This works with stacked layout and thumbnail slider layout.
With that being said, please assign image alt that corresponds to the option you want to associate the image to. Make sure the variant text is the same with image alt. See video for more information.
What is Displaying Only Selected Variant Images?
This feature allows you to associate specific images with individual product variants. When a customer selects a variant (e.g., color, size), only the images associated with that variant are shown, preventing confusion and ensuring a clear representation of the chosen product option.
Why Display Only Selected Variant Images?
- Improved User Experience: Customers see only the images relevant to their chosen variant, eliminating confusion and making it easier to visualize the product they're interested in.
- Increased Conversions: A clear and focused product presentation can lead to higher conversion rates by reducing purchase hesitation and making the selection process more straightforward.
- Reduced Cognitive Load: Customers don't have to sift through irrelevant images, making the shopping experience more efficient and enjoyable.
- Professional Look: Displaying only relevant images creates a cleaner and more professional product page.
- Better Mobile Experience: On mobile devices, where screen space is limited, showing only the necessary images is especially important.
Additional Considerations:
Beyond the core functionality, these additional considerations will enhance the user experience and ensure a robust implementation:
- Image Preloading: Preload the images for the most commonly selected variants to ensure a snappy transition when the user changes options. This prevents a delay and a blank image while the new images load.
- Variant Image Order: Control the order in which variant images are displayed. You might want to prioritize specific angles or views for each variant.
- Fallback Images: Provide fallback images for variants that don't have specific images assigned. This prevents broken image icons and ensures a consistent visual experience. A generic product image can be used as a fallback.
- Zoom Functionality: Maintain zoom functionality for the displayed images. Ensure the zoom works correctly with the dynamically updated images.
- Accessibility: Ensure the image updates are accessible to users with disabilities. Use ARIA attributes to communicate the changes to screen readers.
- Mobile Responsiveness: Thoroughly test on various mobile devices and screen sizes. Pay attention to how the images and variant selectors are displayed on smaller screens.
What you are buying:
- Show only images assigned to variant
- Use image alt to assign a variant
- Works with stacked layout and thumbnail slider 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
Steps on how to add Show Only Selected Variant 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 code.
Step #2.Main-product.liquid
Open the main-product.liquid under the section folder. Find all the <slider-component> and change it to "show-variant". If you cannot find the slider-component in the main-product.liquid, you need to go to the Snippet folder, and open the media-gallery.liquid or product-media-gallery.liquid.
Step #3. Add Dataset
We have to add a dataset for all the <li> tag under the slider-component. We will add the code below and change it to the corresponding image variable. Make sure there is no spaces. See the video for more information.
See the image for code placement reference:
Step #4. Add style tag
Before the <section> tag, let's add a style or if you are in media-gallery.liquid or product-media-gallery.liquid, place the code on the very top of the file. I fix the position of the mobile view slider to make it center and only show one image per slide.
Step #5. Version 15
If you have version 15, please skip this step. Otherwise, we need to add the script code. Open the "global.js" under the Asset folder. Find the " updateMedia() {." Before the closing bracket, add the code below. See video for more information on placement.
Step #6. Make Slider work
To make the slider work with the change of variant, we have to add this code at the very bottom of global.js.
If you want to show the images only selected variant images on first load, please do the following
Step #1.
Open the main-product.liquid under the section folder. If you cannot find the slider-component in the main-product.liquid, you need to go to the Snippet folder, and open the media-gallery.liquid or product-media-gallery.liquid.
Step #2.
Find the class of the <li> and add the code inside the quotation marks. Change it to the corresponding image variable. Just like what we did on step #3
See the image for code placement reference. Make sure to provide no space between our code and the class code:
After all this code, you need to assign the media alts to your images.
Step #7. Save the 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.
Note: In the Theme Editor, when you click "Customize theme", make sure you unclick the "Hide other variants’ media after selecting a variant" so no variant images will be hidden when called.
Conclusion
Displaying only selected variant images on your Shopify product pages is a crucial step towards creating a clear, efficient, and enjoyable shopping experience. By associating specific images with each variant, you empower customers to quickly visualize their chosen product option, reducing confusion and potentially increasing conversions. While the implementation may require some coding expertise and careful attention to detail, the benefits of a streamlined product presentation are significant. By considering the additional points discussed, you can create a robust and user-friendly system that enhances your product pages and contributes to a more successful online store. Remember to test thoroughly and prioritize the user experience to ensure a seamless and positive interaction for your customers.
That's it. Hopefully that was not too much for you (",)
Copied!
6 comments
Hi @Albert S
Make sure to follow the steps carefully. If having trouble, please contact us using “Chat with us” feature for faster reply. Code were tested and still works with updated version of Dawn.
Hi,
I purchased and installed the “6 Steps in How To Show Only Selected Variant Images” on dawn 11.0 and it is working correctly, the only issue is in the mobile view, the total count of images is incremented by 1 so for example if an a variant has 4 images and it will show in mobile view 1 of 5 and not 1 of 4
My theme url: https://q0oqp0bjn3m298gf-27046445131.shopifypreview.com
Please search for this item “High Society Hoops” to see what I mean (in mobile view)
Hoping to hear from you soon.
Albert Salem
Hi @WILLIAM SHAPIRO,
It will not work on paid themes since the theme code will be far different. I would suggest to contact us using “Chat with us” to provide you the quote
hi does this work for paid themes?
Hi Arif,
Please message me in “Chat with us” and provide me your website. Thank you