We’ve updated this customization! Check it out here: kzread.info/dash/bejne/Y46CldmAhs-2pbQ.html

Amazing! Thank you so much! The first guy who explained this how it works right!

Thank you! The video and article combo makes it easy to follow. Exactly what I was looking for! Thank you!

@theprompted

4 ай бұрын

You're welcome! Glad it was helpful

@roiseaux

3 ай бұрын

@@theprompted Hi -- if you have tons of products (like 200+) with multiple variants, you would have to create metaobjects & groupings for every single variant for each product? That's quite cumbersome; is there any other potential workaround? Thank you! Additionally: I noticed that, using these selective variant images, will also affect products without variants. For example, products with just one variant will only show the featured image, and will not show ANY remaining images. Also: if you have another Featured Product in the same page as the product with the variants, clicking on a variant will remove the featured image in the Featured Product. Any thoughts on how to troubleshoot? Thank you!

@theprompted

3 ай бұрын

You're right, for large catalogs it can be quite cumbersome. I have in my queue to re-do this customization with a more bulk-friendly approach. But it might be some weeks before I get to it, so if you need an immediate workaround, you can bulk create the metaobjects using a tool like Matrixify. As for the other issues - I'll have to look into those. Thanks for pointing them out!

you explain very well.

Thank you BOSS

Thank you so much!

@theprompted

5 ай бұрын

You're welcome!

Man you are amazing. it is actualy a very good tutorial but a bit yo much complicated. instead of filtering the images by metafield and metaobjectsit would be much easier to filter them by the image alt text. Many many thanks for your tutorial have given me some ideas how to create some interesting customizations.

@theprompted

4 ай бұрын

Glad you like the videos!

Hey man, love the video! I'm having an issue where selecting different variants changes the thumbnail image, but not the additional carousel images underneath. However, if I select a variant and then refresh the page everything seems to work as it should. I likely messed something up, but it seems like a potential fix for me could be adding code that refreshes the page whenever a new variant is selected... any insight into what I did wrong?

@theprompted

2 ай бұрын

It sounds like an issue with the javascript running. A couple things to double check: 1. Double check that global.js was updated properly 2. Double check that you added the attributes to the elements (ex: data-variant-grouping), which is necessary to pass the information to the js to read and use.

Sir, this video shows your prowess on coding. Appreciate efforts. However, it will be practical for small no. of products only, i believe. But as you said, different folks, different talks.

@theprompted

5 ай бұрын

Thanks for the thought! No matter what, each image has to in some way be mapped to a variant. But if more people prefer a different approach, I might do a v2 using filenames to differentiate instead. The more comments asking for this or thumbs up on this comment that I see, the more likely it will happen.

@ShoneTheGenije

5 ай бұрын

@@theprompted How about using Variant Meta filed instead of file name for what mentioned „each image has to in some way be mapped to a variant”. Is that possible. Seams to me like far less setting up down the road when new products or variant are introduced.

@theprompted

5 ай бұрын

Hmm... it seems a few of you are suggesting variant metafields, but I don't see how it helps. I might be missing something here, but this is what I'm seeing: The whole purpose of needing this customization is because each variant can only accept one image. If we're using variant metafields, there's two ways we can potentially use it: 1. Use variant metafield as an identifier for the code (ex: use it to tag them as red or blue, or black, etc). If done this way, then only the one image mapped to the variant will be found because the additional ones aren't directly related to the variant. And all the additional images that aren't mapped to any variant directly by definition can't have a variant metafield either. 2. Assigning the images to each of the variants via metafield. If done this way, isn't that even more work? Because now you have to assign each variant combination that your group of images should be shown for each combination. For example, if you have Red in 5 sizes, now you have to go through each of the Red Small variant, Red Medium variant, Red Large variant, etc and assign it the group of images you want to show individually into their metafields. Hope I'm not missing something here - let me know!

@cyberspider78910

5 ай бұрын

@@theprompted using file name is most promising it seems. This is because it is easy to upload file having its name defined as _color_hexcode.jpg or png, and then we can directly extract color name. This will altogether avoid defining metafield and assign the metafiled value to each variant of product separately. Moreover, the fact is Shopify CSV does not allow and link metafield directly.The idea could be extended by modifying filename to include material type variant as well. My vote is to go with file name of images.

Hi, thanks this works, however when i click on the colour swatches it's not switching to the next colour product? It doesn't do anything? Please could you advise me, would be very appreciated!

@theprompted

3 ай бұрын

Changing the variant is controlled by the code that was added in the global.js file. There's 2 parts to that: 1. Double check that the code was correctly added to global.js 2. Make sure to add the data-variant-grouping attributes to the elements.

Thank you. One question - when I enlarge a photo, it will open the list/gallery view of all photos in the listing despite the variant. Is there a way to only have the variant images show there too?

@theprompted

5 ай бұрын

Good catch! I'll take a look at that.

Hi, thank you for the video, I am running into a small problem I also have the swatches from your video on the collections page. But when I click on the product it will only show one image and then once I switch size or color it will show the second image. Could you please help me with this. It seems to only load one image until I click one of the other variants and then it will load both.

@theprompted

3 ай бұрын

Adding both the collection swatch and this video to show the selected variant images should work together. I just tested it again and there were no issues on my side. One possible problem that you can double check: is it possible that you may not have fully defined your image groupings for your product? For example, let's say you are grouping by color, and have 3 colors: green, red, blue. If you only specify 2 color grouping metaobject entries in your product's metafield (let's say green and red), then blue will only show the primary variant image, without any additional images. So the product relies on the metaobject definition existing (and also being defined properly) in order to group the images together. Another test you can do to help diagnose the problem is to re-arrange the order of your variants (such that a variant that you know already works with multiple images is first) and reload the product. If it's still the first variant that only has a single image and the rest work, then yes, it may be a coding problem. But if the single image is still tied to the actual variant itself, regardless of order, then it's likely a metaobject/metafield settings issue.

So helpful, Could this work with theme Boost?

@theprompted

2 ай бұрын

This customization was designed for the free Shopify themes like Dawn, Refresh, Sense, etc. Premium themes like Boost often have a different site structure, so it's unlikely to work. Having said that, I haven't tested it myself, so you could certainly give it a try (just make sure to duplicate your theme first in case it doesn't work, so it's easier to revert back to your previous version). If it doesn't work you may need the help of a developer to adapt it to work with your theme.

I think it's been asked, but I'll add to it. I have a lot of products that this would help, but it's pretty extensive. I am running into something else, though. When I'm going through my list of variants to tick them all off, I can only choose one. So for black, i can only choose one product. And only one image. Maybe I missed something. But it's only giving me that. I've subscribed, so I'll keep an eye out for updates!

@theprompted

3 ай бұрын

Yes completely understood that this may be troublesome for large catalogs. A potential workaround is to use a bulk editor tool like Hextom BPE or Matrixify, but I'll look to come up with an alternative way to organize the products.

@AllTheFauxFacts

3 ай бұрын

Thanks for the reply. It’s not that I have that many products. I can only pick one when promoted. In your video you are able to pick three or four. But as soon as I pick one everything else gets grayed out.

@bhavsarvrajendra341

3 ай бұрын

@@AllTheFauxFacts In the "Custom data" option inside setting 3 fields we had to create which are name, variants and File Grouping. I think you haven't toggled to the "List of variants" in case of "variants".

@theprompted

3 ай бұрын

Yes, great point - that could be the issue.

Hello! I did the changes like in your video, but when I click on other variant it only shows 2 pictures instead of 4 pictures (I selected 4pictures in the File Grouping). What is the solution for that?

@kelman4279

Ай бұрын

I have already filled the contact form on your page, with screenshots provided.

@theprompted

25 күн бұрын

Thanks! We've responded - let us know which approach you'd like to take.

Hi Thanks for this amazing video. I really struggled ith this problem. However, I'm on the last step and I can't save the definitions to the metaobject even when I add dashes instead of spaces. Please respond ASAP and thanks again!

@ryknow3858

4 ай бұрын

It works when I don't type in a name. Just wondering if I can actually name them instead of a random # and id number

@theprompted

4 ай бұрын

Strange, it should work. This is for the meta object entries, right? What’s the “regular expression” that you used for the metaobject definition? Can you try a couple other scenarios, for example with underscores instead, or even with letters only (ex: red)?

Is there a way we can leave it as default when not creating an image grouping in metafields?

@theprompted

4 ай бұрын

If you don't want to create any groupings, then you can create your products as normal!

Great, but not if you work with different markets and currencies as those tressholds are adjusted to specific markets.

@theprompted

Ай бұрын

I'm assuming you are talking about the cart progress bar (kzread.info/dash/bejne/fWiusKiHdJObZLw.html). If so, then yes, multi-currency will be a future feature to be added.

will this work with dawn 14.0 version?

@theprompted

18 күн бұрын

Unfortunately it requires an update for Dawn v14. I'll be uploading a new version that's compatible with v14 and v15

Hey first of all thank you for this video but I have 1 problem I added the entry on my metaobjects. but I can only choose 1 image

@theprompted

5 ай бұрын

The metaobject definition should be set as "List of files" instead of "One file"

@KING0HENRY

5 ай бұрын

@@theprompted thank you 💯

Is this applicable in palo alto theme?

@theprompted

25 күн бұрын

This customization was designed for the free Shopify themes (Dawn, Refresh, Sense, etc). For third-party/premium themes, it's unlikely to work because the code is often structured differently. But you can always try it out and let us know how it goes!

But incorrect pagination number is showing in dwan theme

@theprompted

Ай бұрын

Pagination isn't normally found on the product page. Are you referring to a different customization video?

I have tried this, unfortunately this is not really working for me, for some reason now I just have only 1 photo displayed for my product , it does not matter which variant or color I select I can only see 1 picture

@theprompted

5 ай бұрын

Is it the same image every time, or is it a different one with each variant? If I had to guess, it would be something about how you created the metaobjects for each variant and added them into the product via the product metafields. Can you double check those steps?

@CuriosityUnleashed410

5 ай бұрын

@@theprompted I managed to get each product and variant to have their own image, now, if I add more than 2 images in the metafields my product would only display 2 images per variant, also one of the variants only displays 1 image

@nikolozberidze4684

5 ай бұрын

​@@CuriosityUnleashed410 same problem here. the first variant is displayed perfectly and the moment i switch to the second one only the thumbnail of the second one shows. same image every time... im also using the studio theme so... also if i remove the thumbnails only the first variant shows. hiding the other variant pics seems to be fine, had the same problem with other vids.

@nikolozberidze4684

5 ай бұрын

update**** seemed to be an isolated incident. product page has a weird bug where it doesnt save the changes. re-uploaded the product and its working fine. thanks, prompted.

@theprompted

5 ай бұрын

Awesome! Happy it's working for you.

I doubled checked the code but I still only get one image per color in preview. There is no images below. Just one image per item. Any help please, I know I'm so close.

@shirtfarmer1129

3 ай бұрын

Also, some times when I refresh, it shows the images below. But if I pick different size or color it goes back to one main image.

@theprompted

3 ай бұрын

What theme and version are you using?

@Jesterapparel

3 ай бұрын

Dawn 13.0.1@@theprompted

@theprompted

3 ай бұрын

Should work - but will look into this again.

@shirtfarmer1129

3 ай бұрын

@@theprompted ant news on this? I see you keep deleting my email. lol

Its work in impulse 6.0.1

@theprompted

3 ай бұрын

Thank you - that's great to know for all other Impulse users

And who will create those groupings for thousand of product listings?

@theprompted

4 ай бұрын

Your product images need to be organized in some way or another. This was the way I thought would be most accessible and easy to use for most people. But you and other viewers have mentioned that they have large product catalogs, and unfortunately this approach may not be as efficient in these cases. For bulk management, I think a method that has all product image filenames formatted a specific way, and the code to read the filename would be an overall easier way to manage (although you still need to rename all filenames to group them properly). This is something I have on my list to look into as an updated version of this feature.

Will pagination work with this?

@theprompted

4 ай бұрын

What kind of pagination are you thinking? This customization is for the product page but pagination is normally on the collection page. If that’s what you’re thinking then yes that’s the default behavior.

I cannot find the codes!

@theprompted

4 ай бұрын

If you scroll to the bottom, you can click the triangles - this will toggle open to show the code.

OK, so, does this mean that if we have multiple T Shirts listed, we would need to create meta filed - meta object for each product listing? Does 50 t shirts mean 50 times going trough files and selecting the exact images that belong to the certain product, and creating meta object entry? P.s. If of any value, my advice would be to make variant NOT preselected on page load, so that we can present multiple color options before customer limits it to certain color.

@theprompted

5 ай бұрын

Yes, every set of images + variants that are grouped together need their own metaobject entry. I chose this approach because every store's needs are a bit different, so I thought this was the most user-friendly and flexible way to do it. I considered alternate ways, like using filenames or alt text to group images, but it seemed like it was more likely to result in user error and be more difficult to fix if not set up properly. Noted on the pre-selected variant - will add that to the list. Thank you!

@ShoneTheGenije

5 ай бұрын

@@theprompted Yes, I understand that there must be a lot of challenges to overcome, and for sure this filtering option looks more promising than others we seen using Alt Text on images. Still, lets hope there will be more simpler way in which Variant metafield could be be used as reference to filter images. I would be much easier to edit bunch of those, than selecting bunch of images per product in order to match them with the variant option. Keep up the great work. We appreciate it.

@theprompted

5 ай бұрын

Yes, in the case for bulk management, a system based on filenames would likely work best.

@ShoneTheGenije

5 ай бұрын

@@theprompted do you think it is possible to „simply” use the similar approach to filter them by Variant metafield. Like just add e.g. Black, White, Red etc. for Color Varint Metafiled, and filter them whit this approach. That would be easier to bulk manage.

@theprompted

5 ай бұрын

Wouldn't managing variant metafields be more difficult? If you have multiple variant types (ex: multiple colors, sizes, and materials), then you have to map them from bottom up instead of top down. But each situation is unique. So if you find that it works best for your store, by all means you should go with that! The solution I shared is what I thought would be general enough to work for most situations.

not working

@theprompted

22 күн бұрын

Sorry to hear that. Which theme and version are you using?