Thank you for the tutorial! If anyone is having the issue in which the images disappear, you might have added an inverted quotation mark at the second step. Just delete that and retype the quotation mark and it should work.
Guys, if you are having issues implementing the code. Please watch part 2 of the video here ruclips.net/video/fCHMEh-EG7s/видео.html For any inquiries please contact via websensepro.com/contact-us
This works perfectly for me, and also fixes some issues in the process Before it would always show 1/3 images when there were really 1/4 Now you can click on blue, and it shows those two, and same with red Thanks!
There are so many videos on youtube but none of them was able to solve this issue for me. I am so glad that i found your video. Thumbs up and subscribe to you. Hopefully, you will help more on coming new aspects of shopify. JazakAllah khairun
This video is great but unfortunately, I'm only coming across it a year later. I have Dawn version 12.0.0 and the code on the lines in the second step does not look the same as in these other Dawn versions. Would appreciate any advice or feedback on this topic
Thanks. Quick fix required though to make sure that if the image is selected from the bottom, the correct variant name is selected to make sure the customer is buying the correct product if he adds to cart
When i select the product from the collection page, it comes on product display page with all the images from all the color variants. I just want the selected by default images to appear. How to achieve that?
Hey I been try this very well busy still i not able to get result .. I'm facing the same issue with images. Only selected variant image should be reflected instead of all images
If we upload products in Bulk using the import feature, will this technique work. I mean in the excel file, we just have one column for adding one variant images. How can i add more than one variant image and have this particular feature ? Thanks
Thank you so much for this video and the website with the steps! I was able to do it on my first try which is unexpected since I never did coding before! Thanks again!
@@WebSensePro Hi! I just wanted to double check if you are aware of any Dawn updates, my website suddenly stop working and now once I click on the variant, none of them appears (I haven't touched the coding for anything else after working on your steps). What should I do?
@@WebSensePro Thanks for your quick response... I duplicate my theme and redid the whole process and it isn't working. I wonder if there is a way for you to be able to go inside my shopify and revise the coding? Thanks so much!
This content is very useful, and worked for me. I also contacted Bilal to make a further modification, and his response, and time-to-complete was excellent. Thanks, Bilal!!
How do i make this work if i have multiple attributes like color and design, almost figured it out but haven't been able to finish it, any help would be appreciated thanks
Thanks! I've the code working on the newer free theme "refresh". Basically identical to dawn. Is there a way to auto-select the first variant so it doesn't have to load all the photos on page load?
Thanks for sharing, but on mobile phone (chrome or safari) it takes about 4 seconds to Show Only Selected Variant Images correctly, before that it will display all images. Can you help me?
Hi. Thank you for the Tutorial. When I finish the second step on Dawn (Line 68 in this version but same corresponding code) and then go to Google Console to check thumbnail color attribute, it does not tell me the color but just the item.Same goes for every other thumbnail. I have checked and compared it several times but I can't find what went wrong.
Hi Jack, I had the same problem but I fixed it. You need to add the color attribute (alt text) yourself. To do that go in Shopify to Products -> Choose your specific product -> click on the specific colored image -> Click "add alt text" and add your specific text. Do this for every image. After that your color attribute (alt text) is added like he shows in 5:00 You will see your color attribute now in the Web Inspector as well! Hope it helps :)
@@WebSensePro No problem! But the tutorial still didn't work 100% for me ( I completed all the steps ). But once I click on a variant I first see all the selected variant images + below those I see all the images (from every variant including the selected variant). So I can still see all the variant images no matter which variant I select, like before implementing the tutorial. The only difference now is that the selected variant images are shown bigger than the non-selected variant images. That's still not what I was hoping for of course... Would appreciate if someone can help me please :)
Hi, there appears to be a bug for the moblie version. If you select a variant the number of image (e.g., 1/4) for the variant doesn't always adjust correctly. Do others also have this issue?
@@WebSensePro Do we know what the fix is? I've seen multiple people running into this bug where the image slider shows 1/3 although there is 5 images and then goes to 5/3, for example. Very confusing for a consumer.
Great tutorial. Seems like only the correct variant images are being displayed in mobile view but on a desktop, all images are visible. Any idea how to fix this? thanks!
@@WebSensePro yes i wonder how the same works with the carousel layout, i have the same problem, i want to use the images in the carousel variant. In this variant, all images that do not belong to the variant should be hidden. how is that possible?
One of my photos STICKS......every other variant works but the first (default product image) remains inside of those other variant galleries no matter what. I cannot figure this out! It must have something to do with the fact that it's the default image for the product, so maybe theres a distinct code for that image. Ughh I don't know all this coding stuff
Hello, Works well for me! Thank you. However, initially clicking into a product, it shows all the variant images (When a colour variant has been automatically selected). It’s only when the user manually selects a variant option, that all the other variant images disappear. Please help. Thanks 🙂
Thanks for the details. unfortunately, after implementing each single step, the code is not working as it should be. Instead, when clicking on the "color" button, all images disappear. Do you know what is not working?
Hello! Thank you for your tutorial. Well done and easy to follow. I see that you used the colour variant for the image selection. In my store (use Dawn theme 4.0 version) the selected variant is not the colour but the SHAPE of the product. How customise your code so that the product image changes according to that variant ?
@@WebSensePro It's not working. The images of the other products disappear and the images of the product I am editing the code for do not change a bit when the shape variant is selected
@@WebSensePro hi I did not but and selected ''hide other varients media after selecting a variant'' but it only shows 1 image of the selected varient not all , what should I do ?
I would also really appreciate one for craft as well - in fact, when I follow these instructions for craft, it almost works perfectly. But after the first switch between colour variants, the initial image disappears.
@@WebSensePro Done! Thank you. Also could you possibly do a video whereby you only show images based on 2 different variants? e.g. I have photos of my products that look different by colour, but also by size - I'd like to be able to have the customer click the size and colour they want, and to see only the relevant images
Will have to edit jQuery code in order to do that. I made the code to work like that so when page loads it shows all pictures but when someone select a variant it will show only selected variant pictures
@@UpsideDownGamers Just tested the same code and it's working fine. Make sure to checkout the inverted commas as when you copy code from blog post inverted commas are not properly coopied
@@WebSensePro You can use vanilla js features now, after the end of Internet Explorer times. Fortunately it is quite safe now. I think it is perfect for smaller tweaks and also easy to use. Some say it is more messy than jQuery but as you can see, the Dawn's javascript is also vanilla and quite clean.
![How To Show Selected Variant Images [Dawn 14.0.0]](http://i.ytimg.com/vi/FHzBvy85ais/mqdefault.jpg)
Checkout update Tutorial Here ruclips.net/video/ntOmwkaKpvg/видео.html
Thank you for the tutorial! If anyone is having the issue in which the images disappear, you might have added an inverted quotation mark at the second step. Just delete that and retype the quotation mark and it should work.
Guys, if you are having issues implementing the code. Please watch part 2 of the video here ruclips.net/video/fCHMEh-EG7s/видео.html
For any inquiries please contact via websensepro.com/contact-us
This works perfectly for me, and also fixes some issues in the process
Before it would always show 1/3 images when there were really 1/4
Now you can click on blue, and it shows those two, and same with red
Thanks!
Thanks, dont forget to subscribe and turn on the notification
There are so many videos on youtube but none of them was able to solve this issue for me. I am so glad that i found your video. Thumbs up and subscribe to you. Hopefully, you will help more on coming new aspects of shopify. JazakAllah khairun
Thanks for the appreciation 🎊🎊
What a G. Even tells you where to place the lines for the updated version of this theme in his article on his website.
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
This video is great but unfortunately, I'm only coming across it a year later. I have Dawn version 12.0.0 and the code on the lines in the second step does not look the same as in these other Dawn versions.
Would appreciate any advice or feedback on this topic
ruclips.net/video/BclQbxejpCc/видео.html try this one
Thanks for the help! this saved me i had no clue what i was doing
Your welcome dont forget to sunscribe
Absolutely thankful to this video!!!!
Thanks. Quick fix required though to make sure that if the image is selected from the bottom, the correct variant name is selected to make sure the customer is buying the correct product if he adds to cart
Not clear what you mean it already shows only specific variant images
how to achieve this on GEM theme please help
Need more comments and likes to create a tutorial on that
Thank you you are the GOAT
Your welcome
When i select the product from the collection page, it comes on product display page with all the images from all the color variants. I just want the selected by default images to appear. How to achieve that?
It requires custom coding if you need premium support email info@websensepro.com
Hey I been try this very well busy still i not able to get result .. I'm facing the same issue with images.
Only selected variant image should be reflected instead of all images
Please share store URL so we can see where the issue is
If we upload products in Bulk using the import feature, will this technique work. I mean in the excel file, we just have one column for adding one variant images. How can i add more than one variant image and have this particular feature ? Thanks
It's a topic for another video :) subscriber to get notified. Thanks for giving us a new topic to work for
hi i just want the variant images to show and never for it to display alll the images at once, what code do i need to go with for that please help
You will have to edit jquery code, if you want our premium services feel free to email info@websensepro.com
Thank you so much for this video and the website with the steps! I was able to do it on my first try which is unexpected since I never did coding before! Thanks again!
Your welcome, dont forget to subscribe
@@WebSensePro i need you help I tried well but the code is not working
@@WebSensePro Hi! I just wanted to double check if you are aware of any Dawn updates, my website suddenly stop working and now once I click on the variant, none of them appears (I haven't touched the coding for anything else after working on your steps). What should I do?
@@andregraf3000 it does not update automatically so definitely not relates to dawn theme updates
@@WebSensePro Thanks for your quick response... I duplicate my theme and redid the whole process and it isn't working. I wonder if there is a way for you to be able to go inside my shopify and revise the coding? Thanks so much!
This content is very useful, and worked for me. I also contacted Bilal to make a further modification, and his response, and time-to-complete was excellent. Thanks, Bilal!!
Your welcome John
Can u make a turtorial for impulse theme ? It would help so much
Sure, will do. If this video/channel you helped in any way please support by Subscribing and Hit the Like button.
The colors of the images are changing but the first product image does not change unless you refresh the page PLEASE HELP
Please share store URL
How do i make this work if i have multiple attributes like color and design, almost figured it out but haven't been able to finish it, any help would be appreciated thanks
Subscribe to this channel and wait for the video on this solution 😇
@@WebSensePro when do you think that video will be uploaded?
@@WebSensePro and im also having the issue were the code doesnt load in until a variant is picked by the viewer
Thiss doesntt work anymore since the edit code on dawn is diffrent now. Can you update this tutorial on the new dawn theme 11.0.0? :)
Its working fine if you use correct line numbers
@@WebSensePro Maybe Im just too stupid :D. Because the line numbers aer diffrent in my dawn code than in yours
I followed the tutorial exactly as shown but it just messed up all my products. Do you know why?
Are you applying it on Dawn theme? Did you check line numbers which I provided in blog post
@@WebSensePro yes I’m using a dawn them and yes I applied as in the blog
@@HylarieA Please share your store URL and access to websensepro@gmail.com so we can fix your issue
Thanks! I've the code working on the newer free theme "refresh". Basically identical to dawn. Is there a way to auto-select the first variant so it doesn't have to load all the photos on page load?
Will have to play with JS Code, I will see if I can come up with something to help you with this
@@WebSensePro please also inform me if there is a solution
@@rationalstudio Yes there is contact info@websensepro.com for our paid services
Thanks for sharing, but on mobile phone (chrome or safari) it takes about 4 seconds to Show Only Selected Variant Images correctly, before that it will display all images. Can you help me?
Not replicating this issue on my end, how many pictures you have?
Hi. Thank you for the Tutorial. When I finish the second step on Dawn (Line 68 in this version but same corresponding code) and then go to Google Console to check thumbnail color attribute, it does not tell me the color but just the item.Same goes for every other thumbnail. I have checked and compared it several times but I can't find what went wrong.
Double check the inverted commas for display thumbnail color attribute. When you copy the code it changes the commas
Hi Jack, I had the same problem but I fixed it. You need to add the color attribute (alt text) yourself.
To do that go in Shopify to Products -> Choose your specific product -> click on the specific colored image -> Click "add alt text" and add your specific text. Do this for every image.
After that your color attribute (alt text) is added like he shows in 5:00
You will see your color attribute now in the Web Inspector as well!
Hope it helps :)
@@caseyliem Thank you for contribution
@@WebSensePro No problem!
But the tutorial still didn't work 100% for me ( I completed all the steps ). But once I click on a variant I first see all the selected variant images + below those I see all the images (from every variant including the selected variant).
So I can still see all the variant images no matter which variant I select, like before implementing the tutorial. The only difference now is that the selected variant images are shown bigger than the non-selected variant images. That's still not what I was hoping for of course...
Would appreciate if someone can help me please :)
@@caseyliem Did you select variant images? Checkout last step of this video ruclips.net/video/L0RTaFLaZo4/видео.html
Hello all @websensepro is there an update for Dawn 10.0. I cant find the relevant code for main product liquid in Dawn 10
Will add in coming month
Hi, there appears to be a bug for the moblie version. If you select a variant the number of image (e.g., 1/4) for the variant doesn't always adjust correctly. Do others also have this issue?
Probably a small CSS fix
@@WebSensePro Do we know what the fix is? I've seen multiple people running into this bug where the image slider shows 1/3 although there is 5 images and then goes to 5/3, for example. Very confusing for a consumer.
It works, thank you!
Thanks for appreciation, if this video/channel you helped in any way please support by Subscribing and Hit the Like button.
Hello Sir,
I am using sense theme. Any chance this code can work on sense theme also? If not, what are my options?
Hi Lalit, haven't teste this code in sense theme
Great tutorial. Seems like only the correct variant images are being displayed in mobile view but on a desktop, all images are visible. Any idea how to fix this? thanks!
That's weird, please share your store link
@@WebSensePro I keep trying to share my store link but it seems to be removed shortly after posting.....
No worries, you can share your store details to websensepro@gmail.com
hello, thank you for the Video. But it doesn't work with the Carousel Layout. can you help me?
It won't as it's not meant to work on Carousel layout
@@WebSensePro okey, but is it possible to make it for the carousel Layout?
@@WebSensePro yes i wonder how the same works with the carousel layout, i have the same problem, i want to use the images in the carousel variant. In this variant, all images that do not belong to the variant should be hidden. how is that possible?
Perfect Tutorial. its working fine
Thanks dont forget to subscribe
@@WebSensePro Already Subscribed
Hey, do you mind sharing how to adjust this to be used with size variation instead of color please?
Will create a tutorial for it
It does not work for me, and I am using Dawn version 6.0.2. Check the comma though. Only show the same picture when clicking dierent variants :(
Did you check alt attribute in Inpect element?
bro can you make one for refresh theme?
Sure, will do
Hi in step 2nd (Main-Product. Liquid) the Line item [
Thanks for the contribution
One of my photos STICKS......every other variant works but the first (default product image) remains inside of those other variant galleries no matter what. I cannot figure this out! It must have something to do with the fact that it's the default image for the product, so maybe theres a distinct code for that image. Ughh I don't know all this coding stuff
Yea it frustrates when it does not work😅😅
thank you so much!
Your welcome, dont forget to subscribe and turn on the notifications
Hello,
Works well for me! Thank you. However, initially clicking into a product, it shows all the variant images (When a colour variant has been automatically selected). It’s only when the user manually selects a variant option, that all the other variant images disappear.
Please help.
Thanks 🙂
Please add select variant feature images . If it still does not work please share details via email
@@WebSensePro Yes, I have already selected all the product feature images. What is your email?
@@erynlevey5073 websensepro@gmail.com
@@WebSensePro Hi, I am running into the same issue. Is there a way to change this when I land on the page?
Thanks for the details. unfortunately, after implementing each single step, the code is not working as it should be. Instead, when clicking on the "color" button, all images disappear. Do you know what is not working?
Check inspect element to make sure all the images are showing alt attribute dynamically. First step is most important
@@WebSensePro Thanks. I just figured out the issue. thanks!
@@Mrvhro I had the same issue as you, could you please tell me how you solved it?
@@carlolsson3695 Please share store so we can check if you implemented the code successfully
@@Mrvhro : What did you do to solve this? Thanks!
Is their any way you can combine this code with a image slider on the product page?
Sure will work on that
@@WebSensePro Love your videos. They are very helpful. I am interested in combining this with your image slider as well.
@@nakodacreative Will try my best to come up with a video on this
is there a way you can do this without coding? shouldn’t there be an easier option?
For now there is no option available but yes you are right shopify should have it builtin
@@WebSensePro thank you for your response, i appreciate u!
Sir will this code works for other themes also??
No it works with OS 2.0 free Shopify themes like Dawn, refresh and colorblock etc
I tried but it didn't worked, can u please help me out?
I have done all the things step by step but it didn't worked, when i clicked on selected variant it also showing product of another color
Please check error in console for JS also check if alt atributes are showing up after 1st step
Will this also work for Debutify theme?
No it wont
I am using Taste theme can you help ?
It should work on all free themes
mate thank you for the great work
My pleasure!
Hello! Thank you for your tutorial. Well done and easy to follow. I see that you used the colour variant for the image selection. In my store (use Dawn theme 4.0 version) the selected variant is not the colour but the SHAPE of the product. How customise your code so that the product image changes according to that variant ?
Just add Shape name in Alt attributes of Images, let me know if it does not work.
@@WebSensePro so the thumbnail stays as colour right?
@@martinaquondamatteo1855 Hard to explain without seeing the store
@@WebSensePro It's not working. The images of the other products disappear and the images of the product I am editing the code for do not change a bit when the shape variant is selected
Can you do it on the latest dawn theme?
It's tested up to Dawn 11.0.0
@@WebSensePro hi I did not but and selected ''hide other varients media after selecting a variant'' but it only shows 1 image of the selected varient not all , what should I do ?
Hi, can you do a tutorial for Sense theme please? :D
Sure, subscribe and turn on notification. Tutorial coming soon
its not working while we select thumbnail carousel
Yes carousel layout require a little different code editing.
Hello ! Thank you for tutorial! Can you update for Dawn 7.0.1 version?
Already created ruclips.net/video/fCHMEh-EG7s/видео.html
I would also really appreciate one for craft as well - in fact, when I follow these instructions for craft, it almost works perfectly. But after the first switch between colour variants, the initial image disappears.
Sure, subscribe to get notified for the new videos. Adding your idea into list of creating new videos
@@WebSensePro Done! Thank you. Also could you possibly do a video whereby you only show images based on 2 different variants? e.g. I have photos of my products that look different by colour, but also by size - I'd like to be able to have the customer click the size and colour they want, and to see only the relevant images
But it shows all variants when the page loads for the first time. How to fix that?
Will have to edit jQuery code in order to do that. I made the code to work like that so when page loads it shows all pictures but when someone select a variant it will show only selected variant pictures
Can you point me to the right direction how and where to edit the code in jQuery. Much appreciated 👍.
@@rajbista1478 filterMedia() {
var selected_variant = this.currentVariant.featured_media.alt;
var selected_attribute = '[thumbnail-color="' + selected_variant + '"]';
if (selected_variant == selected_variant) {
$(selected_attribute).show();
} }
@@WebSensePro Thank you very much, but its not working.
@@rajbista1478 What do you want to show when the initial page loads?
Thank you! This is helpful, could you do one for craft theme as well? :)
Is it available in free themes?
@@WebSensePro yes it is.
Hi unfortunately this didn't work for me. I see the alt attribute and even applied it to the thumbnails as well but all of the images just disappear.
Check if alt atributes have extra inverted comas showing? If yes than you just need to replace inverted comas in code
@@WebSensePro it's not that because I even typed it in manually :/
@@rawsaucerobert Can you share link of your store?
Make sure to select featured image of each variant
Can you update it for Dawm 9.0.0
I subscribed and liked this video
This should work ruclips.net/video/BclQbxejpCc/видео.html
will it work others theme like ella theme ?
Yes, you can try this tutorial, if this is not working, please contact via websensepro.com/contact-us for paid support
Hey thank you for this bro
Your welcome dont forget to subscribe
@@WebSensePro already done haha
1st variant click on not proper work and other variant click to working then 1st variant click on working
Help me
Check spelling on Alt Text
@@WebSensePro all variant image show then click to work
Only 1st variant show image any variant image hide then click to show
only one image is now displayed..?
I'm use the app:
G:Variant Image + Color Swatch
I cant do it with this app together?
We haven't tested with any APP, please share link to the app which we can test
I cant send links in here. But the app is:
G:Variant Image + Color Swatch
By Globo
@@Tovuh Gotcha, code is supposed to work only in raw form meaning without any app. But will test it with this app and see if I can make it work
Thanks. That would be very awesome if you take a look!
Only one image show not working
Checked with last step? Adding images by editing variant
@@WebSensePro thank you
🙏 thanks
Your welcome, show your support by susbscribing
The thumbnail-color portion to add to the element isn't working. It's just coming through as...
Is it dawn theme?
@@WebSensePro yes it’s Dawn 6.0.2
@@UpsideDownGamers Just tested the same code and it's working fine. Make sure to checkout the inverted commas as when you copy code from blog post inverted commas are not properly coopied
@@WebSensePro yeah I’ve tried it every way I possibly can. Any chance I can drop you an email to see what’s not working properly?
Hi William,
Sure if you are looking for paid support, please drop us an email to info@websensepro.com
Thanks!
Once in the decade we have a promising new change to leave jQuery behind, but why don't we stick with it for the next decade again.
What do you suggest other than jQuery?
@@WebSensePro You can use vanilla js features now, after the end of Internet Explorer times. Fortunately it is quite safe now. I think it is perfect for smaller tweaks and also easy to use. Some say it is more messy than jQuery but as you can see, the Dawn's javascript is also vanilla and quite clean.
Absolutely thankful to this video!!!!
Your welcome
Absolutely thankful for this!!!!
Your welcome