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

Solved

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

empiricalarby
Trailblazer
230 1 52

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

 

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

 

Screenshot 2024-05-23 170103.png

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!

Accepted Solutions (3)

BSSCommerce-HDL
Shopify Partner
2305 833 906

This is an accepted solution.

Hi @empiricalarby

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

BSSTechVenture_0-1716509926605.png

 


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

BSSTechVenture_1-1716509932630.png

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: 

BSSTechVenture_2-1716509993238.png

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
Shopify Partner
10087 2006 2057

This is an accepted solution.

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>

Screenshot 2024-05-24 at 10.59.21.png

- Helpful? Like and Accept solution! OR 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
Shopify Partner
2305 833 906

This is an accepted solution.

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: 

BSSTechVenture_0-1716679170069.png

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

Replies 4 (4)

BSSCommerce-HDL
Shopify Partner
2305 833 906

This is an accepted solution.

Hi @empiricalarby

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

BSSTechVenture_0-1716509926605.png

 


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

BSSTechVenture_1-1716509932630.png

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: 

BSSTechVenture_2-1716509993238.png

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
Trailblazer
230 1 52

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

BSSCommerce-HDL
Shopify Partner
2305 833 906

This is an accepted solution.

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: 

BSSTechVenture_0-1716679170069.png

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
Shopify Partner
10087 2006 2057

This is an accepted solution.

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>

Screenshot 2024-05-24 at 10.59.21.png

- Helpful? Like and Accept solution! OR 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.