Product Zoom for Magento 2

Configuration Settings

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

General

Is Enabled -  set ‘Yes’ to enable the extension in the storefront or ‘No’ to disable

Main Image

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

Zoomer

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

Zoom Window

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

Zoom Lens

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

Zoom Tint

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

Lightbox

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

Caption

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

 

Thumbnails

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