Debut - show alternate image on hover over product on collections page

Laura400co
Tourist
8 0 4

Hi there

I know a lot of posts have dealt with this but all of the codes I have tried have either not worked or resulted in duplicates of all my products.  Can someone please provide me with code for my website 400co.com.au to paste in the product-card-grid.liquid section and also the theme liquid (not sure whether this is in assets folder or layout).  Any help would be much appreciated.  Extra points if you are able to give me code that displays the third image as the alternate image as that is what my website was already set up to do before I changed to Debut.

Thanks

Laura

0 Likes
dmwwebartisan
Shopify Partner
8516 2000 2689

@Laura400co 

Please check the following links.

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo...
https://community.shopify.com/c/Shopify-Design/Reveal-second-image-on-hover-Debut-theme/td-p/830115

 

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Laura400co
Tourist
8 0 4
Hi @dmwwebartisan I have tried this code exactly as it is in the first post
and nothing. I have even tried using the code suggested further down the
thread and nothing works. I do not have a "theme.css.liquid" file, only
"theme.css" so maybe this is the problem? Can you please provide me with
code specifically for my website?
0 Likes
dmwwebartisan
Shopify Partner
8516 2000 2689

@Laura400co 

Please add  CSS code your theme.css file simple .

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Laura400co
Tourist
8 0 4

@dmwwebartisan yes I did this to try but it still did nothing.  The code does not work on my website when added to theme.css file.  I also have no other file with css.liquid after it as the post suggests finding. The code for theme.css is long, otherwise I would have pasted it here for you to see.  Can you please recommend some specific code?  As I have tried adding this and it does nothing, and tried other code I found on youtube that works but it results in a double up of all my products, so can't win either way. Thanks, Laura

0 Likes