Hi All, another silly question, using the latest savor theme by Shopify and theres no option to disbale second image on hover on product/grid/carousel. Any advice?
Topic summary
A user working with Shopify’s Savor theme seeks to disable the second product image that appears on hover in product grids and carousels, as the theme lacks a built-in toggle for this feature.
Proposed Solutions:
Two CSS-based approaches were offered:
-
Option 1: Add custom CSS targeting
.product-card slideshow-slides slideshow-slide+slideshow-slidewithdisplay: none !important;through theme settings -
Option 2: Navigate to Online Store → Themes → Edit Code, open
Assets/base.css, and append CSS targeting.card-gallery .product-media-container + .product-media-containerwithdisplay: none!important;
Both solutions use CSS to hide the secondary image element. The discussion remains open with no confirmation of which method worked or if the issue was resolved.
Hi @DASCPA
let try to add this custom css code to your theme settings:
.product-card slideshow-slides slideshow-slide+slideshow-slide {
display: none !important;
}
2 Likes
Hi @DASCPA ,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/base.css
- Add code below to end of file
.card-gallery .product-media-container + .product-media-container {
display: none!important;
}