Hotspots with Quickview
for Magento 2

This is a combination of two extensions: quickview and hotspots widget. Hotspot widget allows to add hotspots to any location where widgets are allowed and then open any content in a quickview modal.

 
hotspots & quickview

Basic Example

Below you can check a couple of hotspots with tooltips. Content of tooltips comes from a cms block. Simple product is opened in a quickview modal when you click on hotspot.

Ultra-Light Weight
and Durable
Wheel
Capstone 26 inch Alloy Front Wheel
Carbon Fiber-Toray, A3k Matte, 1630g±30g/pair excluding skewers
 

Mobile Ready

Both hotspots and quickview are responsive. On example above image is replaced with a smaller version on mobile and so hotspots are minimized and have different positions on small screen size. Quickview width adapts to screen size and product content inside of it is shown in one column.

 

More Examples

You can check more example of how hotspots and quickview can look on mobile on Athlete 2 Theme demos:

Demo 1 Demo 2 Demo 3

 
for any needs

Hotspot click action

You can open product in quickview modal, custom content in modal, set custom link to open a page on modal click. Or disable action at all and simply show hotspot with a tooltip.

1

You can add “info” hotspots with short details about product.

No action on click, tooltip only.

2

You can add “info” hotspots with short details about product.

No action on click, tooltip only.

Modal
Click to open Custom content in a Modal
Click to open external link
$56
Click to open product in a quickview
 
not only products!

Modal With Custom Content

In case you've skipped previous example. You can not only open products in quickview modals but also set cms block as a source for hotspot modal.

Click to open Quickview Modal with custom content
 
make it fit to any design

Customize each Hotspot

Shape, color, text and other hotspot and tooltip appearance settings.

Custom icon in hotspots - you can set any image as hotspots icon, including svg.

Add any content in hotspot tooltip

$49
snow sport helmet
$150.00565.00

iPhone 13 Silicone Case with MagSafe

$49 or $4.08/mo.per month for 12 mo.*

AirPods
(3rd generation)

$179.00

Ultra-Light Weight
and Durable
YOU CAN SET ANY IMAGE AS A HOTSPOT, INCLUDING SVG
Capstone 26 inch Alloy Front Wheel
Carbon Fiber-Toray, A3k Matte, 1630g±30g/pair excluding skewers
Capstone 26 inch Alloy Front Wheel
Carbon Fiber-Toray, A3k Matte, 1630g±30g/pair excluding skewers

AirPods
(3rd generation)

$179.00

$56

iPhone 13 Silicone Case with MagSafe

$49 or $4.08/mo.per month for 12 mo.*

iPhone 13 Silicone Case with MagSafe

$49 or $4.08/mo.per month for 12 mo.*

Bag - $45

AirPods
(3rd generation)

$179.00

Hotspot
Capstone 26 inch Alloy Front Wheel
Carbon Fiber-Toray, A3k Matte, 1630g±30g/pair excluding skewers
$56

iPhone 13 Silicone Case with MagSafe

$49 or $4.08/mo.per month for 12 mo.*

Ultra-Light Weight
and Durable
 

Various Products

Examples of a various Magento product types in a quickview modal.

Simple
Example of a simple product in a quickview
Bundle
Example of a bundle product in a quickview
Configurable
Example of a configurable product in a quickview
Grouped
Example of a grouped product in a quickview
 
show / hide blocks

Product Quickview content options

You can control what product blocks to show in quickview modal:

Enable/disable tabs, related upsell, reviews, sku, etc.

Change Modal width, padding for each block, background color, etc.

Switch store view to see wider modal example:

Default Modal v2