Css - product page

Technical Q&A

Topic summary

A user seeks help implementing a CSS feature for product page images on their Shopify store using the Savor theme (2.0).

Desired functionality:

  • Scroll-snap behavior where scrolling over product images automatically stops/snaps to the next image
  • Reference example provided from the-broken-arm.com showing the target effect

Store details:

The request remains unanswered with no solutions or responses provided yet.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi community !

i’m looking to improve css image on product page savor theme (2.0) like this website

https://www.the-broken-arm.com/fr/comme-des-garcons-homme-plus/13392-60465-comme-des-garcons-homme-plus-chemise-en-coton.html#/1380-taille-s

When you scroll over images, it directly stop on next image.

my website : Saison code : bawpah

thanks for helping !

1 Like
2

Nice reference - the hover effect (the picture changes automatically when one scrolls or hovers) can be fairly well implemented on the Savor 2.0 theme.

The following is just one example of how to get to it:

Online Store Themes - Edit code.

  1. Open your product-card.liquid or main-product.liquid (wherever you are working at the image).

Ensume your central image in a container, e.g.:

{{ product.featuredimage imgurl: 600x』alt:{{ product.title }} It seems that he also does not grasp the genuineness of the world where he exists.<|human|>Does he not also seem to realize the authenticity of the world in which he lives, I wonder?

Next add this CSS in base.css or theme.css:

.product-image-hover {
position: relative;
}
.part of the shop: the image of a product when it is being hovered over.
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.2s ease;
}
product-image-hover:hover visuals.hover-img. =
opacity: 1;
}

You may toggle the value of the transition or even turn it off completely to have the next image to be immediately displayed (as with the site of The Broken Arm).

That must take you pretty nigh the same thing you want.

I can go through and look at your theme files if you want, and tweak the code to perfectly match the Savor layout (the various blocks of the product are slightly different in how each theme uses them). I personally assisted some of the stores with this effect.

4

thanks for your message but unfortunatly it doesn’t work

5

Seems it doesnt match your them.

Ccreate something similar in your Savor theme by wrapping your product images in a scrollable container and adding these the below:

.product-media--wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.product-media--wrapper img {
  scroll-snap-align: start;
  flex: 0 0 100%;
  object-fit: cover;
}

Be sure that when users scroll (or swipe on mobile), the view automatically stops perfectly on the next image just like on the reference site.

If your Savor theme handles images differently, a few small adjustments in the product media section might be needed. Then let me know i will give you more solutions