Shrink or make transparent the zoom button

Store Design
1

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?

2

Hello

Yes, you can keep the zoom functionality while making the zoom button much smaller and less intrusive.

The easiest solution is to target the zoom button with CSS and reduce its size, opacity, and icon size. For example:

.product__media-icon {
  width: 28px !important;
  height: 28px !important;
  opacity: 0.65;
}

.product__media-icon svg {
  width: 14px !important;
  height: 14px !important;
}

If your theme uses a different class for the zoom button, you’ll need to inspect the button element and replace .product__media-icon with the correct selector.

You can also make it more subtle with:

.product__media-icon {
  transform: scale(0.7);
  opacity: 0.5;
}

This keeps the image zoom functionality but makes the button much less noticeable, so it doesn’t cover an important part of the product image.

If you share the theme name or the HTML/class of the zoom button, I can give you the exact CSS selector for your store.

3

I tested on Eclipse 5.3.1, the same version as your store.

Problem:

Big white zoom button sitting on the product photo
Big white zoom button sitting on the product photo1202×1650 281 KB

Result after applying the fix: On phones the button always sits on the photo; on desktop it only shows on hover. This covers both.

Smaller, see-through zoom button - the result
Smaller, see-through zoom button - the result1202×1650 282 KB

That white circle is Eclipse’s image zoom button. A few lines of CSS shrink it and fade the circle, and the zoom still works.

Add the CSS

  • Online Store > Themes, open your theme > Edit theme

Online Store > Themes > Edit theme
Online Store > Themes > Edit theme932×150 19.5 KB

  • Open Theme settings (the gear icon), scroll down to Custom CSS, paste the code below, then Save

Theme settings > Custom CSS, paste and Save
Theme settings > Custom CSS, paste and Save1428×888 277 KB

.product-media__lightbox-zoom{ --size: 30px; }
.product-media__lightbox-zoom .product-media__zoom-icon{
  --icon-width: 15px !important;
  --icon-height: 15px !important;
}
.product-media__lightbox-zoom:before{ opacity: .5; }

Note

  • Smaller or larger button: change --size (44px is Eclipse’s default).
  • More see-through: lower the opacity, e.g. .3.
  • Remove the white circle completely: swap the last rule for .product-media__lightbox-zoom:before{ display: none; } (leaves just the magnifier icon).
4

Thank you!! This worked great! Although it didn’t do anything on desktop view–was it supposed to also change the desktop view?

Either way, it was the mobile view that I mainly concerned with. Like you said, the desktop view only shows when you hover over it, plus it just takes up less of the image on desktop, so not as big a deal. Thanks!!

5

I stand corrected…it did work on desktop. I was in some preview mode that wasn’t applying it. When I opened it normal, it was also done on desktop. Thank you so much for the help.