Appearance
Overlay labels
This guide describes the Theme settings > Overlay labels menu options.
Use the menu options to configure Exhibit's Overlay labels feature. For sections that support overlay labels, the feature displays an overlaid text label when a store visitor places their cursor over a tile on a page, or "tabs" through store content using their keyboard. For guidance with setting up overlay labels inside a section, refer to Overlay labels.
In the previous video, on the left side, the Theme settings > Overlay labels menu is displayed. The menu shows the following two options:
To use the color scheme's accent color (pink) as the background color for overlay labels, the Background color dropdown is set to Scheme accent.
To set a (white) color for overlay label text, the Text color dropdown is set to White.
On the right side of the video, a store's Homepage is displayed in Theme editor. When the cursor is placed over a tile on the Homepage, an Overlay label is displayed. The previous settings for background and text color are applied to the Overlay label.
For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings.
Set up overlay labels
To set how overlay labels are displayed on your store's pages:
Go to Theme settings > Overlay labels.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Background color | Use the Background color dropdown to set a background color for overlay labels. The options are: Transparent (no color), Scheme background, Scheme text, and Scheme accent. Options prefixed with "Scheme" use colors from the color scheme applied to the section that contains the overlay label. |
| Text color | Use the Text color dropdown to set a color for overlay label text. The options are: Scheme text, Scheme accent, Scheme background, White, and Black. Options prefixed with "Scheme" use colors from the color scheme applied to the section that contains the overlay label. |
| Blend mode | Use the Blend mode dropdown to set how the overlay labels' contents blend with the labels' background colors. Refer to Mozilla developer documentation: Mix blend mode. Some combinations of blend modes and label colors might make overlay labels invisible or difficult to see. Apply a suitable background color to overlay labels for high contrast and accessibility purposes. |
| Line height | Adjust the Line height slider to display more or less space between lines of text inside overlay labels. The slider ranges from 0 to 2. Depending on the font, adjustments to the line height may be required to display no gaps between lines of text. |
| Text overlay on hover > Desktop font size scale | Adjust the slider Desktop font size scale to specify a font size for the text that's display inside labels. The slider ranges between -2 and 10. This setting only affects "Text overlay on hover" type labels on desktop display devices. |
| Follow mouse on hover > Desktop font size scale | Adjust the slider Desktop font size scale to specify a font size for the text that's display inside labels. The slider ranges between -2 and 7. This setting only affects "Follow mouse on hover labels" type labels on desktop display devices. |
Note
To use the settings in the previous table, enable the Overlay labels feature for a suitable section. Refer to Enable overlay labels.