If you have any trouble implementing the code in this video, leave a comment and I will help you as best I can! My Latest Shopify Tips & Tricks: wmiz.github.io/mastering-shopify
This is a great video and worked really well for my store. The only thing is the second hover image seems to have some sort of opacity over it so is looking washed out. Any ideas how to change so this the images looks like a normal colour grade? I am using Debut theme? Thanks
This has to do with the class that is being applied on hover as the default in Debut is to illuminate the image on hover. There are two ways to change this: 1) change the style in the class that is being applied or add a second class to the image that maintains the original style with an !important tag. It's a little too complicated to lay out how to specifically do either of these things over YT comments unfortunately.
Thank you so much for your video! It works perfectly on my shop. I do have a question though, is it possible that everything is automatic? That you don't need to add another picture on Metafields? For example, if I have two images already on media, that the second image is directly used? Thank you
Hi Paulo, this is certainly possible. When assigning the hover_img_url Instead of relying upon metafields, we can use the liquid tag {{ product.images.last }} (this will make the image the last product image that you have uploaded. Let me know if that helps!
Hi Ibrahim, this is certainly possible. When assigning the hover_img_url Instead of relying upon metafields, we can use the liquid tag {{ product.images.last }} (this will make the image the last product image that you have uploaded. Let me know if that helps!
Nice It's an incredible video and very clear. Thanks! Anyway I'm having trouble while implementing it, it shows the metafields first as Product image and it broke the previous images uploaded. Would you mind helping me troubleshoot this issue?
thanks!! it worked really well hover I have one problem when It only works ones for a small time how can I impove it that I would work every time you hover over it and that it would work longer?
Well, technically fine but practically when you have a huge list of products, who would keep on adding a separate image? I thought you will be showing how to zoom a product image when user hovers over it...
Hi vrowmuria, it's definitely possible to use the second or last product image in place of the metafield. Also zooming product image on hover is a great suggestion for a video.
I believe the Dawn theme has this feature by default implemented (at least for images). Dawn organizes its css files by individual sectioning. So you would just want to put the css into the relevant css file in that way
Hii I have a question. After your tutorial everything works, but the images that show up when I hover are a bit... pale? Like they have white color opacity on top. Do you know how to fix it? Debut theme.
Hi Sara, this is definitely possible! It would require you to go into that sections liquid file, add a image selector to the schema, and then implement it in much the same way in the HTML of the file.
Hi Monsur, this tutorial was made for the Debut theme. Dawn already has built in functionality to show the second image on hover. If you would like to switch this to be the image we placed in the metafield you would need to go into your product-card.liquid file and switch "product_card_product.media[1]" to "product_card_product.metafields.my_fields.hover_effect" (product_card_product.metafields.my_fields.WHATEVER_YOU_NAMED_YOUR_METAFIELD)
@@WillMisback Thanks, it is not working properly in dawn theme. here is my code in product.card {%- if product.metafields.my_fields.hover_effect != nil -%}
@@monsurrahman8773 Hi Monsur, dang unfortunately this tutorial is for the debut theme and the method may not work on other themes. It's very hard for me to troubleshoot this problem without access to your site. If you are interested in me implementing the code on your site for a price, please email me at willmiswebdev@gmail.com
Hi Arifuzzaman, this tutorial is for the Debut theme, and will not work with every theme. The same steps are still cross applicable, you just need to find the equivalent of the product-card snippet in your theme.
Hi Lola, you could either: 1) Create a custom product template with an extra snippet coding for this 2) Hardcode this in, in the HTML editor of your product The code in both instances would look much the same as that of this video. Hope that helps!
Hey Josef, just redownloaded debut to check on this for you. I still have theme.css. It is located in the assets folder. You can search your theme files by title in the upper left hand corner of the theme editor. Hope that helps!
If you have any trouble implementing the code in this video, leave a comment and I will help you as best I can!
My Latest Shopify Tips & Tricks: wmiz.github.io/mastering-shopify
whenever I try to select images for hover there is a blank and I can not choose any images or upload files.
Thank you so much...it helps me alot
Wow, this was extremely easy to understand unlike other coding videos!! Thank you a TON
Subbed!!
Great work man...I can't thank you enough.
Thanks Harshvardhan, your comment means a lot!
Thanks, very helpful! worked for me an I'm a complete novice when it comes to coding.
Great to hear man! Good luck with your site and coding journey!
Insane, it worked! Thank you man!
Glad it helped!
nice and easy
This is amazing! Thank you so much.
One question, Debut Theme allows to upload videos to product media. Do I still need to convert them to gifs?
This is a great video and worked really well for my store. The only thing is the second hover image seems to have some sort of opacity over it so is looking washed out. Any ideas how to change so this the images looks like a normal colour grade? I am using Debut theme? Thanks
This has to do with the class that is being applied on hover as the default in Debut is to illuminate the image on hover. There are two ways to change this: 1) change the style in the class that is being applied or add a second class to the image that maintains the original style with an !important tag. It's a little too complicated to lay out how to specifically do either of these things over YT comments unfortunately.
@@WillMisback Hi, would you be able to make another video explaining how to change the class? I'm experiencing the same issue.
Thank you so much for your video! It works perfectly on my shop. I do have a question though, is it possible that everything is automatic? That you don't need to add another picture on Metafields? For example, if I have two images already on media, that the second image is directly used? Thank you
I am wondering as well.
Hi Paulo, this is certainly possible. When assigning the hover_img_url Instead of relying upon metafields, we can use the liquid tag {{ product.images.last }} (this will make the image the last product image that you have uploaded. Let me know if that helps!
Hi Ibrahim, this is certainly possible. When assigning the hover_img_url Instead of relying upon metafields, we can use the liquid tag {{ product.images.last }} (this will make the image the last product image that you have uploaded. Let me know if that helps!
@@WillMisback Thank you for getting back to us. After everything was working, now it stopped working and I don't know why?
Nice It's an incredible video and very clear. Thanks! Anyway I'm having trouble while implementing it, it shows the metafields first as Product image and it broke the previous images uploaded. Would you mind helping me troubleshoot this issue?
Never mind, I did it again and work perfectly! haha
@@juanigaitez8767 Awesome! Glad you got it fixed.
@@juanigaitez8767 What did you do? I'm just getting the same one image?
hi Will,
do you know if this will work on the spotlight theme?
thanks!! it worked really well hover I have one problem when It only works ones for a small time how can I impove it that I would work every time you hover over it and that it would work longer?
Make sure you remove or account for any overlapping elements on the product card
Hi Will, thanks for your video. I don't seem to find the theme.css file there is just theme.scss.liquid. What should I do? Thanks again!
You could try applying the same styles in your theme.scss.liquid file, but make sure you duplicate the theme beforehand just in case
Well, technically fine but practically when you have a huge list of products, who would keep on adding a separate image? I thought you will be showing how to zoom a product image when user hovers over it...
Hi vrowmuria, it's definitely possible to use the second or last product image in place of the metafield. Also zooming product image on hover is a great suggestion for a video.
What if my theme-editor is .js not .css ?
Hey this is really helpful. I do not have theme.css file in asset folder. I am using dawn theme shopify. Can you help?
I believe the Dawn theme has this feature by default implemented (at least for images). Dawn organizes its css files by individual sectioning. So you would just want to put the css into the relevant css file in that way
Hii I have a question. After your tutorial everything works, but the images that show up when I hover are a bit... pale? Like they have white color opacity on top. Do you know how to fix it? Debut theme.
Hi DonatsuNoHime, usually this is caused by an overlay element over the image. You can fix it by deleting/commenting out this element.
Thank you !!
You're welcome!
Is it possible to add hover effect to an image on landing page 'Text Colums with Images' ??
Hi Sara, this is definitely possible! It would require you to go into that sections liquid file, add a image selector to the schema, and then implement it in much the same way in the HTML of the file.
Would that be possible with mp4?
Please make. Video on how to turn product page images into slider images for debut or narrative theme
Hi Jahin, could you explain a little bit more of what you mean by slider images?
@@WillMisback turning debut theme product page image list to slider image from grid image
Hello Will, is not work with Dawn theme? I can't find any option like product-grid.
Hi Monsur, this tutorial was made for the Debut theme. Dawn already has built in functionality to show the second image on hover. If you would like to switch this to be the image we placed in the metafield you would need to go into your product-card.liquid file and switch "product_card_product.media[1]" to "product_card_product.metafields.my_fields.hover_effect" (product_card_product.metafields.my_fields.WHATEVER_YOU_NAMED_YOUR_METAFIELD)
@@WillMisback Thanks, it is not working properly in dawn theme.
here is my code in product.card
{%- if product.metafields.my_fields.hover_effect != nil -%}
{%- endif -%}
@@monsurrahman8773 Hi Monsur, dang unfortunately this tutorial is for the debut theme and the method may not work on other themes.
It's very hard for me to troubleshoot this problem without access to your site. If you are interested in me implementing the code on your site for a price, please email me at willmiswebdev@gmail.com
@@WillMisback Thanks for your kindness. if I need then I'll talk to you.
Hi can you make a Video on adding Hover but Text will be shown Thanks!
Great idea Madmarks!
Hi, I can't done it. I tried to motion theme. Here could not find Product-card-grid
Would you help me!
Hi Arifuzzaman, this tutorial is for the Debut theme, and will not work with every theme. The same steps are still cross applicable, you just need to find the equivalent of the product-card snippet in your theme.
Thank you so much ! Do you know how to add a hover effect on an image picto in the product description by any chance ?
Hi Lola, you could either:
1) Create a custom product template with an extra snippet coding for this
2) Hardcode this in, in the HTML editor of your product
The code in both instances would look much the same as that of this video. Hope that helps!
I'm using Debut Theme, but I cannot find the theme.css file. Maybe this has change in 2022?
Hey Josef, just redownloaded debut to check on this for you. I still have theme.css. It is located in the assets folder. You can search your theme files by title in the upper left hand corner of the theme editor. Hope that helps!
Would love a free consult! X
When I hover over my image, image #2 is warped! Help!
Hi Millah, this has to do with the styling applied to the image. For more info: www.w3schools.com/css/css_dimension.asp
Does this implementation work with Bundle Builder?