🎯 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

Superb tutorial Josie you nailed it. Came back to your channel after some months and I loved the interaction of Jan Frey but He is doing other great stuff 🙌

That's my evening sorted. Looking forward to giving this a go. Thanks Jan and Josie :)

@CodingWithJan

Жыл бұрын

Some good night Javascript 😄

Thank you Jan as always for your useful tutorials.

@CodingWithJan

Жыл бұрын

Super welcome! :-)

Any chance you make a video showing the variant metafields way that some have mentioned? Then you could talk about the differences and pros/cons and then we could make our own decision on which version we would implement? I just like knowing all the possibilities. Thanks!

On point. Thanks for this brilliant tutorial.

@CodingWithJan

Жыл бұрын

Thanks so much for the great feedback, nkt ! :-)

Hello Jan! I was really looking forward to you making a video in which you can tell us how to integrate gpt3 in the already installed chatbot in shopify or anything related to the usecases of gpt3 in shopify. It would be really helpful. Thanks in advance

A very informative and helpful, thenks a lot

Great tutorial, thank you Jan. Just one thing, further modification is needed for this to work on mobile as well.

keep on uploading these detailed and informative videos, there aren't many sources to learn Shopify out there beside doc

@CodingWithJan

Жыл бұрын

More to come!

Very Very Informative!

Amazing!!! thanks a lot!!!

As always, great tutorial Jan! Any chance you can do one about deploying each product variant (e.g. color) as a unique product card on the collection page?

@arbin1293

2 ай бұрын

kzread.info/dash/bejne/dIOu1MuOqbC-ntI.html

This is the traditional way achieving this and there are SEO & accessibility implications to it that others have pointed out I would have loved to see using Variant Metafield Lists with the File Reference (Image) type to achieve the same effect but in a cleaner way

@CodingWithJan

Жыл бұрын

Hey Max, I think you're right, using variant meta-fields would have been a bit cleaner! At the same time, also a bit more complicated, cause you'd also have to make them available on the current_variant JS object. So that was kind of the comprise here for a simpler solution, but still agree with the above 👍

Excellent video! Thank you so much. It works perfectly when the Desktop layout is on "Stacked". I guess it needs some adjustment to make it work with Thumbnails or Thumbnail carousel.

@OutBoxAds

Жыл бұрын

absolutely looking for the same

Excelent video, i loved it. Thanks

@CodingWithJan

Жыл бұрын

Glad you enjoyed it! :-) 🙌

Hello, thanks for the great tutorial. Really useful, please continue your great work educating us, newbies, on how to achieve these things. Regarding this issue, i have a question for you. As you know, nowadays people are getting more visual and their searches are done a lot in the images section of search engines, instead of searching for pages. The Alt Text of the images is one the most important fields to insert SEO relevant information that leads people to our stores through the images they find. So, is there anyway to use the Alt Text field to create this solution, which is using the Alt Text just for one word with the color we want, and also allowing us to insert our SEO friendly description of the image? Again, thanks for your support and tutorials. Keep up the great work.

Great video Jan [as always]! We here at Clean Canvas have provided this in several of our themes for some time now and it is indeed a very popular element with merchants. Hope to see you again soon - Marcus!!

I think this is one I looking for

Ive had to use other function names in my theme but it feels so good, having such a slim solution to a problem, I would normally have to install a plugin for.

@sul3529

6 ай бұрын

what theme you used?

Excellent video. Great Job. Can you please do a tutorial on how to add color swatches to the filter instead of just plain check boxes? I am referring to Dawn 8.0. Thanks.

I would love to see how you handle a nice, optimized image snippet

Hey great stuff thank you so much. I only have a small problem in my store I have three color options available. Two of the images work when I select them, but when I hit the third option no image appears? What can I do?

This is only working for Color Variant. If there are different images for Size Variant to display, it will not work. Would be great to have an example for it. Thank you anyway for this detailed tutorial, Jan!

This takes too long. I want an app that manages this seamlessly. It's annoying that Shopify doesn't allow you to just click the variant and add the images internally.

@KaizenClip

Жыл бұрын

I f***g agree with you. Spinning my head arround for 2 weeks now

@thage0

Жыл бұрын

@@KaizenClipexactly I think its stupid asf

@Acostajmarlon

10 ай бұрын

So there isn't an app?

@destrabtw

10 ай бұрын

@@Acostajmarlonany found?

@Acostajmarlon

10 ай бұрын

@@destrabtw haven’t found any my friend :(

This is a very good video & I apply this to my store but it's working only in images stacked layout. If I select carousel layout it's not working properly & in other layouts. kindly share a video in which the variant switcher work dynamically on every layout. thank you

Can you update this tutorial for the latest version of dawn?

Thanks Jan and Josie for a very helpful video. Is there an alternative way of achieving this without having to populate the image alt text field with variant identification info? My Dawn2.0 theme uses similar .js code to solve this variant image only rendering problem, but I'm concerned, from an SEO pov, that I can no longer use my image alt text fields. Thanks

Hi, this video is exactly what i was looking for but for some reason when i copy the product_media-item there is no highlights and showing of this variable in the code is there anything that could help this please?

Can same be done with thumbnail carousel ? If yes, can you please make a video for that.

How to group the image base on the color and also base on the size. Sample if Some one click red it will show red but then when someone click small only images for the red , small variant will show, smae with red and medium, and so on to other variant

Hey man thanks for all the great videos, they've really helped me figure out Liquid / Shopify development. Could you elaborate on how to use the variant meta fields a little more for this same task? I probably only need a few hints. I was thinking of incorporating a variant metafield called color (which I already use for swatches) and then putting that color code into the filenames of the variant images...but I'm keen to know if there's a smarter way. That way you'd still get nice alt tags on your images and also have this functionality.

@johnmcaulay4348

Жыл бұрын

Oh I think I see what you're getting at...add a file meta field to the variant that allows you select multiple images yeah?

@johnmcaulay4348

Жыл бұрын

Yep I got it, thanks anyway for pointing me in the right direction.

It was amazing tutorial but my product contains sizes too, and it creating conflict when I select new size.

Hey, thank you for the useful video. I trierd to find the HTML Class in the "Refresh" Theme, but i couldnt find it. I tried it on the "Dawn" Theme and did find it immadiately. Can anyone help?

It works only for default shopify theme? Can we also make the adjustments on other payed shopify themes as well?

So i used this tutorial to try and have the images change based on the size function... I don't think it works the same way? I would love a video showing how to have the images change based on the size selected

When I thought there was no way 😭 I found this video 🤩and it worked perfect for me, thank you very much. Just I had to modify a different file, instead of main-product.liquid, it was in product-media-galery-liquid (my theme is Craft). The js file was the same as the video.

@user-zc4vj8dj9u

Жыл бұрын

I am also using Craft, in the latest version, and it doesn't work. Is there anything else you changed?

@user-zc4vj8dj9u

Жыл бұрын

Never mind! It works! Thankyou :-)

@CodingWithJan

Жыл бұрын

Awesome!! Glad it works. :-)

@user-zc4vj8dj9u

Жыл бұрын

Yeah! Would love to learn how to make some images stay visible regardless of the chosen variant, and if it's possible to activate this when there are images both for color and size, I suppose it's just a bunch of ifs. @@CodingWithJan

@CodingWithJan

11 ай бұрын

Hey Alejandro, in this case, I'd recommended partnering with a developer. We can definitely help you to get in touch. (Check the links in the description)

This is an excellent video and appreciate. Can we achieve same effect with metafields? Please edit this video and add before 0:35 that one has to keep the customisation in 'Product' page as 'Stacked' - thumbnail, 2 column, thumbnail carousel will not work.

Hi how are you? How can i apply this rules only to a selected product collection, but others collections or products that doesnt need this multiple variants dont get affected by these rules?

hi Jan great video I can not find product__media-item anywhere in my coding I looked single handily for 2 hours and kept typing it in I'm on the sense theme does that affect it? I don't understand why it doesn't pop up

@mahidr9285

6 ай бұрын

nor do i

look, there is a store that I made through shopify and there is a product, this pillow, the problem is that I want the first photo as soon as the user enters the page to have a certain photo, but the problem is that the first photo that is on the page is a version of the pillow, there is gray and white and white gray, how to make what was the photo that I want and not pillow options?

Hey Jan, i just implement this code on Dawn 8.0, it showing only in " stacked view". please make a video or instruct in your code that how we cam implement it according to selected thumbnail view setting, i.e i want same color variants images display in "thumbnail slider" only. as of now my thumbnail slider showing all the product images and just above that , it is showing stacked selected variants images, which is look really bad. kindly change the code accordingly so that we get selected variants image output in thumbnail slider only or according to thumbnail settings( stacked, thumbnail, thumbnail slider), just like by default it showing all images. i hope my message is clear.

Hi the code works great I am just stuck in a place where I have certain variants which have two variables as alt text for example "wine red or dark grey" and for those variants I have to refresh the variant page every time in order for images to show is there a workaround for that ? Any help is appreciated thanks

@leko6356

Жыл бұрын

You can add a a refresh function in the javascript code (second part of the video) is not ideal but it will work

I tested it...only problem is when the product loads, 'onVariantChange' is not firing when product loads on clicking of collection page. This leads to only single image getting loaded for the default variant color. When you click on other color swatch, all images of that color appears. Any resolution to this bug would be higly appreciated ?

Great tutorial. Is there a way to change the products collection image based on the website language ?

@CodingWithJan

2 ай бұрын

I'd need to double-check this myself. Potentially with some custom code modifications and Shopify markets.

Hi there, does this work for Dawn 12.0.0? Finding the code in product-media-gallery liquid, but can't make it work. Super thanks!

did they move this somewhere else in version 12? I cannot find that class product__media-item.

Hello Sir, if i want to do this stuff with size variant then what to do. Please Help me. My store doesn't have too much color, but has lot of sizes. Waiting for your quick reply. Thank you.

Everything works great but when I click on a different variant the pictures don't load, and not even when I refresh the page. I have to go back to the Products tab and to the product, then switch the variant order, I only have two for this product, so that the next variant loads first, but then the pricing is wrong if the variants have different prices too.

Why use a additional attribute rather than including a special class similar to "{{media..alt}}-variant" And then use that in the JS to target what to show hide?

When previewing the product (using a modal with a resize function), all of the images are shown without the filter function. Is there a way to fix this?

Thank you so much for this tutorial! I got it working but have a few issues: 1. The variant selector is working, but if I select a different color for example on the page, it changes all of the pictures except for the first thumbnail. The first thumbnail remains the same image as the featured image on page load. 2. On one of my products, the script isn't working at all and is only loading the featured image for the first variant on page load when selecting other variants. W

@StormingGravity

Жыл бұрын

you can add this attribute within the that shows the featured image: thumbnail-alt={{ product.selected_or_first_available_variant.featured_media.alt }} the reason why the first thumbnail shows in every selection is, the attribute was not added in the featured image.

@user-wt2ee5hx2d

Жыл бұрын

@@StormingGravity Thanks a lot )

@xcsdead2090

9 ай бұрын

@@StormingGravity Thanks :)

hello i dont have product_media-item but i have product_media-gallery - will it work the same?

Hi jan. Im using the sense theme. I go to inspect on my website then I go to my product liquid code but I cant find the code from the inspect in my liquid. Why do you think this his happening. None of it is there. A reply would be great

@davisyates15

5 ай бұрын

same

what if i want to do this for 50 products. do i have to do all of this for every product seperadet?

Using alt is not the wisest thing, because it’s semantically not good (especially for accessibility and SEO). Or use a way to select if the given color is present in the alt text instead and build a proper alt description containing the color.

@CodingWithJan

Жыл бұрын

yes you're right, the cleanest way would be variant meta fields, which is a bit more complicated to implement. So compromise of good working solution / vs complicated 100% clean. Let's call it 80/20 Pareto 😄

@AmedeeBoulette

Жыл бұрын

@@CodingWithJan maybe you got the wrong comment! I didn’t say you needed metafields but rather a proper alt tag that represent the actual content of the image and would contain the color. It would cover the SEO and accessibility aspects of your image and you could still target the alt if it contains the word RED or BLUE or whatever. Like « Red T-Shirt with mountains and a sunset », per example.

@talhaamjad5740

Жыл бұрын

@@AmedeeBoulette you're right that can be done very easily and SEO optimized and no issues of accessibility 💯

Can we display variants more than shopify default limit without any app? Usage of app is select variant can not display its image on the feature box I want to do without app Is there possible any solution?

How to do it in palo alto theme?

Hello, I used this code for studio theme. It is working perfectly well on laptop. However, on the mobile, all the variant images are being displayed as a slider. Can you please help me fix this? Thanks in advance!

@marthedesigner

Ай бұрын

yes, same here but ok on mobile (altough it keeps displaying the first variants image too) and on desktop does not work :(

Can you update this for dawn 10

Please please please please do an updated version for Dawn 10.0.0, please 🙏🙏🙏🙏🙏🙏

Hello, I'm working in Dawn 11.0.0, can't seem to find the code there. Any chance you know how to fix it in this version of Dawn?

Hi, Daw theme version 11.0 does not have the same code, I find myself unable to do this modification without expertise. Would you do an updated version or send reference for it? Thank you

@CodingWithJan

Жыл бұрын

Hi nosxing, thanks for the feedback / video suggestion. I'll forward this to Jan and if it makes sense we can def add it to the list of video topics! Best, Joy (Team)

@milkifyme

11 ай бұрын

We got it to work on Dawn version 11.0 - see comment above!

I can't find product media in main-product liquid on the dawn theme

@Reelalitybytes

Жыл бұрын

Same issue... I've got a media toggle image, and searching for it yields nothing.

Update for Dawn version 9?

This is useful guide, but it would be much simpler to use metafields here rather than relying on alt text. You can simply add a variant metafield, which contains a list of images, and display those images when the variant is selected. Keep up the tutorials though, they're well presented and helpful for people.

@xcsdead2090

9 ай бұрын

Hey man, do you have the code for the same?

@SimonS188

9 ай бұрын

@@xcsdead2090 i coded this for a non-dawn theme, so it's not a simple drop in replacement sadly. The premise is the same though, a nested for loop, that loops through each variant, and then each metafield on that variant and renders out the media via the img_tag filter. An if statement appends a class of 'hidden' to the non selected variants media. And each piece of media gets a data-variant property to append the related variant id. For the js, on new variant selected I just add the hidden class to all of them. Then remove it from elements that have the right data-variant id. Chuck that explanation into chatgpt with the dawn code and it should code you something workable for dawn.

@andreizhao3414

9 ай бұрын

@@xcsdead2090 have you found anything?

I might be a noob but unfortunately not getting the product__media-item in my theme Refresh. Can someone help me with this?

how about Turbo theme?

how to make it work on he sense theme ?

how to setup on showcase theme

I did everything and stil have to refresh the page before the images show up. How can I fix this

@marthedesigner

Ай бұрын

yees here tooo. thanks a lot!

Alt text helps visually impaired people understand what the image is. Legally, every alt text should have a description. There are companies that go after anyone who doesn't use alt tags properly, but there has to be another way to hide variant images...

@CodingWithJan

4 ай бұрын

Hi Matthew, you can now implement similar functionalities via metafields.

@roiseaux

4 ай бұрын

@@CodingWithJan Hi, do you plan to create an updated tutorial for V13 themes, for: product swatches, and multiple variant images?

We are using alt text for seo purposes, is there any other way yo make it?

@CodingWithJan

Жыл бұрын

Hi Omer, yes that's still possible (via metafields), but also makes it quite a bit more complicated. In that case you might want to consider using an App instead!

After doing all this, when we refresh the page, we get page not found error. Has anyone got the same error?

My thumbnails button class is listed as "thumbnail global-media-settings" any advice?

@Tyy___

Жыл бұрын

same

Did anybody manage to fix that the thumbnail of the first selected variant stays visible when clicking through other color variants?

Hi Jan. Will this work on Trade V15? Been looking for a tutorial for this new theme and all doesnt work for V15 😔😔

@CodingWithJan

24 күн бұрын

It greatly depends on the exact theme code, and would need to look into this a bit too! Chances are the theme is slightly different though, so the code would need to be adjusted

How did you do the big variant images layout?

@CodingWithJan

11 ай бұрын

Hi Gino. If you still need help with this, you might need to connect with a developer expert. We can definitely help you find one if needed. (link in the description) Best, Joy (Team)

but if again select same color variant featured image gone hide

not working for ride theme

I have copied the code perfectly for Sense theme and it’s also working But there’s one problem that when we change variant, featured image of previous variant remain in the images But if we reload the page it removes Tell me how to fix this so that we don’t have to reload every time

@brianvargas4338

Жыл бұрын

Did you ever figure this out?

I have a different theme, however, everything was going well, exactly as the video showed but then, when I got to the part with the global.js file, the word "variant" wasn't used even once in that file. So, I looked in the file "critical-global.js" it had nearly the exact same code as the global.js file shown in the video. I added the code instructed in the video but it didn't log to the console. Did anyone else have a similar issue or does anyone know how to fix this?

@CodingWithJan

24 күн бұрын

Here it really depends on the exact code and the theme that's used. You might want to consult with a dev here.

im on dawn theme and the very first step doesnt work when i go to search for the class in the main product liquid, nothing shows up the product__media-item doesnt exist has shopify changed something? can someone help at all? thanks

@nizar7292

Жыл бұрын

I am having the same issue, I cannot find product__media-item, I'm using Dawn 9.0

@EstebanBustos

Жыл бұрын

@@nizar7292 any update on this one?

@EstebanBustos

Жыл бұрын

i think its in product-media-gallery

Would this work on a different theme?

@CodingWithJan

8 ай бұрын

In theory on any theme, but the code might look slightly different. Depending on your coding skills here it might be good to consult with a developer instead. If you'd like I can help you find one: codingwithjan.com/developers

why i have to refresh to make it work always? otherwise a thumbnail from previous selected variant appears

@CodingWithJan

3 ай бұрын

Sound like a Javascript issue. First I'd check the chrome developer tools javascript console here, for errors.

I have a question about displaying global images on our store. Let's say we have two shirts, one in red and another in green. Instead of showing the color of the shirt, I want to display a picture of 100% cotton material that applies to both shirts. I would like to display the red shirt image when a customer selects the red shirt and the green shirt image when the green shirt is selected. However, I want the global images to appear after the featured image. Currently, I am duplicating the images on the site by adding ALT texts to two sets of global images. Do you have any suggestions on how I can achieve this without duplicating images?

@CodingWithJan

3 ай бұрын

Great question! This could potentially be built into the filter logic. I'd need to test around here a bit myself, and that'd be a bit too complicated for a KZread comment. But in theory possible. 😄

This video is great but also suggest me for mobile screen, am getting all images at mobile screen

@PROJECT-COMPILATION

Жыл бұрын

did you ever figure out how to fix this?

@asadhussain8837

Жыл бұрын

+1 on this

Not working on my site

What about the mobile version!

PLEASE MAKE VIDEO ON TABS

@CodingWithJan

11 ай бұрын

Hi Akash, Thank you for your comment. Could you please clarify what specific type of tabs you're interested in or provide more details about what you'd like to see covered in the video? Best, Joy (Team)

i cant find anywhere the product media item. i inspect then copy and there is nothing as product media item. Whats happening

@adriansomor

Жыл бұрын

Hey, Maria, do you still need help? If so, let's connect

@jovs4591

Жыл бұрын

exactly there is no product__media-item

@Reelalitybytes

Жыл бұрын

Same issue

do you have any option to do it without alt text

@CodingWithJan

3 ай бұрын

Yes, metafildes would be pretty clean.

When I click on a different color it makes the featured image disappear and stays on the current colors pictures minus the featured image. When i refresh it brings back featured image with correct color selected and all the correct images

@ethanky

Жыл бұрын

Having this problem too, is there a fix to this or did I do something wrong?

@ethanky

Жыл бұрын

lol misspelled thumbnail. it works now

@Excapepath

Жыл бұрын

@@ethanky are you on dawn 8.0? I will be attempting this again soon lol i guess i misspelled something too

@ethanky

Жыл бұрын

@@Excapepath yes I am using dawn 8.0

i did everything exactly as the video but now my variant pills dont showcase any selected variant when i click them it stays on the black featured image :( idk if it matters but im on a macbook. im sad lol

@sheigenjonsiah816

Жыл бұрын

This dose work btw. That's the problem I had I got frustrated so I went back through the first time and I had used ("") theses where (``) theses should have been. still didn't work and then I realized ide misspelled else as els. Just double check there are no mistakes or the whole code can mess up, I'm not at all an experienced coder but I know even experienced coders make mistakes and go back through, and no I don't think it matters if you are on mackbook the code Shopify uses is still the same. Like rn for me everything is perfect except the first image for my black shirt is showing on my white and brown variations it's a problem but il just have to look back through to see where I went wrong. Hope that helps man

@brandonnorris7122

Жыл бұрын

@@sheigenjonsiah816 were you able to figure this out?

@sheigenjonsiah816

Жыл бұрын

​@@brandonnorris7122 I haven't yet fixed the problem where a single image travels over to a different variant because it will take time and I have more important things than a small bug that may go unnoticed. I do plan to fix it though but just really focusing on the key points that will get my store running

product__media-item does not come up for me

@toxicarchit4770

3 ай бұрын

me too

Just when I thought I found a video where I didn’t have to code…

Shopify costs so much and this is not built in?

very good video but unfortunatly every update will break this code.

In case anyone needs this for Dawn 12.0, this tutorial worked for me: kzread.info/dash/bejne/fZOC1rCIodPJZ9o.html Thank you to both @codingwithjan and @AmazingLearning for both contributing to getting this working!

I think i messed up 😭