This guide describes how to set up the Overlay labels feature.
The previous image shows an example Overlay label on a store page.
Exhibit's theme sections and page templates include an Overlay labels feature. The feature displays when a store visitor places their cursor over a tile on a page or "tabs" through store content using their keyboard.
Exhibit's theme sections and pages provide two types of overlay labels:
The following sections include the Overlay labels feature:
Overlay labels are also supported in the following page templates:
To enable overlay labels:
In Theme editor, select a section that supports overlay labels.
Refer to Sections that support overlay labels.
In the section menu, set the Display dropdown to Text overlay on hover or Follow mouse on hover.
Complete the following steps to set up default styles for overlay labels and customize their appearance.
In Theme editor, select Theme settings > Overlay labels.
Select a setting described in the following table.
Some combinations of blend modes and label colors might make overlay labels invisible or difficult to see.
We recommended using a suitable background color for overlay labels for high contrast and accessibility purposes.
The following images show examples of the overlay labels feature. A list of the Theme settings used to create each example is provided with each image.
Background color set to White.
Text color set to Black.
Line height adjusted so that no gaps appear between lines.
Background color set to (color) Scheme accent.
Text color set to White.
Blend mode set to Screen.