Versions Compared

Key

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

...

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: 

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

.

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

Image Added

...

(plus) Enable 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 

...

  • 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

...


Set (plus) 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.

...

Set the hovered image and video manually


 In each product settings Catalog > Products > Edit > Images and Video settingsImage RemovedVideos



Image Added

(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 RemovedImage Added


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

Image Removed



(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

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.

View file
namefront end.mp4
height250



Multiple image zoom effects on product pages.

Image Added

View file
namegiphy 2.

...

webp
height250

View file
namegiphy 3.webp
height250

View file
namegiphy 4.webp
height250

Image Removed

Not hovered

Image Removed

Hovered

...



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

...