Increase Shopify Conversion Rates by Displaying Variant-Specific Images

Поділитися
Вставка
  • Опубліковано 7 лис 2024

КОМЕНТАРІ • 98

  • @theprompted
    @theprompted  7 місяців тому

    We’ve updated this customization! Check it out here: ua-cam.com/video/1ZN3wGVlPuQ/v-deo.html

  • @BALLX.FLYINGBALL
    @BALLX.FLYINGBALL 9 місяців тому +1

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

  • @mosesgilbert1110
    @mosesgilbert1110 8 місяців тому

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

    • @theprompted
      @theprompted  8 місяців тому

      You're welcome! Glad it was helpful

    • @roiseaux
      @roiseaux 7 місяців тому

      @@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
      @theprompted  7 місяців тому

      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!

  • @rimas9684
    @rimas9684 8 місяців тому +1

    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
      @theprompted  8 місяців тому

      Glad you like the videos!

  • @cyberspider78910
    @cyberspider78910 9 місяців тому +1

    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
      @theprompted  9 місяців тому +6

      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
      @ShoneTheGenije 9 місяців тому

      @@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
      @theprompted  9 місяців тому +1

      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
      @cyberspider78910 9 місяців тому +1

      @@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.

  • @rileygalavan1494
    @rileygalavan1494 6 місяців тому

    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
      @theprompted  6 місяців тому

      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.

  • @kelman4279
    @kelman4279 4 місяці тому +1

    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
      @kelman4279 4 місяці тому

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

    • @theprompted
      @theprompted  4 місяці тому

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

  • @BlakeMcGarry-y1o
    @BlakeMcGarry-y1o 7 місяців тому

    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
      @theprompted  7 місяців тому

      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.

  • @LaurenFaraday
    @LaurenFaraday 7 місяців тому

    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
      @theprompted  7 місяців тому

      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.

  • @dobromirkirilov6208
    @dobromirkirilov6208 Місяць тому

    HI there, I have one issue. When I open the product in the PDP i don't see the images for the default selected variants. If I click on the other variatns I can see the grouping, but when I first land on the page I see no thumbnails. PLease advise.

    • @dobromirkirilov6208
      @dobromirkirilov6208 Місяць тому

      I am using the Spotlight theme.

    • @theprompted
      @theprompted  18 днів тому

      Great - you've almost got it working! Sounds to me just a small error in the installation process, perhaps in the product-media-gallery.liquid file.
      You may want to install a fresh new version of your theme and try again from scratch to help you find out where things may have gone wrong.
      Additionally, we've updated this customization for newer theme versions. You can check it out here: ua-cam.com/video/i4DPKJ-zJgY/v-deo.html

    • @dobromirkirilov6208
      @dobromirkirilov6208 18 днів тому

      @@theprompted thank you! I already made a solution. I added jquery function in theme.liquid to show the default variants on page load. Thank you for you reply though. Great work!

  • @matthewcleaver4859
    @matthewcleaver4859 6 місяців тому

    So helpful, Could this work with theme Boost?

    • @theprompted
      @theprompted  6 місяців тому

      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.

  • @lalsinghbisht
    @lalsinghbisht 6 місяців тому

    you explain very well.

  • @CuriosityUnleashed410
    @CuriosityUnleashed410 9 місяців тому +2

    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
      @theprompted  9 місяців тому +1

      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
      @CuriosityUnleashed410 9 місяців тому +1

      @@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
      @nikolozberidze4684 9 місяців тому

      ​@@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
      @nikolozberidze4684 9 місяців тому

      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
      @theprompted  9 місяців тому

      Awesome! Happy it's working for you.

  • @Joshuabeldoa
    @Joshuabeldoa 5 місяців тому

    Is this applicable in palo alto theme?

    • @theprompted
      @theprompted  4 місяці тому

      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!

  • @Atishay-u2e
    @Atishay-u2e 3 місяці тому

    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?

    • @theprompted
      @theprompted  3 місяці тому

      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: ua-cam.com/video/1ZN3wGVlPuQ/v-deo.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.

    • @Atishay-u2e
      @Atishay-u2e 3 місяці тому

      @@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

  • @yliahhh
    @yliahhh 9 місяців тому

    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
      @theprompted  9 місяців тому +1

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

  • @pervaizakhtar4003
    @pervaizakhtar4003 8 місяців тому

    Thank you BOSS

  • @TAO-k7s
    @TAO-k7s 7 місяців тому

    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
      @theprompted  7 місяців тому

      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
      @AllTheFauxFacts 7 місяців тому

      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
      @bhavsarvrajendra341 7 місяців тому +1

      @@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
      @theprompted  7 місяців тому

      Yes, great point - that could be the issue.

  • @heyadixyz
    @heyadixyz 4 місяці тому

    will this work with dawn 14.0 version?

    • @theprompted
      @theprompted  4 місяці тому

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

  • @kevinhoepel5720
    @kevinhoepel5720 6 місяців тому

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

    • @theprompted
      @theprompted  5 місяців тому

      I'm assuming you are talking about the cart progress bar (ua-cam.com/video/K4zNFND054Y/v-deo.html).
      If so, then yes, multi-currency will be a future feature to be added.

  • @king_haku
    @king_haku 8 місяців тому

    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!

    • @king_haku
      @king_haku 8 місяців тому

      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
      @theprompted  8 місяців тому

      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)?

  • @alejandrocruz2261
    @alejandrocruz2261 8 місяців тому

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

    • @theprompted
      @theprompted  8 місяців тому

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

  • @Paint27
    @Paint27 9 місяців тому

    Thank you so much!

  • @TusharAdobe-u5l
    @TusharAdobe-u5l 8 місяців тому

    Will pagination work with this?

    • @theprompted
      @theprompted  8 місяців тому

      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.

  • @ShoneTheGenije
    @ShoneTheGenije 9 місяців тому

    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
      @theprompted  9 місяців тому +1

      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
      @ShoneTheGenije 9 місяців тому

      @@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
      @theprompted  9 місяців тому +1

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

    • @ShoneTheGenije
      @ShoneTheGenije 9 місяців тому

      @@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
      @theprompted  9 місяців тому +1

      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.

  • @Princedevil121
    @Princedevil121 8 місяців тому

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

    • @theprompted
      @theprompted  8 місяців тому

      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.

  • @n4tiger
    @n4tiger 7 місяців тому

    Its work in impulse 6.0.1

    • @theprompted
      @theprompted  7 місяців тому

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

  • @Niharika.k.n
    @Niharika.k.n 6 місяців тому

    But incorrect pagination number is showing in dwan theme

    • @theprompted
      @theprompted  5 місяців тому

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

  • @KING0HENRY
    @KING0HENRY 9 місяців тому

    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
      @theprompted  9 місяців тому +1

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

    • @KING0HENRY
      @KING0HENRY 9 місяців тому

      @@theprompted thank you 💯

  • @shirtfarmer1129
    @shirtfarmer1129 7 місяців тому

    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
      @shirtfarmer1129 7 місяців тому

      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
      @theprompted  7 місяців тому

      What theme and version are you using?

    • @Jesterapparel
      @Jesterapparel 7 місяців тому

      Dawn 13.0.1@@theprompted

    • @theprompted
      @theprompted  7 місяців тому

      Should work - but will look into this again.

    • @shirtfarmer1129
      @shirtfarmer1129 7 місяців тому

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

  • @gogologowearinc.6071
    @gogologowearinc.6071 8 місяців тому

    I cannot find the codes!

    • @theprompted
      @theprompted  8 місяців тому

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

  • @RandomFacts962
    @RandomFacts962 4 місяці тому

    not working

    • @theprompted
      @theprompted  4 місяці тому

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