Hello!
I want to disable the zoom on the first photo of my product pages, like the product link: https://www.tinahealthcare.com/collections/period-pain-relief/products/cuterus-heatable-plushie?variant=50145163018471
Thank you!
Topic summary
Request to turn off image zoom on the first product photo in a Shopify product page. The provided link is an example.
Proposed solutions:
- Use the theme editor: Customize theme > Product > Default product > Product page settings and uncheck the zoom option. This likely disables zoom for all product images on that template.
- Add CSS in Assets (main.css/base.css/style.css/theme.css) to disable interactions on the zoom container (selector shown as .product-gallery__image .zoom-container with pointer-events: none !important). A screenshot was provided to illustrate the result.
- Another reply suggests adding code in theme.liquid before , but no code was actually provided, so this step is incomplete.
Notes:
- Suggestions target disabling zoom broadly on the product page, not specifically the first image.
- A screenshot is included to show the CSS outcome.
Status: No confirmation from the original poster; resolution not verified and the first-image-only requirement remains unaddressed.
1 Like
Go to customize theme > product > default product> on the left side click on product page and you will find option to uncheck zoom
Hi @gabbym0062
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.product-gallery__image .zoom-container {
pointer-events: none !important;
}
and Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @gabbym0062 ,
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- In theme.liquid, paste the below code before
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!