🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=multiple-variants-yt 👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
Hello, thanks for the great tutorial! However, I, as a complete beginner, am unable to apply those steps to new json version of files with Shopify 2.0. Could you help me with that?
Wow! Thank you so much for this tutorial, it is exactly what I was looking for. The way that you explain each step is so helpful. You saved me hours of frustration of trying to figure this out on my own! Thanks a million!!
your instruction is very concise and informative. You explain the logic of the code in a way that I can understand even though I don't do any coding. Thanks for sharing!
Hey there, Jan! Hope you and your family are safe and well. Thank you so much for working on this channel and sharing so much valuable information for free! You should create a Shopify development course, I would definitely buy it! Regarding this implementation, I was wondering if there's another way to target the images other than the alt text. Since alt text is so important for accessibility and SEO, it'd be ideal to be able to give the images a meaningful alt text pertaining to each image as opposed to the same general string. Is there another way? Maybe targeting an ID or something like that? Thanks again, you're amazing!
Hello Jan! Hope all is well. Excellent content! Many thanks for sharing the video. By following the steps, I was able to implement it on Prestige theme (desktop version). However, on mobile version it doesn’t load the respective images upon clicking the color variants. The theme is utilising Flickity slider to display the product images (scrollable). Is there any way we can get this work on mobile device as well? I will look forward to your insights. Thank you!
gush! you're amazing! I subscribed to this channel and I love it so much! I just keep following every new thing! I started from the video about metafields and just fell in love! thank you jan!
@@CodingWithJan jan can you please create a video about coding inside shopify email notifications? I'd love to add product suggestions to my "order confirmation" email sent by shopify notifications. as it's a high open rate I'd like to use it even better for cross-selling
Quick side note on page speed/loading times:. Per default, all the thumbnails will load when someone visits the product page. In this tutorial, we only filter them by their visibility. If you have many different variants with lots of thumbnails you might consider to use an app instead. One that would only load requested thumbnails is called "Variant Image Penguin" apps.shopify.com/variantimagegrouper Hope you have a good day :-)
hello, really appreciate the videos you make could you show as how to change the description of a product when changing varient please ( really need it since i'm selling skin care )
Thank you so much for this video. Can you please do a tutorial where (for example) cust can choose t-shirt, long sleeve, or hoodie - then choose color - then size? Thank you again!
Hi Jan, thanks for the video. Is it possible to have specific images shown up when selecting two variants colours i.e. our product can be composed of two colours?
Hi Jan, Thank you for all your helpful and detailed videos. One question, you mentioned below that "if you have many different variants with lots of thumbnails you might consider using an app instead." I fall in that category, which app do you recommend that would work best ? Thank you!
Hello, amazing tutoríal. However when switching to mobile view, the thumbnails disappear ! How to fix this? Some of them stay in the default variant however in the next ones they are not there...any solution?
@Coding with Jan - Shopify Developer - great video explaining the logic in details. I am using a paid theme - can can't seem to find the _onSelectChange function; as they suggest we do not touch theme.js. Can you point how this can be done.
Thanks for this. I would love this in a module however and the fact that the variant URL brings the images without JavaScript. So when you load the URL, it fires the images correctly embed in liquid rather than JavaScript for the first initial load as this can help SEO and update SEO URL and page titles.
Hi Jan, thanks for that Video. Is it possible to hide all pictures of the variants and just show some titel pictures. After selecting the variant only this the color will show up. Thanks again und schöne Grüße aus Wiesbaden :)
Amazing content and constant interaction with the viewers, such a great find. I needed a solution for most recent project and using the alts was all I should have came up with by myself but couldn't. Thanks, saved me a lot of research time, definitely going to search your videos for more useful guides. And I'll sure be back for any further ideas on how to work around shopify's limitations (such as the "1 image per variant" limit) to build features such as this one on shopify stores without having to use third party apps. I'll post a link to the store I'll implement this in once it's done, I'm working on a way to lazyload the hidden images so as not to take too large of a hit on performance. Ayways, thank you. Keep it up!
Hello, do you know if it’s possible to create a basic returns functionality within customer accounts, and other ways to make the customer account section more robust? Thanks!
Hi there, in order to process customer returns you definitely need some sort of app. Order Processing is nothing that could be done on the front-end of your website alone. Here it really depends on how you want to process your returns. Some people have 3rd party fulfillment services that offer app integrations :-)
Do you have a video on adding a Product Image Slider/Carousel? I'm using the supply theme and want to change to it. I used to use a Mobile Gallery app but it was from Beeketing and they got banned.
@@canvasbykaya Nope I'm afraid not. I had to use an app that costs $9.99 a month and while it works well, I don't think it should be something you have to pay for when beeketing did it for free.
Hey Jan, you basically filtered the images by the alt-tag. Is it also possible (since alt tags are helpful for SEO) to give the partially the same name? Let's say that the alt tag is: "Nachhaltiges T-Shirt aus Baumwolle - red" and the other color options gets the tag: "Nachhaltiges T-Shirt aus Baumwolle - black" and then you filter it by Alt-tag contains "Red" or something similar? Thank you for your help!
Hi @Coding with Jan - Shopify Developer Grate Work it's really helpful .! But one issue with mobile device can you please suggest to batter way for mobile device
i am using prestige theme of shopify threre i am drop down for color selection and image groping is not happening, but my code is complete different , can you please suggest ?
Hi! Thank you so much for all your videos. It's soo helpful. I'm wondering why Shopify doesn't integrate this feature which are a pure necessity when you sell variants products. Whatever. Keep making video tutorial, this is really amazing ! Cheers
Hi Jan, How can we change the description of variants when selected. I've been trying various methods but I'm not succeeding. A video on this would help a lot. Thx!
Thanks for this post Jan. If a product, such as a shirt, has two optional colors (e.g., sleeves & body) . How could you code this without assigning a variant for each possible combination. I'd like to have one variant with say two options (sleeves & body) and display the colors on the same image. When the product is sent to the cart, it would have sleeve & body colors as attributes--the same way that you specify attribute: size for a "red shirt" Another question: Can I have multiple photos triggered by user-selected options within the same variant. Thanks.
Hi, Good advise!! the only issue I see here is, if you use the alt text for multiple variant images, what happens with the SEO alt text, which is crucial for Google? Do you have a solution for the SEO alt text?
Hi Jan, I have an issue on mobile the thumbnails just disappear when clicked. Maybe the hidden images are still in the thumbnail slider? I added you on insta if you need my shop link thanks
Hey Guys, finally got to test this myself. You were absolutely right and we might need a small adjustment here. Here is what worked on mobile for me. (You might consider to duplicate your themes first) I might also have some different variable name here so please don´t just copy and past but rather compare :-) let me know if that helps if( variant.featured_image != null) { $('[data-thumbnail-color]').hide(); $('.slick-slider').slick('slickUnfilter'); thumbnail_selector = '[data-thumbnail-color="'+variant.featured_media.alt+'"]'; $(thumbnail_selector).show(); $('.slick-slider').slick('slickFilter',thumbnail_selector); } else{ $('.slick-slider').slick('slickUnfilter'); $('[data-thumbnail-color]').show(); }
@@CodingWithJan This did work yes thanks! Do you know if it's possible to disable the slider on mobile and just use the same block of images that desktop shows?
@@CodingWithJan This is awesome! However, I'm having a hard time implementing the adjustment because my theme uses Flickity instead of Slick slider :( Flickity can't Filter or unFilter. Any idea how I could get over this?
How can I make group image for 2 variants speciafically flavor and size? Sample I have 3 flavor and 3 size. On the flavor I can group the image variant but for the size I can't group the variant base from the flavor. I trying to acquire to get change the variant image for the size base from the flavor. How can I do it?
Hey, do you maybe know, how to show different band color variations for different watches on the product page? (Variation1: Watch; Variation2: Band Colour) I would be so grateful! 🌟
Hello, thank you for the tutorial. I have a question: In our scenario, we need each variant to display a common initial image, followed by specific images highlighting the distinctive features of each variant. For instance, we sell a football goal that maintains a consistent appearance but comes with different hooks for the net. Ideally, each variant would showcase the football goal first, followed by detailed images of its unique features, such as the hooks. Do you have any insights on achieving this? Additionally, we're interested in integrating this setup with an ERP system that manages product and variant information. Do you know if this capability will be native in Shopify soon? It seems fundamental to have variant images and display only the selected variant's images. What are your thoughts on this?
Hi Sven, initial thought: This is too big of a project for a UA-cam comment 😁 I can definitely help you find a qualified developer though. If that sounds interesting, could you kindly fill out the following form so we can streamline this better internally: codingwithjan.com/developers Greetings
Hey, any chance you could help me to get this working on mobile as well? I see it does not work for mobile product pages. I am using the Brooklyn theme.
@Lets Build Shopify : Great Video. The only challenge is I am using Minimal theme. I think it would be great if you could make a similar video for the Minimal theme as well as Minimal and Debut are the two themes most of the newbies use.
Vishnu, nice to meet you. Love that you are speaking of a challenge instead of a problem 😃 I'll have a look on how different the implemention is and I'll give you an update :-)
Vielen Dank für dieses Tutorial... Habe wie im Video erwähnt festgestellt, das bei mir statt image media verwendet wird. Habe soweit alles umgesetzt, allerdings scheint inzwischen einiges in Debut-Liquid geändert worden zu sein, so dass das Ergebnis nicht funktioniert... Wäre toll, wenn hier ein Update kommt.. Vielen Dank im voraus...
in some cases some of the thumbnails you want to show for all colors, so if the alt was 'all' ... I show it anyway .. just add $(thumbnail_selector).show(); $('[data-thumbnail-color="all"]').show();
Do you know how to change the thumb nail images to arrows instead so that users can click through to see the images ? I can't seem to find a way to do it anywhere but your videos are really great, and have helped me so much with other work. Thank you :)
Thank you for this tutorial it is working as it should. I also added the revised js codes from a comment you replied to. There is one problem though, when you select an image it goes to full screen instead of replacing the featured image to that one. Do you know how to fix that by any chance?
Hi Jan - brilliant video, super clear, thank you. We are using gempages with the Debut theme. I've managed to hack "data-thumbnail-color" by messing directly with the gempages product template, but I'm not sure of the next step to filter out unwanted images as the code in theme.js is not being called. Any ideas where to add the filter thumbnails function when using gempages?
I have followed this video and acheived the goal for desktop. but in mobile view this concept is not wokring fine for slick slider. can you please help on mobile view slick slider or how to run same desktop functionality on mobile view. please help!! Thanks
Great in-depth tutorial! I am currently using the Venture theme and everything works as it should up to the point where you hard code this "var thumbnail_selector = '[data-thumbnail-color="combo"]';" But does not work when I put the var "selected_color" in place of the hard coded "combo". Any suggestions?
Hey Jan, thanks for your great feedback :-) Definitely, I could cover at some point in the near future. I already have a video on adding a slider to the homepage. Until then you could try to create a new product template and merge/blend all the code and the schema settings from that slideshow with your new product template and it should work in a similar way.
Hello there. First of all, thanks, you are a lifesaver. I really enjoy your videos. I do have a question tho. How can I filter by the color category and not by alt text of the images? I need the alt-text for other things.
One question, I want to upload multiple files to one product I mean the customer can upload multiple images I am added the come from you last video fir upload file and work perfect but online can upload one image even if and put the code many time to repeat still upload one file , Thank very much for your video are amazing
I have a paid theme, and the code is different in JS than the one you have explained. I tried to implement the same logic and added filterthumbnail function in the same format used in my theme. But it did not work, the front end goes blank hehe. You have made a great job explaining though, the logic and the idea is super clear.
Hi Jan I have followed same steps in debut theme but i found issue when i completed color swatches video i have created the variants and assigned variant images, those images are showing in slider after that i have added same images in product featured images like in video it will show twices.And this functionality is not working.
Hi Jan, great tutorial! Based on your Best Shopify Theme 2021 video we went with the Turbo Shopify Theme. Would creating a similar behavior be possible with this theme as well?
Thanks so much for sharing your talent! I am so happy that I did get it to work with the Debut theme for the desktop screen. But on my mobile phone the variants are not displaying correctly. Is there also @media code that needs to be changed for the Debut theme? I heard you mention it for other themes. Or is there something in my code that I should check? Again thank you. Your videos are excellent.
Hi Anne, nice to meet you :-) Really liked reading your awesome feedback. I remember that someone else had a similar issue on the mobile view. We made some small adjustments on the javaScript side. Here is what the code looked after. Just be sure to not copy & paste but rather compare the content because we might have used a different selector/variable name. Hope that already helps. :-) pastebin.com/4vujjfiw
@@CodingWithJan Hallo Jan, vielen Dank für den großartigen Code. Es hat mir sehr weitergeholfen. Ich nutze auch das Debut Theme und auf der Desktop View funktioniert dieser problemlos. Leider habe ich bei der mobilen Ansicht das Problem, dass wenn ich eine andere Variante auswähle die Bilder in der Slideshow in einem neuen Tab geöffnet werden und das Hauptbild sich nicht ändert. Ich habe die Zoom Funktion ausgeschaltet. Kannst du mir da bitte weiterhelfen? Liebe Grüße
You mention early on in the video that we will have to change image for media in newer version of the coding program, would this also affect the function that we create later on? Would I have to change references to image to media as well? I am currently getting a reference error stating that "Cant find variable $"
Hi, Is it possible with the ready theme as well?? Because I am using the Ella theme and it has slick slider implemented for both the navigation as well as for the images.. Also, I have tried to reinitiate the slick slider again but it didnt work .. Any suggestions ??
Thanks!! I'm beginner and it works pretty well :D But I have some issue with thumbnails slider when product displays on mobile, the carousel is crazy when switch colors :( could you help me?
Hi I‘m currently integrating this to my Dawn Theme. Can you help me and let me know where to find the slate.Variants in the global.js. Everything works fine except for the part of the page initialization, there still all product images are shown.
Thanks to your video I was able to figure this out! I just have one small issue, on some product pages (not all) when I switch to certain colors the thumbnails become disorganized (1 in the first row, 2 in the second row) instead of remaining neatly in the first row together. Any ideas why this might be? thanks for your great instruction! keep it up
Hey, The issue may be caused by the layout classes, a simple fix would be to reduce their width with class: .my-colors-watch{ width:50px } You will have to give this class name to the radio labels. I hope this helps :-)
Can you please tell me where the data is supposed to be inputed in the supply theme. I tried to follow your steps, but I cannot find the onSelectchange in the theme.js. Thanks again
Hi Jan, love your videos. is there a way to change the size displayed in the cart of say a canvas size when you click on one of the image Thumbnails so the customer doesn't order the wrong size because when you press on one of the thumbnails the size doesn't change? If i change the size the image will change but i want it the other way round if you know what i mean. Many thanks Gareth Using Debut theme.
Thanks for the useful video. I've a question, I'm using Brooklyn theme and tried this function. The functionalities worked as expected on the Desktop version, but it's not working at all on the Mobile version, so could you please solve that for us? Thanks in advance and wish you the best ❤
Hey! Did you manage to get a response for this? I am also facing trouble getting it to work correctly for me. Please let me know how you managed to do so.
I love your channel and applied some of your stuff, but now I have on my product page too much scrolling ... I want the products and the different model of that product not to make the page long... don't want to pay for apps.. do you have anu solution.
Hey mate need help seems like my input selection buttons are not linked, I can pull the info in the console but the images aren't changing and its a custom PALO ALTO theme which was created by someone and I'm trying to figure everything out. any help would be really appreciated @Coding with Jan - Shopify Developer
This is super helpful, Just one question. If I would want to link the filtering function to a text or a button rather then the variants, would that be possible too? For example filter on model X and see all model images of that model?
HI, Jan hope you are well I am part of this channel for 1.5 years your channel helps me a lot in understanding Shopify. My question is: What if we don't want to show colour JPG images that you uploaded in assets instead of that if we want to show the first variant image for each colour how to achieve that? For Example instead of red colour JPG, the first red T-shirt images come up and same with the rest of the colours variants how can we do that, please guide us
Hey Amit, Thank you so much for your fidelity 🙌 You can do it by using the product.featured_image liquid object instead of the color swatches. shopify.dev/api/liquid/objects/product#product-featured_image Hope this helps! :-)
Thank you so much for this amazing video! I managed to implement the filter in Dawn theme with pure JavaScript but I couldn't make it work when the page loads like you did in 12:38 can you please give me a hint
Hey, You will have to look for a function that gets call when the page loads, or you can just put the code for the filter at the end of Global.js I hope this helps 😄
Can this tutorial vary depending on what theme is being used? I am working to follow along but I can't seem to find the liquid files that are being altered in this tutorial. Or if you hve freelance developers that have some availability, I'd love to chat.
Hi Jan, When I try this code, my thumbnails disappear and when I change selected color, the main image does not change. Do you know a quick fix for this? Am I forgetting something? Thanks.
🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=multiple-variants-yt
👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
Very Rare to find video which is complete to the point and has no irrelavant talking. Thanks a lot .
Hello, thanks for the great tutorial! However, I, as a complete beginner, am unable to apply those steps to new json version of files with Shopify 2.0.
Could you help me with that?
Hello there, would you happen to have figured out a way around this?
Bro, this tutorial helped me out of a problem I was stuck with for the past week.. You are a life-saver. Love you for it, and love your work! Cheers.
Wow! Thank you so much for this tutorial, it is exactly what I was looking for. The way that you explain each step is so helpful. You saved me hours of frustration of trying to figure this out on my own! Thanks a million!!
Sir, your tutorial is awesome and you explain everything so well and smooth, you're underrated
your instruction is very concise and informative. You explain the logic of the code in a way that I can understand even though I don't do any coding. Thanks for sharing!
Hey, you're super welcome :-)
I have learned new thing in shopify to edit and create function in shopify
Hi Jan, Your videos so helpful for us because no one want to share the knowledge like you. Your are great
Just what I was looking for. Thank you
Very welcome :-)
You are seriously such an amazing teacher! thank you so much this was exactly what I was trying to figure out!
Hey there, Jan! Hope you and your family are safe and well.
Thank you so much for working on this channel and sharing so much valuable information for free! You should create a Shopify development course, I would definitely buy it!
Regarding this implementation, I was wondering if there's another way to target the images other than the alt text. Since alt text is so important for accessibility and SEO, it'd be ideal to be able to give the images a meaningful alt text pertaining to each image as opposed to the same general string. Is there another way? Maybe targeting an ID or something like that? Thanks again, you're amazing!
is there an updated version for this?
Thank you so much! This was the most helpful. Any tips to replicate this effect when on mobile?
Thanks so much for your tutorials Jan. I have been looking for product variation changes for such a long time. Thank you.
Super welcome :-)
Awesome you find that helpful
Very dope!!!! You definitely saved my store with this video... Thanks a lot
Thanks that was one of the best tutorials i got on youtube expect there is very limited content for shopify but that is fantastic.
Thank you :-)
Kamal Bacha! Love your tutorial, Amazing teaching method. Thanks for providing such an amazing tutorial.
Hello Jan! Hope all is well. Excellent content! Many thanks for sharing the video. By following the steps, I was able to implement it on Prestige theme (desktop version). However, on mobile version it doesn’t load the respective images upon clicking the color variants. The theme is utilising Flickity slider to display the product images (scrollable). Is there any way we can get this work on mobile device as well? I will look forward to your insights. Thank you!
Hi Santosh, I have prestige theme as well..I tried implementing Jan's code but I was getting lost. Could you share the code and files you modified?
Hello @Santosh would you please share how you implemented it on Prestige?
gush! you're amazing! I subscribed to this channel and I love it so much! I just keep following every new thing! I started from the video about metafields and just fell in love! thank you jan!
Wow, that's some fantastic feedback, thank you so much 😃
Cheers to Shopify Experts :-)
@@CodingWithJan jan can you please create a video about coding inside shopify email notifications? I'd love to add product suggestions to my "order confirmation" email sent by shopify notifications. as it's a high open rate I'd like to use it even better for cross-selling
Quick side note on page speed/loading times:.
Per default, all the thumbnails will load when someone visits the product page.
In this tutorial, we only filter them by their visibility.
If you have many different variants with lots of thumbnails you might consider to use an app instead.
One that would only load requested thumbnails is called "Variant Image Penguin"
apps.shopify.com/variantimagegrouper
Hope you have a good day :-)
hello, really appreciate the videos you make
could you show as how to change the description of a product when changing varient please ( really need it since i'm selling skin care )
which app?
Thats a nice On-page optimazation hint! Will try that! I use a looot pictures
You're amazing Jan, very useful tutorials in a simple way, greeting from Egypt.
Thank you so much for this video. Can you please do a tutorial where (for example) cust can choose t-shirt, long sleeve, or hoodie - then choose color - then size? Thank you again!
Hi Jan, thanks for the video. Is it possible to have specific images shown up when selecting two variants colours i.e. our product can be composed of two colours?
Hi Jan, Thank you for all your helpful and detailed videos. One question, you mentioned below that "if you have many different variants with lots of thumbnails you might consider using an app instead." I fall in that category, which app do you recommend that would work best ?
Thank you!
Hello, amazing tutoríal. However when switching to mobile view, the thumbnails disappear ! How to fix this? Some of them stay in the default variant however in the next ones they are not there...any solution?
hola, pudiste solucionar? me pasa lo mismo
@Coding with Jan - Shopify Developer - great video explaining the logic in details. I am using a paid theme - can can't seem to find the _onSelectChange function; as they suggest we do not touch theme.js. Can you point how this can be done.
Thanks for this. I would love this in a module however and the fact that the variant URL brings the images without JavaScript. So when you load the URL, it fires the images correctly embed in liquid rather than JavaScript for the first initial load as this can help SEO and update SEO URL and page titles.
Hi Jan, thanks for that Video. Is it possible to hide all pictures of the variants and just show some titel pictures. After selecting the variant only this the color will show up. Thanks again und schöne Grüße aus Wiesbaden :)
Do u know now?
Amazing content and constant interaction with the viewers, such a great find. I needed a solution for most recent project and using the alts was all I should have came up with by myself but couldn't. Thanks, saved me a lot of research time, definitely going to search your videos for more useful guides. And I'll sure be back for any further ideas on how to work around shopify's limitations (such as the "1 image per variant" limit) to build features such as this one on shopify stores without having to use third party apps. I'll post a link to the store I'll implement this in once it's done, I'm working on a way to lazyload the hidden images so as not to take too large of a hit on performance. Ayways, thank you. Keep it up!
Hi Gustavo, nice to meet you.
Thank you for taking the time to write down your positive feedback :-)
Looking forward to here from your project.
thank you sir your codding method is best and easy to understand.....so helpful to me
Just found your channel and I am hooked! Great video and great teacher!
DUDE! You are amazing this was so helpful, best and easiest way to do this I have found. thanks!
As a beginner to coding, I am having trouble understanding or following the steps with this guy. Been following the steps and nothing changes for me
I am unable to find the code that he is copying and pasting to find. Can anyone help me with this?
Hello, do you know if it’s possible to create a basic returns functionality within customer accounts, and other ways to make the customer account section more robust? Thanks!
Hi there, in order to process customer returns you definitely need some sort of app.
Order Processing is nothing that could be done on the front-end of your website alone.
Here it really depends on how you want to process your returns. Some people have 3rd party fulfillment services that offer app integrations :-)
Do you have a video on adding a Product Image Slider/Carousel? I'm using the supply theme and want to change to it. I used to use a Mobile Gallery app but it was from Beeketing and they got banned.
did you figure it out?
@@canvasbykaya Nope I'm afraid not. I had to use an app that costs $9.99 a month and while it works well, I don't think it should be something you have to pay for when beeketing did it for free.
Hey Jan, you basically filtered the images by the alt-tag. Is it also possible (since alt tags are helpful for SEO) to give the partially the same name? Let's say that the alt tag is: "Nachhaltiges T-Shirt aus Baumwolle - red" and the other color options gets the tag: "Nachhaltiges T-Shirt aus Baumwolle - black" and then you filter it by Alt-tag contains "Red" or something similar?
Thank you for your help!
Thanks you Jan for the clear instructions and explanations. Everything works as it should!
Wow this video helped me understand Liquid so much better, thank you!!
I didn't found onchage function in story theme (paid theme)
Hi @Coding with Jan - Shopify Developer
Grate Work it's really helpful .!
But one issue with mobile device can you please suggest to batter way for mobile device
i am using prestige theme of shopify threre i am drop down for color selection and image groping is not happening, but my code is complete different , can you please suggest ?
Great tutorial! Any idea to apply the same logic in the Parallax Theme?
Hi! Thank you so much for all your videos. It's soo helpful. I'm wondering why Shopify doesn't integrate this feature which are a pure necessity when you sell variants products.
Whatever.
Keep making video tutorial, this is really amazing ! Cheers
Hi Jan, How can we change the description of variants when selected. I've been trying various methods but I'm not succeeding. A video on this would help a lot. Thx!
Thanks for this post Jan. If a product, such as a shirt, has two optional colors (e.g., sleeves & body) . How could you code this without assigning a variant for each possible combination. I'd like to have one variant with say two options (sleeves & body) and display the colors on the same image. When the product is sent to the cart, it would have sleeve & body colors as attributes--the same way that you specify attribute: size for a "red shirt" Another question: Can I have multiple photos triggered by user-selected options within the same variant. Thanks.
Hi Jan. It is possible to update this video for the V15? Thank you in advance
Hi,
Good advise!! the only issue I see here is, if you use the alt text for multiple variant images, what happens with the SEO alt text, which is crucial for Google? Do you have a solution for the SEO alt text?
Hi Jan, I have an issue on mobile the thumbnails just disappear when clicked. Maybe the hidden images are still in the thumbnail slider? I added you on insta if you need my shop link thanks
Also having this issue. It seems like slick slider Shopify uses still thinks the elements are there even though display is set to none.
@@randy-russ Let me know if you manage to fix it. Haven't been able to contact Jan yet
Hey Guys, finally got to test this myself.
You were absolutely right and we might need a small adjustment here.
Here is what worked on mobile for me. (You might consider to duplicate your themes first)
I might also have some different variable name here so please don´t just copy and past but rather compare :-)
let me know if that helps
if( variant.featured_image != null) {
$('[data-thumbnail-color]').hide();
$('.slick-slider').slick('slickUnfilter');
thumbnail_selector = '[data-thumbnail-color="'+variant.featured_media.alt+'"]';
$(thumbnail_selector).show();
$('.slick-slider').slick('slickFilter',thumbnail_selector);
}
else{
$('.slick-slider').slick('slickUnfilter');
$('[data-thumbnail-color]').show();
}
@@CodingWithJan This did work yes thanks! Do you know if it's possible to disable the slider on mobile and just use the same block of images that desktop shows?
@@CodingWithJan This is awesome! However, I'm having a hard time implementing the adjustment because my theme uses Flickity instead of Slick slider :( Flickity can't Filter or unFilter. Any idea how I could get over this?
How can I make group image for 2 variants speciafically flavor and size? Sample I have 3 flavor and 3 size. On the flavor I can group the image variant but for the size I can't group the variant base from the flavor. I trying to acquire to get change the variant image for the size base from the flavor. How can I do it?
Hey, do you maybe know, how to show different band color variations for different watches on the product page? (Variation1: Watch; Variation2: Band Colour)
I would be so grateful! 🌟
Hello, thank you for the tutorial. I have a question: In our scenario, we need each variant to display a common initial image, followed by specific images highlighting the distinctive features of each variant.
For instance, we sell a football goal that maintains a consistent appearance but comes with different hooks for the net. Ideally, each variant would showcase the football goal first, followed by detailed images of its unique features, such as the hooks.
Do you have any insights on achieving this?
Additionally, we're interested in integrating this setup with an ERP system that manages product and variant information.
Do you know if this capability will be native in Shopify soon? It seems fundamental to have variant images and display only the selected variant's images.
What are your thoughts on this?
Hi Sven,
initial thought: This is too big of a project for a UA-cam comment 😁
I can definitely help you find a qualified developer though.
If that sounds interesting, could you kindly fill out the following form so we can streamline this better internally:
codingwithjan.com/developers
Greetings
Thank you! I was able to implement this in canopy theme with a little change on the code, you were very helpful
Hi Jan! I did everything in your video but nothing change in the product page. My theme is Palo Alto, could any one help?
Can you please redo this but with the new capabilities of Shopify 2.0 / Dawn? For example, images could now be variant metafields
it's the same thing but instead of image by alt tag you would be doing it by metafields
Hey, any chance you could help me to get this working on mobile as well? I see it does not work for mobile product pages. I am using the Brooklyn theme.
Hey Justin! Did you ever find a solution for this on mobile?
@Lets Build Shopify : Great Video. The only challenge is I am using Minimal theme. I think it would be great if you could make a similar video for the Minimal theme as well as Minimal and Debut are the two themes most of the newbies use.
Vishnu, nice to meet you. Love that you are speaking of a challenge instead of a problem 😃
I'll have a look on how different the implemention is and I'll give you an update :-)
@@CodingWithJan Thank you! I too would like to understand how this code changes to work with the theme Minimal. I gave it a try but without success.
Vielen Dank für dieses Tutorial... Habe wie im Video erwähnt festgestellt, das bei mir statt image media verwendet wird. Habe soweit alles umgesetzt, allerdings scheint inzwischen einiges in Debut-Liquid geändert worden zu sein, so dass das Ergebnis nicht funktioniert...
Wäre toll, wenn hier ein Update kommt.. Vielen Dank im voraus...
Hello! Can it be allowed to list variants as separate products in my store by writing code?
in some cases some of the thumbnails you want to show for all colors, so if the alt was 'all' ... I show it anyway .. just add
$(thumbnail_selector).show();
$('[data-thumbnail-color="all"]').show();
do you know how to do this without jQuery? I'm stuck as I don't know how to get the data into js. Thanks
@@ardisepehri Try this. Edit theme.liquid, you need to add jQuery there, look for the first added script, that line will start with
Do you know how to change the thumb nail images to arrows instead so that users can click through to see the images ? I can't seem to find a way to do it anywhere but your videos are really great, and have helped me so much with other work. Thank you :)
Hello Jan
In the empire theme, i am not able to find currentVariant, I have done every thing just wanted to land current variant
Thank you for this tutorial it is working as it should. I also added the revised js codes from a comment you replied to. There is one problem though, when you select an image it goes to full screen instead of replacing the featured image to that one. Do you know how to fix that by any chance?
Hi Jan - brilliant video, super clear, thank you. We are using gempages with the Debut theme. I've managed to hack "data-thumbnail-color" by messing directly with the gempages product template, but I'm not sure of the next step to filter out unwanted images as the code in theme.js is not being called. Any ideas where to add the filter thumbnails function when using gempages?
I have followed this video and acheived the goal for desktop. but in mobile view this concept is not wokring fine for slick slider. can you please help on mobile view slick slider or how to run same desktop functionality on mobile view. please help!!
Thanks
Hello, cool video.
Will this work for all my products, even if they all have other Variant names?
Great in-depth tutorial! I am currently using the Venture theme and everything works as it should up to the point where you hard code this "var thumbnail_selector = '[data-thumbnail-color="combo"]';" But does not work when I put the var "selected_color" in place of the hard coded "combo". Any suggestions?
Awesome video!
Could you please show in a video how to add an image slider to the product page?
Keep doing! You're the best!
Hey Jan, thanks for your great feedback :-)
Definitely, I could cover at some point in the near future.
I already have a video on adding a slider to the homepage.
Until then you could try to create a new product template and merge/blend all the code and the schema settings from that slideshow with your new product template and it should work in a similar way.
Hello there. First of all, thanks, you are a lifesaver. I really enjoy your videos. I do have a question tho. How can I filter by the color category and not by alt text of the images? I need the alt-text for other things.
One question, I want to upload multiple files to one product
I mean the customer can upload multiple images I am added the come from you last video fir upload file and work perfect but online can upload one image even if and put the code many time to repeat still upload one file , Thank very much for your video are amazing
I have a paid theme, and the code is different in JS than the one you have explained. I tried to implement the same logic and added filterthumbnail function in the same format used in my theme. But it did not work, the front end goes blank hehe. You have made a great job explaining though, the logic and the idea is super clear.
Hi Jan, This is a great video. Is there a away to do that exact functionality without coding?
Yes it's possible using a paid app like Color Swatch Pug
apps.shopify.com/collection-swatch-pug
Have an awesome day😀
Hi Jan
I have followed same steps in debut theme but i found issue when i completed color swatches video i have created the variants and assigned variant images, those images are showing in slider after that i have added same images in product featured images like in video it will show twices.And this functionality is not working.
Hi Jan, great tutorial! Based on your Best Shopify Theme 2021 video we went with the Turbo Shopify Theme. Would creating a similar behavior be possible with this theme as well?
Hey, in my Shopify store I have added more items to my existing collection but the photos do not appear on the site, please help me what should I do?
Very good explanation, just what i needed!!! thank you very much
Thanks so much for sharing your talent! I am so happy that I did get it to work with the Debut theme for the desktop screen. But on my mobile phone the variants are not displaying correctly. Is there also @media code that needs to be changed for the Debut theme? I heard you mention it for other themes. Or is there something in my code that I should check? Again thank you. Your videos are excellent.
Hi Anne, nice to meet you :-)
Really liked reading your awesome feedback.
I remember that someone else had a similar issue on the mobile view.
We made some small adjustments on the javaScript side. Here is what the code looked after. Just be sure to not copy & paste but rather compare the content because we might have used a different selector/variable name.
Hope that already helps. :-)
pastebin.com/4vujjfiw
@@CodingWithJan Thank you a million times! It works beautifully. :-)
@@CodingWithJan Hallo Jan, vielen Dank für den großartigen Code. Es hat mir sehr weitergeholfen. Ich nutze auch das Debut Theme und auf der Desktop View funktioniert dieser problemlos. Leider habe ich bei der mobilen Ansicht das Problem, dass wenn ich eine andere Variante auswähle die Bilder in der Slideshow in einem neuen Tab geöffnet werden und das Hauptbild sich nicht ändert. Ich habe die Zoom Funktion ausgeschaltet. Kannst du mir da bitte weiterhelfen? Liebe Grüße
You mention early on in the video that we will have to change image for media in newer version of the coding program, would this also affect the function that we create later on? Would I have to change references to image to media as well? I am currently getting a reference error stating that "Cant find variable $"
Debut theme is kind of outdated now. How can we do this same thing in dawn theme??
Hi, Is it possible with the ready theme as well?? Because I am using the Ella theme and it has slick slider implemented for both the navigation as well as for the images..
Also, I have tried to reinitiate the slick slider again but it didnt work .. Any suggestions ??
Thanks!! I'm beginner and it works pretty well :D But I have some issue with thumbnails slider when product displays on mobile, the carousel is crazy when switch colors :( could you help me?
I already found your answer and now it works perfect!
Hi Josue :-)
Perfect, problems that solve themselves are the ones I like the most 😁
Awesome you were able to research the solution
@@josuehuamanrojas5512 How did u manage to resolve the mobile interface problem? I am facing a similar situation.
hi do you know how I can get more than 100 variants per listing on shopify debut theme? please
Hey, Hope you're a well,
How does one get a product description beside a product image, there's no function in Shopify to do this.
Help Please
Hi I‘m currently integrating this to my Dawn Theme. Can you help me and let me know where to find the slate.Variants in the global.js. Everything works fine except for the part of the page initialization, there still all product images are shown.
Thanks to your video I was able to figure this out! I just have one small issue, on some product pages (not all) when I switch to certain colors the thumbnails become disorganized (1 in the first row, 2 in the second row) instead of remaining neatly in the first row together. Any ideas why this might be?
thanks for your great instruction! keep it up
Hey,
The issue may be caused by the layout classes, a simple fix would be to reduce their width with class:
.my-colors-watch{
width:50px
}
You will have to give this class name to the radio labels.
I hope this helps :-)
Can you please tell me where the data is supposed to be inputed in the supply theme. I tried to follow your steps, but I cannot find the onSelectchange in the theme.js. Thanks again
Just found your channel, let the learning begin!!! Thanks man!
Awesome, that's the vibe we need 😃 🚀
can this be done for size and color?
Hi Jan, love your videos.
is there a way to change the size displayed in the cart of say a canvas size when you click on one of the image Thumbnails so the customer doesn't order the wrong size because when you press on one of the thumbnails the size doesn't change? If i change the size the image will change but i want it the other way round if you know what i mean. Many thanks Gareth Using Debut theme.
Thanks for the useful video.
I've a question, I'm using Brooklyn theme and tried this function. The functionalities worked as expected on the Desktop version, but it's not working at all on the Mobile version, so could you please solve that for us?
Thanks in advance and wish you the best ❤
Hey! Did you manage to get a response for this? I am also facing trouble getting it to work correctly for me. Please let me know how you managed to do so.
I love your channel and applied some of your stuff, but now I have on my product page too much scrolling ... I want the products and the different model of that product not to make the page long... don't want to pay for apps.. do you have anu solution.
Hey mate need help seems like my input selection buttons are not linked, I can pull the info in the console but the images aren't changing and its a custom PALO ALTO theme which was created by someone and I'm trying to figure everything out. any help would be really appreciated @Coding with Jan - Shopify Developer
is there anyway to prevent the scroll feature from showing a different color so they can only switch by clicking on the swatch??
This is super helpful, Just one question. If I would want to link the filtering function to a text or a button rather then the variants, would that be possible too? For example filter on model X and see all model images of that model?
This is a bit more complicated, would be better to ask a developer.
HI, Jan hope you are well I am part of this channel for 1.5 years your channel helps me a lot in understanding Shopify.
My question is: What if we don't want to show colour JPG images that you uploaded in assets instead of that if we want to show the first variant image for each colour how to achieve that?
For Example instead of red colour JPG, the first red T-shirt images come up and same with the rest of the colours variants how can we do that, please guide us
Hey Amit,
Thank you so much for your fidelity 🙌
You can do it by using the product.featured_image liquid object instead of the color swatches.
shopify.dev/api/liquid/objects/product#product-featured_image
Hope this helps! :-)
Thank you so much for this amazing video! I managed to implement the filter in Dawn theme with pure JavaScript but I couldn't make it work when the page loads like you did in 12:38 can you please give me a hint
Hey,
You will have to look for a function that gets call when the page loads, or you can just put the code for the filter at the end of Global.js
I hope this helps 😄
hi Yan, how can same be achived with a slider slides?
Can this tutorial vary depending on what theme is being used? I am working to follow along but I can't seem to find the liquid files that are being altered in this tutorial. Or if you hve freelance developers that have some availability, I'd love to chat.
Hi Jan, When I try this code, my thumbnails disappear and when I change selected color, the main image does not change. Do you know a quick fix for this? Am I forgetting something? Thanks.