Giter Club home page Giter Club logo

magento-2-product-zoom's Introduction

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

magento-2-product-zoom's People

Contributors

annadoann avatar davidduong90 avatar magiccart avatar zoe-997 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

magento-2-product-zoom's Issues

Magepow product zoom - unable to access sub menu

Issue: In PDP page , We are unable to access sub menu(s) due to product zoom feature. Issue can be reproducible in mentioned demo site too.

Steps to reproduce:

  1. Navigate to PDP page
  2. Try to access sub Menu(s) which lies over Product image

Expected behaviour: Sub menu should be accessible.

Ref: https://nimb.ws/BjAhvi

Note: We tried to fix reported issue with similar issue reported in stackexchange, it didn't help for the reported issue.

Magepow product zoom not working in magento 2.3.3

Hello team..
I have installed magepow extension for my website myflowersbox.com and it is enabled from admin panel but still product zoom is not working..

Kindly look into this matter immediately..your support will be very helpful..

Thank you..

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.