Move the (+) image magnifier on product page to top right

[empiricalarby]

I need this change to apply to all products, viewed on all platforms.

Here’s one example: https://empiricalwater.com/products/empirical-water-glacial

I need the magnification button to be moved from top left of image to top right.

Any assistance with this would be greatly appreciated. Thanks so much!

[BSSCommerce-HDL]

Hi @empiricalarby ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.product__modal-opener:hover .product__media-icon, 
.product__modal-opener:focus .product__media-icon {
     opacity: 1 !important;
     position: absolute !important;
     right: 10px !important;
     top: 10px !important;
     left: auto !important;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Dan-From-Ryviu]

Hi @empiricalarby

Please add this code to theme.liquid file, after in Online Store > Themes > Edit code

[empiricalarby]

Thanks, this works on desktop. Can you make it work on mobile too?

[BSSCommerce-HDL]

Hi @empiricalarby , Pls insert this code to your file css:

.product__media-icon {
   opacity: 1 !important;
   position: absolute !important;
   right: 10px !important;
   top: 10px !important;
   left: auto !important;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you