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

empiricalarby · ‎05-23-2024

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 · ‎05-23-2024

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Dan-From-Ryviu · ‎05-23-2024

Hi @empiricalarby

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>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

BSSCommerce-HDL · ‎05-25-2024

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSSCommerce-HDL · ‎05-23-2024

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

empiricalarby · ‎05-25-2024

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

BSSCommerce-HDL · ‎05-25-2024

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Dan-From-Ryviu · ‎05-23-2024

Hi @empiricalarby

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>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

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

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

Community Blog Articles