Product Zoom for Magento 2
The extension provides your shoppers the ability to interactively view high-resolution images with image zoom (inner, lens, window), lightbox, thumbnails and responsive functionalities.
The extension has 2 separate ways of installation, via Composer or by copying the code.
Please follow this Installation Guide to install the extension.
To access the configuration settings of the extension, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Product Zoom Pro.
The module’s configuration contains nine sections: General, Main Image, Zoomer, Zoom Window, Zoom Lens, Tint, Caption, Thumbnails and Lightbox
Is Enabled - set ‘Yes’ to enable the extension in the storefront or ‘No’ to disable
Size - choose to load the main product image fully responsive (width=100%) or with a fixed width and height.
Crossfade Image - set "Yes" to crossfading main image when clicking a different thumbnail
Border Size - select the border thickness of the main product image and specify the color
Enable magnifying glass - if "Yes" the magnifying will be enabled, indicating that the magnifying glass needs to be clicked first to show the lightbox
- Text Hint - enter the text to appear on the magnifying glass
- Border Color - select the magnifying glass border color
Zoom type - choose the zoom type of the man image. Window, Lens or Inner
Scrollzoom - choose “Yes” to activate zoom on mouse or “No” to disable
Minimum device screen width to show zoom and lightbox (in pixels) - specify the minimum width (in pixels) of all the device screen to which you want to display image zoom and lightbox. eg: If 767, image zoom and lightbox will load on all screen with minimum width equals or greater than 767px
Width (in pixels) - set the width of the zoom window in pixels
Height (in pixels) - set the height of the zoom window in pixels
Position - choose the zoom window position. This setting determines where the zoom window is shown relatively to the main image. You can see the different position by hovering over the comment below the field
Set the Offset-X (in pixels) and Offset-Y (in pixels)for the selected zoom window position for further fine-tuning of the zoom window position
Specify the Border Size and Border Color for the zoom window
In the Fade In and Fade Out fields, specify a fade-in and fade-out for the zoom window in milliseconds. Leave blank for no fade
Shadow - choose to show or hide the Shadow effect on zoom window. There are various effects to select from.
Color - set the color of the Shadow or Glow effect
Easing - set to "Yes" to activate easing, then set the Amount of Easing effect
Override Lens Size - if set to "Yes" the size of the lens for zoom window type will be overriden. For a better experience: please do not enable the "Scrollzoom" feature (under Zoomer section) if the "Override Lens Size" option is enabled
Set the Lens Width (in pixels) and Lens Height (in pixels) of the lens square/round for zoom type window
In the zoom lens section you can configure the look and feel of the zoom lens. This section is visible if “Zoom Type” is set to “Lens”.
Size (in pixels) - specify the lens size in pixels. Select the shape of the zoom lens, either round or square
Shape - select the shape of the zoom lens, either round or square
Choose the Border Size, Border Color and Color of the zoom lens
In theFade In and Fade Out fields, specify a fade-in and fade-out for the zoom lens in milliseconds. Leave blank for no fade
Contain Lens Zoom - set this field to “Yes” to makes sure the lens does not fall outside the outside of the image, or "No" to disable
In the tint section, you can configure the tint overlay for the main product image. This section is visible when “Zoom Type” is set to “Window”.
Enable Tint - set to "Yes" to enable the tint, which overlays the main product image outside the zoom lens
Color - se the tint overlay color
In the Fade In and Fade Out fields, specify a fade-in and fade-out for the zoom window tint in milliseconds. Leave blank for no fade-in, fade-out
In the lightbox section you can configure a lightbox which will appear when clicked on the main product image. The lightbox will show a larger image of the product image.
Enable Lightbox - set to "Yes" to enable the lightbox functionality or "No" to disable it
Lightbox Theme - select the Theme of the lightbox display, either a light or a dark theme
Set Show Image Title - field to Yes to show the image label above the product image in the lightbox
Set Show Overlay Gallery Of Images - field to Yes, to show a gallery of product images inside the lightbox
Set Enable Slideshow - field to Yes, to enable the slideshow and show buttons to control within the lightbox
Set Slideshow Autoplay - field to "Yes", to automatically start sliding the images within the lightbox
In the Slideshow Speed - field, specify the speed of the slideshow in milliseconds. Example 5000
Set Allow Lightbox Resize - field to Yes, to resize the lightbox based on the viewport or No, to load the lightbox with the original product image size
In the caption section you can configure a caption for the main product image and zoom window. Captions are the product images title/alt configured through the Magento admin panel.
Caption Content Type - choose between “Product Image Alt Text”, “Product Name”, “Product Short Description” and “Product Description”. Please make that the option you select as "Caption Content Type" is actually filled in for your products
Set Show Caption On Main Image - field to "Yes", to show caption on the main product image
Set Show Caption On Zoom Window - field to "Yes", to show caption on zoom window
In the thumbnails section you can configure that thumbnail gallery that display below the main product image
Position - set the location of the thumbnail gallery relative to the main product image
Title - choose to add an optional title above the thumbnails. Only available if the thumbnail position is set to above or below
Switch main image on thumbnail - choose "On Click" to switch main product image on thumbnail click or "On Mouse over" to switch on hover thumbnail
Specify a Width (in pixels) and Height (in pixels) of the thumbnails shown below the main image
Alt Text Source - choose between “Product Image Alt Text”, “Product Name”, “Product Short Description” and “Product Description”. Please make that the option you select as "Alt Text Source" is actually filled in for your products
Set Show thumbnail for product with only one image - to show thumbnail for product with only one image, if "No" the thumbnails for products with only one image will be hidden
Set the Space between thumbnails block and product image and Space between thumbnails in pixels
Scroll Thumbnails - set to "Yes" to create a scrollable thumbnail carousel for the thumbnails gallery and configure te following:
- Maximum width of the scroll block (in pixels) - define the maximum width for the scroll area is thumbnails are show above or below, set to 0 for auto width
- Infinite loop thumbnails scroll - set to "Yes" to enable the infinite loop effect, or "No" to hide it
- Number of thumbnails to show - specify the number of thumbnails to show on the gallery
- Number of thumbnails to scroll - specify the number of thumbnails to scroll on the gallery
- Show scroll pagination dots - set to "Yes" to show pagination dots/bullet on scroll or "No" to hide it
Note please refresh all Magento system caches and any of your custom caches technologies after editing any settings sections, this to make sure your latest changes show at the frontend
The extension support videos such as Youtube and Vimeo. Please follow this guide to add videos to the product. All product videos will appear in the extension thumbnails allowing visitors to swap between product images and product videos.
Once the extension is configured, users can instantly view high resolution zoomed images in the product page.
Example of Window/Basic Zoom displaying in the frontend
Example of Inner Zoom displaying in the frontend
Example of Lens Zoom displaying in the frontend
Example of Zoom with thumbnails displaying in the frontend
Example of Lightbox displaying in the frontend
Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.
Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!