How To Use Product Zoom In Magento 2

Person Using Ipad

If you run an online store, you know the importance of displaying your products in a manner that closely resembles their real-life appearance. One of the ways to achieve this is through product magnification or zooming. In Magento 2, you can enable product zoom for your online store. Here’s how.

Speed Up Your Magento Store by 300%

Enabling Product Zoom

The first step in using product zoom in Magento 2 is to enable it in your store’s settings. To do this, follow these steps:

  1. Go to your store’s Admin panel
  2. Click on Stores > Configuration
  3. In the left-hand menu, click on Catalog > Product View
  4. Scroll down the page to find the Image Zoom section
  5. Set the Enable Image Zoom option to Yes
  6. Save your changes

Once you’ve enabled product zoom in your store’s settings, you can now start configuring how it works.

Configuring Product Zoom

Magento 2 provides different ways to configure product zoom. Here are the options available:

Zoom Window Width/Height

These options determine the width and height of the zoom window that displays when a customer hovers over an image. You can set these values in pixels. Magento 2 recommends a width of 500 pixels and a height of 500 pixels.

Zoom Type

Magento 2 provides two types of zoom: Inner Zoom and Lens Zoom. Inner Zoom displays a zoomed-in view of the product within the same image container. Lens Zoom, on the other hand, displays the zoomed-in view of the product in a separate container that follows the cursor. You can choose the type of zoom that works best for your store.

Zoom Level

This option sets the level of zoom to apply to your product images. You can set the value on a scale of 1 to 10, with 1 being the least zoomed-in and 10 being the most.

Allow Zoom on Mobile Devices

By default, Magento 2 disables product zoom on mobile devices. However, you can enable it by setting this option to Yes.

Zoom Disabled Above

If you want to disable product zoom for certain screen sizes, you can set the value for this option. For example, you may want to disable zoom for screens smaller than 600 pixels.

Configuring Product Images

Once you’ve enabled and configured product zoom, you need to ensure your product images are suitable for zooming. Here are some tips:

  • Use high-quality images: The higher the quality of your product images, the better they’ll look when zoomed in.
  • Use large images: Your product images should be large enough to allow for zooming. Magento 2 recommends using images that are at least 1000 pixels wide.
  • Use consistent image sizes: All your product images should have the same aspect ratio and dimensions. This ensures uniformity when zooming.
  • Optimize images: To ensure your product images load quickly, optimize them by reducing their file size without compromising on quality.

Conclusion

Product zoom is a great way to provide your customers with a detailed view of your products. With Magento 2, you can easily enable and configure product zoom for your online store. By following the steps outlined in this article, you can create a better shopping experience for your customers and increase your sales.

Scroll to Top