Hi @mxaxm ,
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__media .media img {
object-fit: contain !important;
transform: scale(1) !important;
}
Topic summary
Main issue: Product thumbnails in Shopify’s Refresh theme appear zoomed by default and zoom further on hover. The goal is to show images at their normal size with no hover magnification.
What worked (Refresh):
- Disable hover zoom by removing image transform on hover (CSS added to Assets/base.css targeting the hover state).
- Fix the default “zoomed-in” look by setting object-fit to contain on product media images (rule for .card__media .media img in Assets/base.css). The original poster confirmed this solved their need.
Notes on other themes:
- Craft theme: Similar approach recommended—set object-fit: contain and transform: scale(1) to neutralize magnification.
- Flow theme: If Assets/base.css isn’t present, add the CSS to Assets/theme.min.css instead.
Key concepts:
- object-fit: contain ensures the full image fits inside its container without cropping/zooming.
- transform controls hover magnification; removing transform or setting scale(1) prevents zoom.
Attachments/links: Screenshots and store links were shared; CSS snippets are central to the solution.
Status: Resolved for the original poster (Refresh). Additional follow-ups for Craft and Flow received guidance but lack final confirmation.