Product Feature Callout
A product image with callouts that point to its features. Each has a title, description, and position on the image.
How to add it
Edit a page, open the module picker, and search for Product Feature Callout. Drop it into a drag-and-drop area, then fill in the fields below. See the theme modules page for how the modules look together.
Fields
Fields are grouped as they appear in the editor. Indented rows belong to the group above them.
| Field | Type | Notes |
|---|---|---|
| Style | Group | |
| Marker Type | Dropdown | Options: Alpha Lowercase, Alpha Uppercase, Numerical, Roman Lowercase, Roman Uppercase. Default: alpha_upper. |
| Marker Text | Font | On hover the text color will be white. |
| Marker Background Color | Color | |
| Marker Pulse Animation | Dropdown | Options: None, Pulse 2 Times, Pulse 3, Pulse 5, Infinite. Default: infinite. |
| Image Border | Border | |
| Caption Title Font | Font | |
| Desktop Caption Background Color | Color | |
| Tooltip Background Color | Color | |
| Product Image | Image | Recommended size is 900 x 500 pixels |
| Mobile - Hide Captions on Load | Toggle | If you have a long list of callouts you may want to have this checked to prevent a long scrolling section on mobile devices. Default: off. |
| Desktop - Callout Layout | Dropdown | Choose where the callouts should display on desktop. Options: Below Image, Right of Image, Left of Image. Default: layout-below. |
| Desktop - Show the First Callout | Toggle | Check this if you want to display the first callout when the page loads. Default: on. |
| Desktop - Show Title Tooltip on Hover | Toggle | Default: on. |
| Callouts | Group | Repeatable. |
| Title | Text | Default: Title. |
| Description Text | Rich text | |
| Image | Image | Recommended size is 100 x 100 |
| XY Coordinates | Text | Default: 30,40. |