Need to move/hide the "+" icon for product photos

[Sapphire_Energy]

I added a discount pill to show sale savings, and want it in the top left corner of the product image on the product pages, but when you mouseover (desktop) the magnifying glass icon animates into view and is over top of it. On mobile the magnifying glass is just always covering it and you can’t see the pill. I want to leave the newly created pill there, and move the icon down so it’s out of the way. Honestly on mobile I think people know to just press on a picture if they want to see it larger, so i can just get rid of it altogether there.

Any thoughts on how to accomplish this? tried chatgpt but got nowhere and I can’t figure out the exact element in my browser’s inspector to try and find the css. searched bass.css and couldn’t find it. Help?

Here’s a screengrab of the issue…

[Sapphire_Energy]

Dawn theme (15.4.0). Forgot to mention that!

[devcoders]

Hi @Sapphire_Energy

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

[Opeoluwa123]

Thanks for the detailed explanation this is definitely something that can be fixed with a small CSS adjustment once we locate the exact zoom-icon element in your theme.

Every theme structures the product media differently, so to give you the correct selector and provide a clean fix (moving the icon on desktop and hiding it on mobile), I’ll need to inspect the live product page.

Could you please share your store URL or a preview link?

Once I can view the page, I’ll identify the exact element and provide the precise CSS you need no guessing or trial and error.

Happy to help you get it working exactly how you want it.

[suyash1]

@Sapphire_Energy it will need css, can you please share your website link?

since you are using the dawn theme, you can use this css as well, need to add to the very end of your base.css file

@media screen and (max-width: 749px) {
    .product__media-zoom-hover {display: none !important;}
}

[tim_1]

You can reposition the icon to the right.
Go to Customize=> Product page=> Product Info section and paste this code into “Custom CSS” setting of this section:

.product__media-icon--lightbox {
  left: auto;
  right: 1.2rem;
}

[Moid.space]

Move the zoom icon with:

.product__media-toggle { top:auto; bottom:1rem; }
@media(max-width:749px){ .product__media-toggle { display:none!important; } }

Puts it out of the pill’s way and hides it on mobile.

[Sapphire_Energy]

I actually tried this (via ChatGPT suggestion) and it did not make a difference in the visibility/behaviour. I tried searching the css for “.product__media-zoom-hover” but it stops finding matches at the “.product__m”

website link here: (I have changed the z-index of the discount pill to 500 to at least make it be on top)
I’m still a bit fresh with css so also really trying to learn how to inspect and find the correct elements so I can search the code to fix stuff like this myself. So please feel free to offer suggestions.

ANL High Current Fiberglass UL Listed Fuses | Sapphire Energy

[Sapphire_Energy]

Thanks - ANL High Current Fiberglass UL Listed Fuses | Sapphire Energy

I am still tweaking, so I’ve just changed the pill to be relative (was absolute) and set a z-index of 1, and that seems to have shifted the images down a few pixels, but also made it so nothing overlaps anymore. I’d love a proper fix that just moves the magnifying icon down, but i think this will work ok for now.

[Sapphire_Energy]

high z-index turned out to screw up the menus, so i made a different tweak with relative positioning and can probably live with that for now. Still open to proper suggestions as I still want to learn

[suyash1]

@Sapphire_Energy please try this css and check

.product__media-icon{display:none; visibility:hidden;}