Remove Zoom Option (Mobile)

Solved

Remove Zoom Option (Mobile)

Dawenn
Excursionist
33 0 8

Hello, 🤠

I would like to remove the zoom option on my product pages only on mobile. is there any way to do this?

Captura de tela 2024-06-14 141802.png

My website: tudoconexao.com

Accepted Solutions (3)

Richmondair
Tourist
7 2 1

This is an accepted solution.

Hello 🤠,

To remove the zoom option on your product pages specifically for mobile devices, you can add custom CSS to your website. Here’s a simple way to achieve this:

  1. Access your website's CSS file:

    • Log in to your website’s admin panel.
    • Navigate to the theme customization section where you can add custom CSS. This is usually found under "Appearance" > "Customize" or similar, depending on your platform.
  2. Add the following CSS code:

    css
    Copy code
    @media (max-width: 767px) { .your-zoom-class { pointer-events: none; } }

    Replace .your-zoom-class with the actual CSS class that controls the zoom functionality on your product images.

  3. Save your changes:

    • After adding the custom CSS, save and publish your changes.
    • Clear your website’s cache if necessary.

This code uses a media query to target devices with a screen width of 767px or less, which typically covers most mobile devices. The property to disable interactions with the specified element, effectively removing the zoom functionality on mobile devices.

If you're not sure about the class name, you can inspect the element using your browser's developer tools (usually accessed by right-clicking on the element and selecting "Inspect").

If you need further assistance, feel free to reach out!

 

https://rvacleanair.com/

View solution in original post

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Hi @Dawenn ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

 

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

BSSCommerceB2B_0-1718392978815.png

 

 

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 749px) {
   .product-gallery__zoom-notice {
      display: none !important;
   }
}

 

Step 3: Save your code and reload this page.

=>> The result: 

BSSCommerceB2B_1-1718393063792.png

 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

 

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Made4uo-Ribe
Shopify Partner
6999 1666 2058

This is an accepted solution.

Hi @Dawenn 

check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 749px){
span.product-gallery__zoom-notice {
    display: none !important;
}
}

 

And save. 

Result:

Made4uoRibe_0-1718395846642.png

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 4 (4)

Richmondair
Tourist
7 2 1

This is an accepted solution.

Hello 🤠,

To remove the zoom option on your product pages specifically for mobile devices, you can add custom CSS to your website. Here’s a simple way to achieve this:

  1. Access your website's CSS file:

    • Log in to your website’s admin panel.
    • Navigate to the theme customization section where you can add custom CSS. This is usually found under "Appearance" > "Customize" or similar, depending on your platform.
  2. Add the following CSS code:

    css
    Copy code
    @media (max-width: 767px) { .your-zoom-class { pointer-events: none; } }

    Replace .your-zoom-class with the actual CSS class that controls the zoom functionality on your product images.

  3. Save your changes:

    • After adding the custom CSS, save and publish your changes.
    • Clear your website’s cache if necessary.

This code uses a media query to target devices with a screen width of 767px or less, which typically covers most mobile devices. The property to disable interactions with the specified element, effectively removing the zoom functionality on mobile devices.

If you're not sure about the class name, you can inspect the element using your browser's developer tools (usually accessed by right-clicking on the element and selecting "Inspect").

If you need further assistance, feel free to reach out!

 

https://rvacleanair.com/

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Hi @Dawenn ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

 

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

BSSCommerceB2B_0-1718392978815.png

 

 

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 749px) {
   .product-gallery__zoom-notice {
      display: none !important;
   }
}

 

Step 3: Save your code and reload this page.

=>> The result: 

BSSCommerceB2B_1-1718393063792.png

 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

 

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Made4uo-Ribe
Shopify Partner
6999 1666 2058

This is an accepted solution.

Hi @Dawenn 

check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 749px){
span.product-gallery__zoom-notice {
    display: none !important;
}
}

 

And save. 

Result:

Made4uoRibe_0-1718395846642.png

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Dawenn
Excursionist
33 0 8

Thank you very much, you helped me a lot! 🫡😁

@BSSCommerce-B2B @Made4uo-Ribe @Richmondair