Show second image on hover - Berlin theme

RobCupper · ‎11-24-2023

Can someone help with with code that enables second image to show on hover when viewing collection pages, using the Berlin theme? My site URL is slackjawapparel.com

Thanks!

Dan-From-Ryviu · ‎11-24-2023

Go to your Online store > Themes > Edit code > open theme.liquid file, add this after <head> tag and check again

<style>
        .collection-product-card:hover .media.media--hover-effect>img:first-child:not(:only-of-type) {
    opacity: 0;
    transform: scale(1.12);
    transition: transform var(--duration-long) ease,opacity var(--duration-long) ease;
}
        .collection-product-card:hover .media.media--hover-effect>img+img {
    opacity: 1;
    transform: scale(1.1);
    transition: transform var(--duration-long) ease,opacity var(--duration-long) ease;
}
</style>

- Helpful? Like & Accept solution! - Support me: Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎11-24-2023

Add this code to your theme.liquid file also

<style>
.slideshow .slideshow-slide__button a.button {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
}
</style>

- Helpful? Like & Accept solution! - Support me: Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎11-24-2023

Hi @RobCupper

Go to your Online store > Themes > Customize > Collections > Default collection > Product grid > enable Show secondary image option

- Helpful? Like & Accept solution! - Support me: Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

RobCupper · ‎11-24-2023

Thanks for your reply, but this doesn't work, I have tried it already and nothing happens on hover when this option is enabled

Dan-From-Ryviu · ‎11-24-2023

Go to your Online store > Themes > Edit code > open theme.liquid file, add this after <head> tag and check again

<style>
        .collection-product-card:hover .media.media--hover-effect>img:first-child:not(:only-of-type) {
    opacity: 0;
    transform: scale(1.12);
    transition: transform var(--duration-long) ease,opacity var(--duration-long) ease;
}
        .collection-product-card:hover .media.media--hover-effect>img+img {
    opacity: 1;
    transform: scale(1.1);
    transition: transform var(--duration-long) ease,opacity var(--duration-long) ease;
}
</style>

- Helpful? Like & Accept solution! - Support me: Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

RobCupper · ‎11-24-2023

That worked - thanks so much for your help!!

Dan-From-Ryviu · ‎11-24-2023

Happy I could help ❤️

- Helpful? Like & Accept solution! - Support me: Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

RobCupper · ‎11-24-2023

I would also like to make my homepage slider image clickable (without having to display the huge button over the top) but currently there is no way to do that. I don't suppose you know how I might work around it with some code?

Dan-From-Ryviu · ‎11-24-2023

Add this code to your theme.liquid file also

<style>
.slideshow .slideshow-slide__button a.button {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
}
</style>

- Helpful? Like & Accept solution! - Support me: Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

RobCupper · ‎11-24-2023

Brilliant thanks so much!!

Dan-From-Ryviu · ‎11-24-2023

Glad I could help ❤️

- Helpful? Like & Accept solution! - Support me: Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Show second image on hover - Berlin theme

Show second image on hover - Berlin theme

Community Blog Articles