How To Show Images Specific To The Selected Variant - Multiple Images Per Variant
HTML-код
- Опубликовано: 27 июл 2024
- NOTE: an updated version of this customization can be found here: • How To Show The Select...
In this video we show how to filter the product images so that only the variant's images are shown.
Once installed, it's really easy to manage your product images, because it's been designed to use the Shopify GUI (through creating metaobject entries).
This video took quite a bit of time to, so if you liked it please like and subscribe - it helps us keep making videos like this.
----------------------------
📄 Code for this video can be found here: theprompted.co/blogs/tutorial...
🚀 Want a FREE personalized action plan to help increase your conversion rate? Complete this simple form: theprompted.co/free-action-plan
👉 Want to hire us for personalized help? Book a consult call: theprompted.co/pages/hire-us
▶️ Subscribe for more videos like this ➡ @theprompted
----------------------------
TIMESTAMPS
00:00 - Introduction
00:30 - Demo of product page before changes
01:50 - Updating Theme Code
08:35 - Creating the metaobject and metafield definitions
11:06 - How to match/filter your images to variants
----------------------------
#shopify #tutorial #ecommerce
Themes: Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight
----------------------------
Music track: lucid by massobeats
Source: freetouse.com/music
We’ve updated this customization! Check it out here: ruclips.net/video/1ZN3wGVlPuQ/видео.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!
You're welcome! Glad it was helpful
@@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!
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!
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.
Glad you like the videos!
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.
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.
@@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.
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!
@@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.
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?
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.
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.
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.
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?
Good catch! I'll take a look at that.
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?
I have already filled the contact form on your page, with screenshots provided.
Thanks! We've responded - let us know which approach you'd like to take.
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!
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.
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
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?
@@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
@@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.
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.
Awesome! Happy it's working for you.
Is there a way we can leave it as default when not creating an image grouping in metafields?
If you don't want to create any groupings, then you can create your products as normal!
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!
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.
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.
@@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".
Yes, great point - that could be the issue.
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!
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
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)?
Hey, I created all that but there's one problem. I have only two variants & they both are swapped. If i click on black it shows blue & vice versa.
Any idea?
Difficult to know with just this information, but the first thing I would check is your theme. For example, we have an updated version of this customization with this tutorial: ruclips.net/video/1ZN3wGVlPuQ/видео.html
But if you're using v14 and v15 of the free Shopify themes (Dawn, Refresh, Sense, etc), then many viewers have reported that this tutorial doesn't work. We'll be releasing a new version soon.
If your theme is compatible with the version of the customization, then I would suggest trying again from scratch as a test. It is a great troubleshooting step that either identifies an error in the implementation or confirms the error.
@@thepromptedYes, i tried both ways. In other i am having problem with product gallery that is not changing (It change when i refresh the page i.e. it's working but not it used to)
Something in global.js is stopping to load the selected variant pictures.
My theme sense v15
So helpful, Could this work with theme Boost?
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.
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
The metaobject definition should be set as "List of files" instead of "One file"
@@theprompted thank you 💯
Is this applicable in palo alto theme?
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!
will this work with dawn 14.0 version?
Unfortunately it requires an update for Dawn v14. I'll be uploading a new version that's compatible with v14 and v15
Great, but not if you work with different markets and currencies as those tressholds are adjusted to specific markets.
I'm assuming you are talking about the cart progress bar (ruclips.net/video/K4zNFND054Y/видео.html).
If so, then yes, multi-currency will be a future feature to be added.
But incorrect pagination number is showing in dwan theme
Pagination isn't normally found on the product page. Are you referring to a different customization video?
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.
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.
What theme and version are you using?
Dawn 13.0.1@@theprompted
Should work - but will look into this again.
@@theprompted ant news on this? I see you keep deleting my email. lol
And who will create those groupings for thousand of product listings?
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.
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.
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!
@@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.
Yes, in the case for bulk management, a system based on filenames would likely work best.
@@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.
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.
Its work in impulse 6.0.1
Thank you - that's great to know for all other Impulse users
I cannot find the codes!
If you scroll to the bottom, you can click the triangles - this will toggle open to show the code.
Will pagination work with this?
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.
not working
Sorry to hear that. Which theme and version are you using?