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
Desktop
Mobile
Desktop
Mobile
Desktop
Mobile
Of the 3 types the informative hotspot is the only variant that is editable. Product data for the commerce and non commerce is fed by PIM/PDH. The layout options for the informative hotspot is shown below.
Layout options
The informative hotspot can consist of the following elements:
- Headline*
- Body copy - (Optional)
- Image (Optional)
- Source (Optional)
- CTA (Optional)
* required element
Headline
Character limit: 55
Do not exceed two lines of text on 360px screens
Paragraph
Character limit: 240
For general copywriting guidelines, please refer to the Writing rules.
Image
Images should not exceed the following dimensions
Height: 120px
Width: 200px
Button placement
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.
Colorways
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 (informative hotspot)
- Show additional explanations for illustrations (informative hotspot)
- Present customers with product details and purchasing options (commerce and non-commerce hotspots).
Commerce hotspot
The Commerce hotspot is meant for use on purchasable products such as equipment and will generally link directly to a PDP.
Non commerce hotspot
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.
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: Use maximum advised character limit and correct text styling. Read more about typography.
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 buctton could cover the detail we wan’t to show.