🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice 👨💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer
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, 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?
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!
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 )
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
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
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.
@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 :-)
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();
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 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! :-)
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 :)
Hi everyoe, first of all thanks Jan for the help ! Everything worked until the last step when I want to have only the filtered option variant showed on my screen. I don't have the same code as you : here it is : function Variants(options) { this.container = options.container; this.product = options.product; this.originalSelectorId = options.originalSelectorId; this.enableHistoryState = options.enableHistoryState; this.singleOptions = this.container.querySelectorAll( options.singleOptionSelector ); this.currentVariant = this._getVariantFromOptions();
this._filterThumbnails(this.currentVariant);
this.singleOptions.forEach( function(option) { option.addEventListener('change', this._onSelectChange.bind(this)); }.bind(this) ); } Maybe someone can help me ? It will be really great ! Thank you
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.
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?
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!
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.
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.
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 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?
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 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?
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.
@@TheRooks1215 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.
@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.
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!
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?
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!
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 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, 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 TH-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
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
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.
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?
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, 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?
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 - 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?
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 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.
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, 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, I need to do that on my page. But I don't have any experience doing these things and I don't know of someone who can do it. Is it possible that you can help me with this work?
Hi Fernando, implementing this myself goes slightly beyond what I can offer on this channel. You might want to reach out to a developer. If you like I can get you in touch with some ambiguous freelancers :-)
Hello, thanks for answering. I understand that asking for something like that is confusing. It is more like a job offer, if you can help me by making this type of change on my page I would pay you or, as you say, if you can help me by contacting someone who does. I would appreciate it very much. My email is fernando@hickok.com.mx Abrir en Google Traductor@@CodingWithJan
@@FernandoHernandez-me4xt super welcome and thanks a lot for your interest :-) At the moment I'm a little bit swamped with work, but I'd be happy to forward your email. Nice meeting you and greetings 👋
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 ??
Hey Jan, love your videos! Is there any way to do this with out using the image alt text? I was hoping to change the alt text for SEO purposes. Thanks!
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
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 :-)
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
Hi Jan, Thanks for the tutorial, I have implemented all things as per the video, but It's not working data-thumbnail-color="{{image.alt}}" When I see page source it's showing only data-thumbnail-color I have added alt for all thumbnails Could you pls help me? Thanks
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan.com/personal-career-advice
👨💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-developer
Very Rare to find video which is complete to the point and has no irrelavant talking. Thanks a lot .
I have learned new thing in shopify to edit and create function in shopify
Sir, your tutorial is awesome and you explain everything so well and smooth, you're underrated
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!!
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 :-)
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!
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
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!
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?
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.
is there an updated version for this?
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 :-)
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
You're amazing Jan, very useful tutorials in a simple way, greeting from Egypt.
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
DUDE! You are amazing this was so helpful, best and easiest way to do this I have found. thanks!
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
Kamal Bacha! Love your tutorial, Amazing teaching method. Thanks for providing such an amazing tutorial.
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
thank you sir your codding method is best and easy to understand.....so helpful to me
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!!
Thank you! I was able to implement this in canopy theme with a little change on the code, you were very helpful
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.
@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.
Just found your channel and I am hooked! Great video and great teacher!
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
Hello, thanks for the video. This is very helpful. This could be even better if featured image is shown alongside all variants.
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!
Very good explanation, just what i needed!!! thank you very much
I am unable to find the code that he is copying and pasting to find. Can anyone help me with this?
Just found your channel, let the learning begin!!! Thanks man!
Awesome, that's the vibe we need 😃 🚀
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! :-)
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?
Hi everyoe, first of all thanks Jan for the help ! Everything worked until the last step when I want to have only the filtered option variant showed on my screen.
I don't have the same code as you :
here it is :
function Variants(options) {
this.container = options.container;
this.product = options.product;
this.originalSelectorId = options.originalSelectorId;
this.enableHistoryState = options.enableHistoryState;
this.singleOptions = this.container.querySelectorAll(
options.singleOptionSelector
);
this.currentVariant = this._getVariantFromOptions();
this._filterThumbnails(this.currentVariant);
this.singleOptions.forEach(
function(option) {
option.addEventListener('change', this._onSelectChange.bind(this));
}.bind(this)
);
}
Maybe someone can help me ? It will be really great !
Thank you
Thank you so much! This was the most helpful. Any tips to replicate this effect when on mobile?
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
Very helpful. You explained in easy way. And, I hope you will prepare lecture on metafields as well which I suggested month ago.
Super welcome Ankush.
Didn't get to prepare that yet.
But as you ask this for the second time I'll uplaod that within next week 😃
@@CodingWithJan no no man....be calm. It was trying to remind you to set that task in queue.
Do whatever is on your priority. 🙌
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.
This broke my store. Probably something I did but proceed at your own risk. I had to start all over.
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
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!
Great content. I took the concept I am using it on a different theme which is a little more complex (MR Parker theme).
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?
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.
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?
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?
Nicely explained, very well demonstrated...
Thank you :-)
Hi Jan! Nice detailed tutorial! I hope you can make a video for mobile version. Thank you!
Thank you so much, you make learning so easy
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 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?
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?
@@TheRooks1215 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.
thanks buddy, its really work for me.
I didn't found onchage function in story theme (paid theme)
@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.
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!
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?
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!
Does this work on boundless theme? Cause I cant find theme.js and also in theme.js.liquid, I cant find onSelect function
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 :-)
Another great tutorial 👍🏻
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, 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 TH-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
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
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.
This is amazing. Thank you so much!
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?
Thank you bro.. good place to learn shopify
Thank you. Super welcome :-)
Great tutorial! Any idea to apply the same logic in the Parallax Theme?
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. It is possible to update this video for the V15? Thank you in advance
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?
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 - 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?
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?
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 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.
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?
Another great tutorial!!!!
Hi Jan! I did everything in your video but nothing change in the product page. My theme is Palo Alto, could any one help?
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! 🌟
Wow! Great content, subscribed!
Greetings from Spain :)
Awesome you like the content. Greetings from Germany :-)
Hello Jan
In the empire theme, i am not able to find currentVariant, I have done every thing just wanted to land current variant
Hello, I need to do that on my page. But I don't have any experience doing these things and I don't know of someone who can do it. Is it possible that you can help me with this work?
Hi Fernando,
implementing this myself goes slightly beyond what I can offer on this channel. You might want to reach out to a developer. If you like I can get you in touch with some ambiguous freelancers :-)
Hello, thanks for answering.
I understand that asking for something like that is confusing. It is more like a job offer, if you can help me by making this type of change on my page I would pay you or, as you say, if you can help me by contacting someone who does. I would appreciate it very much. My email is fernando@hickok.com.mx
Abrir en Google Traductor@@CodingWithJan
@@FernandoHernandez-me4xt super welcome and thanks a lot for your interest :-)
At the moment I'm a little bit swamped with work, but I'd be happy to forward your email.
Nice meeting you and greetings 👋
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 ??
Thank you for your tutorial
Hey Jan, love your videos! Is there any way to do this with out using the image alt text? I was hoping to change the alt text for SEO purposes. Thanks!
is there anyway to prevent the scroll feature from showing a different color so they can only switch by clicking on the swatch??
It won't work on the mobile view. Please check mobile version first
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
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 :-)
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
Hi Jan,
Thanks for the tutorial, I have implemented all things as per the video, but It's not working data-thumbnail-color="{{image.alt}}"
When I see page source it's showing only data-thumbnail-color
I have added alt for all thumbnails
Could you pls help me?
Thanks