User Guide of Magento 2 Image Zoom Extension

At the backend, go to FME EXTENSIONS > Configurations. Here you can find the extension configurations.

General Configurations

• Enable Module: Option to Enable/Disable the product image zoom module
• Zoom Type: Choose any image zoom option:
  • Magnifier
  • Light Box

Magnifier Settings

• Magnifier Type: Select the type of magnifier from the list:
  • Basic Zoom (It can change the window of basic zoom only)
  • Tints
  • Inner Zoom
  • Lens Zoom
  • Fade In / Fade Out
  • Easing
  • Mouse wheel Zoom
  • Window Position
  • Custom Design Zoom Window

For the user guide, we have selected the ‘Custom Design Zoom Window’ option. If you select any other type of magnifier, some other fields will appear at your screen according to the selected type.

• Window Width: Enter the width of the window. Width ranges from 100 to 550.
• Window Height: Enter the height of the window. Height also ranges from 100 to 550.
• Allow Tint: Option to Enable/Disable the tint option
• Tint Opacity: Select the opacity of the tint:
• Tint Color: Select the tint color or leave empty for default color (#1e324d)
• Window Position: Select the position of the window:
• Lens Fade In Time: Select the fade-in time of lens:
• Lens Fade Out Time: Select the fade-out time of lens:
• Enable Easing: Option to Enable/Disable the easing effect
• Enable Scroll Zoom: Option to Enable/Disable the scroll zoom

Light Box Settings

• Next Previous Arrow: Option to Enable/Disable the Next & Previous arrows on the light box
• Enable Rotation: Option to Enable/Disable the rotation of the images on the light box
• Transition Effect: Choose the transition effect of the images on the light box:
  • Cross Fade
  • Dissolve
  • Slide
• Transition Duration: Option to add the transition duration of the images on the light box. Time is in milliseconds.
• Navigation Style: Option to Enable/Disable or Select the navigation style:
  • Thumbs
  • Dots
  • Disable

Mobile View Settings

• Magnifier Type: Choose the type of magnifier:

  • Inner Zoom
  • Lens Zoom

If you select the ‘Lens Zoom’ option, then following fields will appear at your screen:

• Lens Type: Choose the type of lens:
  • Round
  • Rectangle
• Lens Size: Choose the size of the lens:
  • 50
  • 75
  • 100
  • 125
  • 150

How To Add/Edit Rules To Enable Image Zoom Option?

At the back end, go to FME EXTENSIONS > Manage Rules. Here you will find a grid will all the previously created rules. Click on the Edit button or click on the Add New Rule button to continue.

Here you will have to provide the following data:

Rule Information > Main

• Title: Enter a title for the new rule
• Priority: Specify the priority of the rule
• Store View: Select the store views on which you want to restrict the image zoom option
• Customer Groups: Select the customer groups on which you want to restrict the image zoom option
• Status: Option to Enable/Disable the rule

Rule Information > Conditions

Conditions (don't add conditions if the rule is applied to all products)

Rule Information > Action

• Zoom Type: Choose the type of zoom:
  • Default
  • Magnifier
  • Light Box

Frontend

Outside Zoom

Lens Zoom

Tint Zoom

Lightbox