Have Shopify Show Images For The Selected Variant: Updated Tutorial to Boost Conversion Rate

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

КОМЕНТАРІ • 137

  • @inno_bott
    @inno_bott Місяць тому +2

    You're the real MVP for updating tutorials for different versions! Appreciate all your hard work 🙏

  • @advancedsystemsatCIT
    @advancedsystemsatCIT 2 місяці тому

    Man this is a HUGE life saver man, wishing nothing but the best and looking forward to see more tutorials from you!

  • @bigtastyvalorant1073
    @bigtastyvalorant1073 3 місяці тому +1

    You're the GOAT. The video was super easy to follow and I've only coded "hello world"

  • @moon-z8o
    @moon-z8o Місяць тому

    You've been such a huge help!! Thank you Thank you! Did you make a video on how to add each color variant as a separate product in the collection page?

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

      Yes - check out this video: ua-cam.com/video/IY2X4jTeQvA/v-deo.html

    • @moon-z8o
      @moon-z8o Місяць тому

      @@theprompted Thank you so much for your reply! I checked out the video linked but it wasn't quite what I was looking for. I wanted to know if there was a way to make each color variant of a product to show separately in the collection page. Is that possible?

    • @alfredchan503
      @alfredchan503 24 дні тому

      @@moon-z8othe tutorial I sent you does exactly that. Because each color is set up as a different product listing, that means each of those listings can now be added to your collections

  • @quiethours1818
    @quiethours1818 2 місяці тому +1

    STILL the goat

  • @EmisKuka-d9w
    @EmisKuka-d9w 27 днів тому

    Absolute hero! What happens after Shopify updates the theme? I notice it happens quite often. Will this feature work after each update, or will we need to update the code every time?

    • @theprompted
      @theprompted  26 днів тому +1

      You won't need to update the code every time Shopify updates, since they normally update only parts of the theme at a time. So often times what they update won't affect these customizations. But even if it does affect it, you also don't have to use every update Shopify makes if the new features aren't ones that you need.
      However, we will at times need to update the code with new versions, which is why we have to make new versions of this customization.
      Ultimately, whether the code needs to be updated depends on what parts of the theme code that Shopify changes, and we can only evaluate that after the changes have been made.

  • @charhayah
    @charhayah 3 місяці тому +1

    Thank you!!!!

  • @Chatotes
    @Chatotes 2 місяці тому

    Thank you 🫶

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

    Dang This guy is my Kami

  • @CortneySiegle
    @CortneySiegle 2 місяці тому +1

    First of all, thank you for making these videos! I have triple checked the code including both videos you made. I have Dawn 15.0.2 and my metafields don't show on the product page but instead at the bottom of the variant page once the variant has been clicked. Do you know if these edits are compatible with 15.0.2 and what I could be doing wrong? I am not certain I am setting up my metafields correctly but I think so.

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

      Should still work with v15.0.2. What I suggest is try installing a fresh version of Dawn as a test area and trying again from scratch. This way if you get a different result, then it's likely an issue with the installation. If you get the same result, it could be a more complex issue.

  • @austinhan4360
    @austinhan4360 3 місяці тому +1

    Hi, Thank you so much for this updated tutorial. They are very helpful! I've gone through all the coding steps and am at the Add Variant Images Grouping step (~4:30-4:50) and it only allows me to select one file. Do you have any idea as to why I am limited to only one image? Thank you in advance. I'm running Dawn v15.0.0

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

      You'll need to create your metafield so that it's "List of files" instead of "One file"

  • @otrgold
    @otrgold 2 місяці тому

    Thanks!

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

      Thank you! Really appreciate your support :)

  • @edwinwong5284
    @edwinwong5284 2 місяці тому

    Thank you for the video! I am trying to use the metafields option however I do not see that portion under the products as displayed in your video. Any idea on how I can get that to show? Ty!!

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

      Did you implement the prerequisite video yet? ua-cam.com/video/1ZN3wGVlPuQ/v-deo.html

  • @healingflower2153
    @healingflower2153 2 місяці тому +1

    Im using Dawn v15.0.1 and I watched your previous video and installed everything step by step. I am able to see the new added theme settings, however, if I check the boxes the correct images still not show up for the selected variant and I don't know what's wrong or what I am supposed to do :/ It may be worth to mention that my image filenames are random letters with numbers, so they don't display the color, but I don't know if this is correlated to my issue. Hope you can help me out! Thank you :)

    • @numbersea
      @numbersea 2 місяці тому

      same too

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

      Your filenames would only be an issue if you're using the filename grouping method. But if you use the metaobject or alt text grouping method then the filenames wouldn't affect it.
      This customization has a lot of steps, and if one gets missed or implemented improperly, then the images may not show as expected.
      I suggest installing a fresh new copy of your theme (as a test theme) and try again from the beginning. If you get a different result, then it was likely an issue with your installation and you can troubleshoot from there. If you get the same result, it's possible there's a more complex issue.

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

    Hey !
    Is it possible to have the full code of each file to modify please.
    So we just have to copy paste the code unstead of struggling with it.
    Thanks for the help !

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

      We actually share downloadable theme files in our Skool community: www.skool.com/the-prompted

  • @trillamex1316
    @trillamex1316 2 місяці тому

    thx this worked

  • @TusharAdobe-u5l
    @TusharAdobe-u5l Місяць тому

    It’s good, but do you think it will also make the page heavier? For example if you have 6 images for 5 different colors, that totals 30 images on one page.

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

      Technically it could make your page load slower since there's more images to load, but whether it would be noticeable would depend on other factors. If your product page isn't too different than theme default features, then it won't likely make any noticeable difference.
      In terms of the number of images, that decision is somewhat independent to whether or not you decide to use this tutorial. This tutorial simply makes it easier for your customers to see the relevant images that have already been selected.

  • @onechaoticpanda
    @onechaoticpanda 2 місяці тому +1

    I'm having some of the same issues I've seen others are having. When I click on my variants, it changes the primary image, but all images from the previous variant still show up and don't change to the other images that should show up with the current variant, until I refresh my page, and then everything shows up correctly. I've tried this multiple different times and keep getting the same result where it doesn't show up correctly until refreshing. Same result on thumbnail, stacked, and columns. Using version 15 of Craft, so maybe there is something different for this? If anyone knows what I'm missing, please let me know. Thanks!

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

      It should work for the Craft theme. If it’s not dynamically updating the images, please double check that the data attributes are added to the elements (there were a couple missed steps in the installation instructions that were missed in the video) and that the js files were updated properly.

  • @wickeykhan3492
    @wickeykhan3492 19 днів тому

    i have problem in filtering with metadat filter is sone when I refresh the page can u set it ?

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

      Double check you're using a compatible theme (shopify developed themes, v15+) and that you followed all the steps properly. When great way to troubleshoot through your issues is installing a fresh new theme (ex: Dawn) as a test theme and starting again from the beginning.

  • @WendyGomez-t1q
    @WendyGomez-t1q 3 місяці тому

    Great video! I'm currently facing an issue with my Shopify store and was wondering if you could help. I need to hide unavailable or sold-out variants from the filter menu, but I can't seem to find a solution. When I filter, for example, by size, it shows sold-out models, which is very frustrating for clients. Do you have any tips or workarounds for this? Thanks in advance!

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

      Are you talking about the collection page or the product page?
      If it's the collection page, you can hide unavailable products by adding a condition in your collection so that the collection contains products with inventory > 0 (help.shopify.com/en/manual/products/inventory/getting-started-with-inventory/hide-out-of-stock)
      If it's for hiding unavailable variants on the product page, there's no simple workaround for that and requires custom development. If you're interested in hiring us to work on that for you, then you can contact us here: theprompted.co/hire-us

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

    Hi, very thankful for this tutorial, it really helps a lot. I am running on V15.0.0 Dawn and it is successful. However, I am facing an issue where the remaining media only changes when I reload the page manually, is there anything that can be adjusted so that the remaining media changes automatically? Will truly appreciate if you can reply!

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

      This should work, but a number of different reasons could be causing the issue you're seeing. The most common issue is an error in the installation process. I suggest double checking everything to make sure you've added the code in and set up the metaobjects/filenames/alt text correctly.

    • @legoleee
      @legoleee 2 місяці тому

      @@theprompted thank you sir, i will try again (thank you. its solved)

    • @BASKvideo
      @BASKvideo 2 місяці тому

      @@legoleee I have the same issues, can I know how did you solve ?

    • @legoleee
      @legoleee 2 місяці тому

      @@BASKvideo just retry again and again, there is nothing wrong with his instruction

    • @BASKvideo
      @BASKvideo 2 місяці тому

      @@legoleee I retry so many time and double check the code instruction already, tried different metafields also, only when I click the variants can show up correctly when refresh the browser

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

    Hi, everything works perfectly for me but I think there's no video support right? I selected a video just like I select my images but while images show fine the video doesn't show in the product page. I'm familiar with coding but not with shopify internals so it'd be awesome if you added that video support as blog post or a youtube video. Thanks for your great tutorials, subscribed!

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

      Thanks for your support!
      Unfortunately, yes, it currently is only for images. But if you wanted to try something out, you can check the prerequisite video tutorial (previous version). Someone left code on what they did to get it to support videos.

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

      @@theprompted Thanks for the reply.
      They actually had the problem with hiding the videos not showing them. I can't even show videos. Only difference is I'm using mp4 videos and they had webm videos. Do you have any ideas where my videos are being lost in the process? So I can take look there first.

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

      It works when I use alt text instead of metafields. Maybe you can test it with filename method as well and add a note in blog post.

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

      Great! Glad it works for you, and we'll test that out.

  • @dngineer
    @dngineer 2 місяці тому

    Hey there, thanks so much for this video im 16 years old and it was giving me a hard time trying to figure this out for V15 as no other tutorials seemed to work. Would it be possible for you to copy your entire codes from each section involved and put it somewhere available for us e.g pastebin or some sort, it would make it much easier i tried to follow on with your video but found it slightly difficult as there were many instructions. Thanks again for the hardwork sir 🙏

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

      The entire code can be found from the link in the description - check it out and thanks for watching!

  • @Ciuciucerr
    @Ciuciucerr 2 місяці тому

    I need help finding the "Variant Images Grouping list on Dawn 15 or even 14, so the first method is impossible to implement. Also, on Dawn 15, I don't have " Selected variant image grouping, and I don't have "Metafiel-Filename-Alt text." Can someone please help me where to find them on Dawn 15?

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

      Have you followed the prerequisite video yet? Please watch this video first before implementing the current video: ua-cam.com/video/1ZN3wGVlPuQ/v-deo.html

  • @RahulGandhi-gi5bm
    @RahulGandhi-gi5bm 2 місяці тому

    sir in my case i am unable to find (selected variant image grouping) feature, i think its not available in store. i am using down theme 15.1.0, please help me in this

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

      Did you follow the prerequisite video first? Those instructions will add the settings in: ua-cam.com/video/1ZN3wGVlPuQ/v-deo.html

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

    Can you also configure that some images should be shown on multiple variants?

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

      This would require some custom coding. If you're interested in hiring us to build that out for you, you can contact us here: theprompted.co/pages/hire-us
      A better options is that you can join our Skool group, where we prioritize these feature requests: www.skool.com/the-prompted/about
      Hope to hear from you!

  • @sophiawebster2075
    @sophiawebster2075 2 місяці тому

    Got through everything but having issues on grouping by file name. Have one variant color that is working just fine called "Natural & White", and the handle is "natural-white" in variant. My image is labelled "Tablecloth-Natural_White-1" and my variant split delimiter is a - pulling from position 2. Again this is working fine even though one is - and one is _. BUT on my "Winter Bloom" color variant, abbreviated "Winter-Bloom", my image is labelled "Tablecloth-Winter-Bloom-1" and it is not working. Tried re-naming to be called "Tablecloth-Winter_Bloom-1" and renaming my variant label "winter_bloom" to link, and still no luck.

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

      Sorry you're running into trouble. It's hard to debug what is going on with just this information, but here are a couple debugging strategies you can try:
      1. Remove the file entirely and re-upload with the proper filenames
      2. Use more unique delimiters (ex: double underscore __)
      3. Try different variations of similar structures, some with one word variants, some with two word variants.
      Once you test out some different scenarios hopefully it'll help you find what the issue is.

  • @SandhyaSharma-l2u
    @SandhyaSharma-l2u 2 місяці тому

    Hey @theprompted Everything was going until I am facing this problem, when I click on black colour it showing beige colour products with it. and its only happening in products which is having black and beige both colour. Please help me please

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

      The firs thing is to check if you're using a compatible theme (this video was designed for v15 of Dawn and the other free Shopify themes).
      Next, I would suggest installing a fresh new version of your compatible theme as a testing area and re-start the customization. By attempting the customization again, you can see if it was a problem with the installation process (you get a different result), or could be a sign of a more complex problem (you get the same result).

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

    I dont have the Variant Image Grouping on the right of the page… i have the Sense Theme in later version of 15.0.0 im confused need help

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

      Did you follow the prerequisite video first? Those instructions will add the settings in: ua-cam.com/video/1ZN3wGVlPuQ/v-deo.html

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

    Why is my Norton anti-virus flagging the links you provide as ‘known dangerous phishing site’?

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

      That's strange. Our site is built on stock Shopify - so there shouldn't be any concerning security risks (and if there are any, then every Shopify store would have the same issue).
      This would be a false positive from Norton. They have a process to dispute the warning, which we've just submitted to get this resolved. Thank you for bringing this to our attention.
      Additionally, you can check our site through other safe browsing tools. For example, the Google safe browsing tool shows that the site is safe: transparencyreport.google.com/safe-browsing/search?url=http:%2F%2Ftheprompted.co
      There shouldn't be any issues with any of our links, but if you're still concerned, you can check out our Skool community instead. We share our tutorials in there as well, but in addition you get more personalized support directly from us, premium content that isn't available on the UA-cam channel, and downloadable theme files with our customizations already applied. If you're interested you can check it out here: www.skool.com/the-prompted/about

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

      Just to follow up on this, Norton has updated their assessment and our site is now showing Safe: safeweb.norton.com/report?url=theprompted.co
      Thanks again for pointing this out to us.

  • @sanamehak2358
    @sanamehak2358 2 місяці тому

    I am missing the selectedvariant image grouping in my product information section, and I am using v 15.0.2. is there any way to fix it or do it without it

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

      The link in the description gives you all the instructions you need to add it in, I suggest you take a look at it again. You'll need to start off with the previous version (ua-cam.com/video/1ZN3wGVlPuQ/v-deo.html) before finishing with this video.

  • @rockethacz9277
    @rockethacz9277 3 місяці тому +1

    I tried this on Sense theme but it is not working properly all varieties showing up

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

      Are you getting any error messages?

  • @niallread
    @niallread 2 місяці тому

    Hey i tried this on spotlight theme version 15 and it doesnt seem to work. All the code seems to be correct and im not getting any errors. Its just not changing any of my images to only show the selected variant.

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

      Could be a number of different reasons, but since there are many steps in the installation process most often it's an error during the installation process. I suggest installing a fresh new copy of your Spotlight theme as a testing area and start again from the beginning. This way if you get a different result, you know it's related to the installation. If you get the same result, you may have a more complex issue.

  • @clinicasantacroce6742
    @clinicasantacroce6742 2 місяці тому

    Hello, please help I am go9ng mad, every video I see does npt show what i have on my shopify! I?m using down and I don't have the options you have in the "Product Information". I don't have the section "Selected Variant Image Grouping" shouléd i do something to activate it? My theme is updated to last version! Pls help

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

      If you watch the full video, I share the instructions on how to add those settings into your theme.

  • @Sandeep-k7r
    @Sandeep-k7r 2 місяці тому +1

    In my case, only first image (main image) is showing. What possibly am i doing wrong?

    • @theprompted
      @theprompted  2 місяці тому +1

      That could be a symptom of a number of different issues, but ultimately its because the remaining images aren't properly being mapped to the variant.
      What I suggest is to double check that you're using a compatible theme (free Shopify themes like Dawn, Refresh, Sense, etc) and version ( if you're on v14 or 15 then there's a new version out: ua-cam.com/video/i4DPKJ-zJgY/v-deo.html).
      If that's still not working, you may want to install a fresh new version of your theme as a sandbox testing area and start again from the beginning. This way if you get a different result, it's likely an issue with your implementation. if it's the same issue, then there might be a more complex issue.

    • @romanperez2013
      @romanperez2013 2 місяці тому +1

      If you can see the first image of each variant (red shirt main image, blue shirt main image, etc.) but not the others in the grouping, then I also had this issue and this is what worked for me. At 2:57 in the video I noticed that all the images for the variants were shown in the Media section. Mine only had the main images. I clicked add images and then selected all the images that weren't showing. That fixed it for me.

  • @kaithewho
    @kaithewho 3 місяці тому +1

    I came from your other video hoping this would work, its not compatible with version 15

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

      This was designed and demoed on Dawn 15. What kind of errors are you running in to?

  • @officialmanumey
    @officialmanumey 3 місяці тому +1

    Thankyou verymuch for the Video. I think you dont have much time but i relly tired everything. Like relly evertyhing. Been since 6 hours d^trying to fix problem but doesent work. I have theme 15. Can you help me somehow. Can i contact you ore can you customize my store. I know you dont have that time but maybe. Thankyou verymuch

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

      For 1:1 troubleshooting and diagnostic help, you can get that here: theprompted.co/products/diagnostic-review. For any free and generalized help we'll do our best in the comments section.

  • @human-resource-management-2023
    @human-resource-management-2023 3 місяці тому

    Thank you for all the videos. Everything worked for me. Can you also make a video on how to add free Gift🎁?

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

      You can use this customization: ua-cam.com/video/RRZce9A4FK0/v-deo.html, but the upsell will instead be a free gift product set at $0.

    • @human-resource-management-2023
      @human-resource-management-2023 3 місяці тому

      ​@@theprompted
      Ohh..Thanks a lot. Will check it out😊

  • @Chatotes
    @Chatotes 2 місяці тому

    Hi, I just found out what I think it is the error in code. It is in class "{% if hide_image %} hide-image{% endif %}". As soon that I get that in, my variant colors works perfectly but my other images from my regular listing dissapears

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

      If I understand correctly, the images associated with your variant are showing, but the images from the other variants are not showing. Isn't that the desired behavior?

    • @Chatotes
      @Chatotes 2 місяці тому

      @theprompted No, all images from my non color variants dissappear, even the thumbnails vanishes. And most of my listing doesn't have color variants

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

      For listings that don't need image filtering, you should set the Disable Image Grouping metafield to True.
      More information are found in the installation instructions.

  • @dekatool
    @dekatool 3 місяці тому +1

    I followed both videos and everything seems to work expect the thumbnails don't update after selecting a variant. I have to refresh the page for them to update. Any ideas?

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

      Our store is based on the Dawn v15 theme.

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

      If it's not updating when you change the variant, this indicates an issue with the js. Did you add the data attributes to the tag? This step was accidentally omitted from the video, but was added into the instructions.

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

      @@theprompted Yes, the data attributes were added to the tag in the product-media-gallery liquid file as listed on your site.

    • @dekatool
      @dekatool 3 місяці тому +1

      @@theprompted I just went through both videos again and feel pretty confident that I have everything in the code where it should be. I agree that it seems to be a js issues since all of the other functionality seems to be working just fine.

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

      @@theprompted I'm having the same situation. It seems to work but only when the page is refreshed. I added the attributes to the tag as well as in the instructions.

  • @Chatotes
    @Chatotes 2 місяці тому

    Issue, now my products without a color variable are only displaying the first imagine. Does anyone knows how to solve it without putting a color variable?

    • @theprompted
      @theprompted  2 місяці тому +1

      This is what the "Disable Image Grouping" metafield is for (Step 0 in the installation instructions). If you want to disable the image filtering for certain products, you can set the metafield to True and it will show images as normal.

    • @Chatotes
      @Chatotes 2 місяці тому

      @theprompted I'm I have to do it directly in the code section or in the page edition? I tried to do it in page, but ir didn't work. Sorry, I'm new in this, pretty much

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

      If you followed all the steps, then you would have created a product metafield "Disable Image Grouping". You can find this metafield in your product admin, and set it to True for any products that you want to disable image filtering.

    • @Chatotes
      @Chatotes 2 місяці тому

      @theprompted Yeah, that the issue, when I disable image grouping all the color variants gets messed. Probably I'm doing it wrong, I'll try again when I get home

    • @Chatotes
      @Chatotes 2 місяці тому

      @@theprompted I found the issue, that happens when we add the class hide_image. Now, I can group by color but my issue is when I just select an item with multiple color variable, it displays all the images and I have to choose a color to display color by color. Any idea on how to fix that?

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

    in my global.js filw their is nothing like renderproductinfo what should i do? i'm following your all steps but i cant see this option

    • @theprompted
      @theprompted  Місяць тому +1

      Are you on an older version of Dawn? If so, you may need to follow an older version of this tutorial. We've updated this a few times so you can check to see if an older version works with your theme version.