Skip to content

magepow/magento-2-product-zoom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Magento 2 Product image zoom extension

You are selling products on Magento online stores, Magento 2 Product zoom extension will help customers see your products in the clearest and most detailed way.

Description

When shopping in an online store, the problem that hinders the customer's shopping process is not being able to view product details directly. Understanding this, Magepow developed the Magento 2 Product zoom extension.

This extension allows customers to enlarge product images to see details that they cannot see at normal resolution. 3 zoom types you can use are Window zoom, Inner zoom, and Lens zoom.

  • Window zoom: Positioning the window can be done by setting a default position and then using x and y offset to adjust. You can also position the window into a container. The administrator can customize the size of the Zoom window (width, height) and zoom window offset (x-axis, y-axis) in the admin panel.

Window zoom

  • Inner Zoom: the zoom can be placed inside of the image

Inner Zoom

  • Lens zoom: You can use the lens zoom setting to "Magnify the image". The image to the least has been constrained so it tucks underneath the image.

Lens zoom

Latest Stable Version Total Downloads Daily Downloads

Magento 2 Product zoom features

  • Use 3 Zoom type to suit your product

  • Product image zoom hover: hover over your product image, scroll forward to enlarge product details, scroll back down to reduce zoom.

  • Smooth zooming with Easing effect and FadeIn & FadeOut Speed.

  • Choose Cursor: Options are default, cursor, crosshair

  • Support responsive

  • Image Cross Fade

  • Customize Boder

  • Customize Tints

Pro version with outstanding features

Features Free Version Pro Version
Inner zoom
Window zoom X
Lens zoom X

How to download and install Magento 2 Product Zoom

Download Magento 2 Product Zoom

Install according to the instructions for use.

Magento 2 Product Zoom user guide

General Configuration

Enable Magento 2 Product Zoom

Go to Admin Panel > Stores > Settings > Configuration > Magepow > Product Zoom Select Yes to enable module.

enable-module-img

Setting Magento 2 Product Zoom

Go to Admin Panel > Stores > Settings > Configuration > Magepow > Product Zoom

  • Zoom Type: Choose 1 of 3 types of Window, Inner or Lens.
If you choose the Window you will need to setting:
  • Zoom Window Position: Positioning the window can be done in by setting a default position, and then using x and y offset to adjust.
  • zoom window offetx: x-axis offset of the zoom window.
  • zoom window offety: y-axis offset of the zoom window.
  • z-index window zoom
  • Zoom window width: Width of the zoom Window.
  • Zoom window height: Height of the zoom Window.

Window

  • Zoom Window FadeIn: You can fade in on the Window.
  • Zoom Window FadeOut: You can fade out on the Window.
  • Lens Shape and Window Shape: Shape of the lens or window.
  • Lens Colour and window Colour: Colour of the lens or window background.
  • Tint: You can easily set tints for the zoom.
  • Tint Colour: you can set the colour of the tint overlay to be any value.
  • Tint Opacity: you can set the opacity of the tint overlay to be any value.
  • Cursor: Change pointer shape with 3 styles as default, pointer or cross.
  • Responsive: Set to true to activate responsivenes. If you have a theme which changes size, or tablets which change orientation this is needed to be on.
  • Image Cross Fade: Set to true to activate simultaneous crossfade of images on gallery change.
  • Border Size: Border Size of the Zoom Box
  • Border Colour: Border Colour of the Zoom Box
  • Easing: You can use the default easing or a custom easing setting. The amount of easing can also be altered - default is 12, set higher for more, lower for less

Window

If you choose the Inner you will need to setting:
  • Cursor
  • Responsive
  • Image Cross Fade
  • Easing

Inner

If you choose the Lens you will need to setting:
  • Lens Size: The size of the lens.
  • Lens FadeIn: You can fade in on the Lens.
  • Lens FadeOut: You can fade in out the Lens.
  • Zoom Lens: set to false to hide the Lens.
  • Lens Border: Width in pixels of the lens border.
  • Lens Shape and Window Shape
  • Contain Lens Zoom: This makes sure the lens does not fall outside the outside of the image.
  • Lens Colour and window Colour

Lens

  • Lens Opacity
  • Tint
  • Tint Colour
  • Tint Opacity
  • Responsive
  • Image Cross Fade
  • Border Size
  • Border Colour
  • Easing

Lens

This Is Result In Frontend

config-module-img

Our Magento 2 Extensions

Our Magento 2 services

Our Magento 2 Themes

Our Shopify Themes

Our Shopify App

Our WordPress Theme