Remove Zoom Option (Mobile)

[Dawenn]

Hello, 🤠

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

My website: tudoconexao.com

[Richmondair · 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!

[BSSCommerce-B2B · 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:

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: 

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! 

[Richmondair · 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!

[BSSCommerce-B2B · 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:

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: 

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! 

[Made4uo-Ribe · 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:

[Dawenn]

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

@BSSCommerce-B2B @Made4uo-Ribe @Richmondair