The zoom button (white circle with magnifying glass inside) on the product images blocks part of my product images and just looks bad all around when it’s over an image. I know I can turn it off, but I want the zoom functionality. Is there a way to shrink it, or remove the white circle, or make the button more transparent?
Hi @jackdubl
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
You can style it with custom CSS instead of turning it off. In your theme editor go to Theme settings → Custom CSS (or add to your base stylesheet) and target the zoom button. On Dawn/most Shopify 2.0 themes it’s the .product__media-zoom-lightbox or .zoom-in button. Something like this shrinks it and makes it semi-transparent:
.product__modal-opener .product__media-icon,
.product-media-modal__toggle { transform: scale(0.7); background: rgba(255,255,255,0.35); box-shadow: none; }
To drop the white circle entirely, add background: transparent; and border: none; to the same rule. Right-click the button on your live product page and choose Inspect to confirm the exact class name for your theme, then swap it into the selector above — class names differ slightly between themes. Adjust the scale value (0.5–0.8) and the 0.35 opacity to taste.
Hey @jackdubl
hope you’re doing well!
Yes, usually you can keep zoom and customize the button with CSS. You can make the circle smaller, remove the white background, or add transparency so it doesn’t cover the product image.
@jackdubl using css you can make it smaller or shrink its size, can you please share your page link where you have this icon?