You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 23 Next »

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: 31/01/2019 | By: Magenest | Support Portal: http://servicedesk.izysync.com/servicedesk/customer/portal/148




Introduction

Magento 2 Change Product Image On Hover allows customers to view another image or video of your product just by hovering over a product from the Catalog Pages.

Highlight Features

  • 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 hovering
  • Display video on hover

System Requirements

 Your store should be running on Magento 2 version 2.1.x.; 2.2.x; 2.3.x



Configuration

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

Enable Module: Choose Yes to enable Catalog Image Hovering.

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


(plus) Enable zoom effects on product page

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


 

(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

Duration: the length of time that animation takes to complete one cycle. 

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



(plus) Set up product video hovering

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


Set the hovered image and video manually


Catalog > Products > Edit > Images and Videos




(plus) Set up product image hovering


  • Upload images for product

  • Browse to each image to set the role for them

  • Set “Hovered” role for hover image


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



(plus) Set up product video hovering

Add video

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





(tick) Click on Save to save the configuration.

 


Storefront Function

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




Multiple image zoom effects on product pages.

Zoom in/out on product image hovering


Basic zoom


Tints


Lens zoom

Mousewheel zoom


Inner zoom






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

  • The product image/ video has not been uploaded.

  • No image/video is set small role.

  • 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 steps above.
  • Flush the config cache. Your store and newly installed module should be working as expected.



Support

  • We will reply to support requests within 2 business days.
  • We will offer lifetime free update and 6 months 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.



Once again, thank you for purchasing our extension. If you have any questions relating to this extension, please do not hesitate to contact us for support.

  • No labels