Imagemap Component

  1. Showroom Home
  2. Components
  3. Imagemap Component

Purpose

With the new Imagemap component content authors can define up to 5 dots on an image that are connected to articles.

The articles connected to the image will be displayed as a Product Slider either beneath the image (mobile) or on the right side of the image (desktop).

The position of the dots on the image can be defined via coordinates. X corresponds to the percentage horizontal position, y the vertical position of the dot on the image.

Promotion articles must be referenced on a valid promotion day page and article section, otherwise this promotion will not appear. Assortment items, on the other hand, must be referenced on an assortment page.

Please be aware that the page the component gets integrated to needs to be refreshed in order to show the component.

Go directly to

Examples

The following examples show what the component can look like. Depending on the configuration, a component can be displayed in different ways.

Configuration

To create the component, follow the steps below. 

Setting on Image Map component
  • Step 1
    Enter a Headline
  • Step 2
    Enter a Link text
  • Step 3
    Select a link path 
  • Step 4
    Choose an options from the dropdown "open link in" (should the linked page open in new tab/same window)
  • Step 5
    Enter a text (this is optional)
  • Step 6
    Integrate an image 
  • Step 7
    Click on add field in order to configurate the coordinates for wat dot and enter a link path to the corresponding article

Info:

Image Dimension: 4x3 ratio. Save area measurements demonstrated below.

Safe Areas for the Dots

Safe Areas for the Dots
Erinnerung für
Fehler Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.

Sollen wir Sie benachrichtigen wenn der Artikel verfügbar ist?

hh

Tag der Erinnerung
Zwei Tage vorher
Einen Tag vorher
Am Angebotstag
Uhrzeit
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Hinweise
  • line 1
  • line 2
  • ...

Eine Erinnerung ist nicht mehr möglich

Die Erinnerungszeiten für diesem Artikel sind bereits abgelaufen.

Erinnerung aktiv!

hh

Sie erhalten Ihre Erinnerung am ${date} um ${time} Uhr.

hh

Wir senden Ihnen noch eine Nachricht per E-Mail, um ihre E-Mail Adresse zu bestätigen. Bitte klicken Sie auf den Link in der Nachricht.

regions.regionSwitchHeadline

regions.regionSwitchText
regions.regionSwitchTextExplicitSwitch