HOTSPOT

Enrich illustrations and images with product details, applications info and purchasing options (CTA).

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.

Hotspot module

There are three types of hotspot modules as shown below:

  1. Informative hotspot
  2. Commerce hotspot
  3. Non-commerce hotspot

Informative hotspot

Desktop

Mobile

Commerce hotspot

Desktop

Mobile

Non commerce hotspot

Desktop

Mobile

Design specs

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

When to use

The hotspot module functions as an overlay for an illustration or image. It can be used to:

  1. Provide information about a product or an application (informative hotspot)
  2. Show additional explanations for illustrations (informative hotspot)
  3. 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's and Don'ts

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.