Versions Compared

Key

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

...

Updated: 31/01/2019 | By: Magenest | Support Portal: http://servicedesk.izysync.com/servicedesk/customer/portal/148


Table of Contents


...

Image Modified

Introduction

...

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

Image Modified

...

(plus) Enable zoom effects on product page

...

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

Image Modified

...

 

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

...

  • 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 Modified

...


(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.

Image Modified

...

Set the hovered image and video manually

...

Catalog > Products > Edit > Images and Videos



Image Modified

(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

Image Modified


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

...

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

Image Modified




(tick) Click on Save to save the configuration.

...

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.


View filenamefront end.mp4height250Image Added



Multiple image zoom effects on product pages.

Zoom in/out on product image hovering


Basic zoom

Image Added


Tints

Image Added


Lens zoom

Image Added

Mousewheel zoom


Image Added

Inner zoom

Image AddedImage Removed






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

...