The hotspot module functions as an overlay for an illustration or image. It can be used to provide information about a product or an application, additional explanations for illustrations or to present customers with product details and purchasing options.
There are three types of hotspot modules as shown below:
- Informative hotspot
- Commerce hotspot
- Non-commerce hotspot
Of the 3 types, the informative hotspot is the only variant that is editable.
A. Visual ─ optional
B. Headline ─ mandatory
Max 2 lines of text.
C. Body copy ─ optional
Keep it as short as possible.
D. CTA ─ optional
Colorways
A. Label headline─ mandatory
Keep the label headline short and consistent with the headline shown in the pop-up.
The Commerce hotspot is meant for use on purchasable products such as equipment and will generally link directly to a PDP.
NOTE: Hotspot layout is not editable ─ Product data for the commerce and non commerce is fed by PIM/PDH
The Non commerce hotspot is used for non purchasable products such as adhesives (as of 2023). The link on this hotspot will lead either to a PDP or to a form (eg. request a consultation), depending on the copy in the hotspot.
NOTE: Hotspot layout is not editable ─ Product data for the commerce and non commerce is fed by PIM/PDH
The hotspot buttons can be placed on the illustration or image at the editors discretion - however if the buttons are placed too close together they can end up overlapping on mobile screens. This can make it difficult for users to click the right button.
We recommend testing the button placement on mobile screens before publishing.
- Provide information about a product or an application (informative hotspot)
- Show additional explanations for illustrations (informative hotspot)
- Present customers with product details and purchasing options (commerce and non-commerce hotspots).
Hotspots should not be used for long-form, paragraphic text - or for high priority promotional content that you would want everyone to see. Instead, consider using the Tabbed content + text or Full width image + text modules for these purposes.
Examples of use
DO: Keep information within hotspot short and concise.
DON’T: Use hotspots for long-form, paragraphic text.
DON’T: Use too many hotspots bottons on single image.
DON’T: Use the hotspot button on a very small detail on the image. The hotspot button could cover the detail we wan’t to show.