Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Thank you for purchasing our extension. If you have any questions that are beyond the scope of this document, do not hesitate to leave us an email via [email protected]

Updated: 3127/0110/2019 2020 | By: Magenest | Support Portal: http://servicedesk.izysync.com/servicedesk/customer/portal/148


Table of Contents


...

Image Modified

Introduction

...

  • Apply hovering for product images on Home Page and Category page.
  • Display another image without navigating to the product detail page
  • Set hover image in two ways: automatic and manual.
  • 6 hover animations and 5 easing functions
  • Zoom in/out on product image hoveringon the product page
  • Display video on hover

System Requirements

...

First, you have to enable the extension in Stores > Configuration > Magenest > Product Image Swap.

Enable Module: Choose Yes to enable Catalog Image Hovering.

Image Removed

Default hovered Image: 

(tick) Automatically set the second product image as a hovered catalog image.

Image Added

...

(plus) Enable zoom effects on product page

Enable module: Choose yes to enable Change Product Image on Hover extension

Animation starts when hovering over: 

  • Product Image: show animation when hovering the product image

  • Product Container: show animation when the mouse is moved to the product container

  • Yes: The first image in the product’s gallery, except from product’s image, will be set as the hovered image.

  • No: Choose No to set the hover image manually.

Enable zoom effects on the product page

...

: Choose Yes to enable zoom effects

Default zoom effect: How Store admins can decide how product image can be zoomed in/out with 5 special effects:

  • Basic zoom
  • Tint zoom
  • Lens zoom
  • Mousewheel zoom
  • Inner zoom

Image Modified

...

 

(plus) Set up Animation: 6 types of hover animation 

  • No animation

  • Fade into

  • Transition Left To Right

  • Transition Right To Left

  • Transition Bottom To Top

  • Transition Top To Bottom

...

The animation starts when hovering over 

  • Product Image: show another image when hovering the product image

  • Product Wrapper: setting hovered image to shows up when mouse is moved to the product container

Image Removed

Image Added

...


(plus) Set Set up product video hovering

Assign a hovered role for videosvideo. Our extension provides you with options to replay video after it ends or to continue playing on the next hover action.

Enable video hovering: Choose Yes to enable video hovering

Media Priority: Choose Video to set video as a priority

Continue to play video on the next hover: Choose Yes to play video on the next hover, if you choose No, the video will play from the beginning

Enable video looping: Choose Yes to set video replay after it ends


Image Modified


(star) Storefront when you choose Yes to continue to play video on the next hover.


Image Added

(star) When you enable video looping

Image Added



...

Set the hovered image and video manually


 In each product settings Catalog > Products > Edit > Images and Video settingsVideos



Image Added

(plus) Set up product image hovering

Image AddedImage Removed


  • Upload images for product

  • Browse to each image to set the role for them

  • Set “Hovered” role for hover image

...

  • to specify the next image to display on hover.

(warning) Note: Each role belongs to only one image in product’s gallery

Image Removed

 Note:

  • Admin can set the hovered role for only one image in the product image list.
  • An image can not be set as the hovered role and small image at the same time.


Image Added

(plus) Set up a product video

Catalog > Products > Edit > Images and Videos

Image Added

Add video

  • Upload video for product 
  • Url: Video link from YouTube or Vimeo. 
  • Title: Title of the product video

Image Added




(tick) Click Click on Save to save the configuration.

...

On Magento 2 storefront, when customers hover on the product, it will switch to other another image or video, which gives customers a better view of the product without navigating to the product page.

Image Removed

Not hovered

Image Removed

Hovered

...


Image Added



Multiple image zoom effects on product pages:


Basic zoom

Image Added



Tints

Image Added


Mousewheel zoom

Image Added


 Lens zoom

Image Added


Inner zoom

Image Added


(warning) Note: Hover effect is not available in the following cases: 


  • Product The product image/ video has not been uploaded.

  • No image/video is set small role.

  • Hover The hover image/video has not been set. 


Update

  • When a new update is available, we will provide you with a new package containing our updated extension.
  • You will have to delete the module directory and repeat the installing installation steps above.
  • Flush the config cache. Your store and newly installed module should be working as expected.

...

  • We will reply to support requests within 2 business days.
  • We will offer lifetime free update and 6 months of free support for all of our paid products. Support includes answering questions related to our products, bug/error fixing to make sure our products fit well in your site exactly like our demo.
  • Support DOES NOT include other services such as customizing our products, installation, and uninstallation service.

...