Move the (+) image magnifier on product page to top right
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!
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 😍
Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.product__media-icon {
left: unset !important;
right: calc(.4rem + var(--media-border-width)) !important;
}
</style>
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 😍
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 😍
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 😍
Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.product__media-icon {
left: unset !important;
right: calc(.4rem + var(--media-border-width)) !important;
}
</style>
