Back to contents

JetProductGallery: How to Enable Zoom Option for the Product Images

From this tutorial, you will learn how to set the zoom option in the product widgets/blocks of the JetProductGallery plugin for Elementor and Gutenberg.

All JetProductGallery features provide a zoom function, such as Gallery Anchor Navigation, Gallery Grid, Gallery Modern, and Gallery Slider. Let users zoom in and view the product in detail using a zoom option in the product images gallery.

Zoom Option in Elementor

Proceed to the Elementor page/template or open the JetWooBuilder Single Product template, where you use one of JetProductGallery widgets for displaying product images in the Elementor editor.

jetwoobuilder templates

Place any JetProductGallery widget if you haven’t done it yet and go to its editing mode.

The settings window for the widget will appear promptly. In the General section of the Content tab, you need to move the toggle next to Enable Zoom field. Also, when the zoom is activated, there’s an opportunity to set the Zoom Magnify.

gallery grid general settings

Click the “Update” button to save the changes. Now let’s check how it functions on the page.

Zoom option in the JetProductGallery widgets

The same option is available in the Gutenberg editor.

Zoom Option in Gutenberg

Head to the Gutenberg-edited page and place one of the desired JetProductGallery widgets. For example, we use Gallery Modern

Right in the General tab, define the Source and Product ID. Also, there you can see the Enable Zoom option. Activate it to implement zoom to the gallery and set the Zoom Magnify number.

gallery modern enable zoom

Click the “Update” button and check the results on the front end.

gutenberg edited gallery modern with zoom

That’s all. For now, you can use the Zoom option in the JetProductGallery widgets to present the products as more attractive and modern.