Documentation
Image Click and Zoom Docs
Pick the guide that matches how you build your page, then follow the steps in order.
Guide Overview
What you will learn
Simple setup guides for adding zoomable images in Elementor and WooCommerce.
Elementor widget tutorial
Follow these steps to add a click-to-zoom image that helps visitors inspect the details.
01 Install and activate Elementor.
Image Click and Zoom works with Elementor, so Elementor needs to be active first.
Go to Plugins -> Add New, search for Elementor, then click Install Now and Activate.
02 Open a page in Elementor.
Create a new page or open an existing one.
Click Edit with Elementor to open the visual editor.
03 Find the Image Click and Zoom widget.
Use the search box in the Elementor sidebar and type Image Click and Zoom.
When it appears, drag it onto the page.
04 Choose the image and set the look.
Use the Content tab to pick the image you want people to open and inspect.
Use the Style tab to adjust how the viewer looks and feels, including zoom behavior and overlay styling.
05 Preview the experience and publish.
Use Preview to test the image on the live page.
Click the image yourself to make sure the zoom view feels smooth, then Publish when ready.
06 See which images get attention.
If you want insight, open Image Click and Zoom -> Zoom Analytics in the WordPress admin.
There you can see which images get opened most and which pages hold attention longer.
WooCommerce integration tutorial
Use this guide to bring the same close-up image experience to WooCommerce product pages.
01 Set up WooCommerce and a product with clear images.
Install WooCommerce and create or open a product page so you have something real to test.
Use clear, large images so shoppers can zoom into details without blur.
02 Turn on WooCommerce support in the plugin settings.
Open Image Click and Zoom -> Settings and go to the WooCommerce section.
Enable the product gallery option, and only turn on the product description option if you want zoom there too. If another lightbox gets in the way, disable it here.
03 Choose how the viewer should feel.
Use the viewer settings to decide how far people can zoom, what the background looks like, and which controls appear on screen.
Keep the experience simple enough that shoppers can focus on the product, not the interface.
- Set a zoom level that shows useful detail
- Pick a background color that keeps the product easy to see
- Show only the controls people really need
- Use a smooth animation so the viewer feels natural
- Turn on the minimap if your product images are very large
04 Test the product page on desktop and mobile.
Open a product page and click the main image. Make sure zoom, panning, and image switching all feel clear and easy to use.
If the wrong lightbox opens, disable the theme lightbox. If nothing happens, double-check that WooCommerce support is enabled.
05 Use visitor interest to improve product pages.
Open Zoom Analytics to see which product images people inspect most and how long they stay with them.
If you use the extra marketing tools, you can turn that interest into related suggestions and follow-up campaigns.
Need a Smooth Setup?
Keep each step short and easy to test.
Start with the basic setup, check the result on the live page, and only then move into optional settings. If something depends on browser support or another plugin, call that out before the user gets stuck.