Hot spots

An image annotated with positioned dots. Each dot opens either a product card or a content popover — two block types for two modes.

Section settings

• Subheading / Heading — Section header, with Heading display size (none–xl).
• Image — The annotated image.
• Image aspect ratio — adapt, square, portrait, landscape.
• Hotspot color — The dot color. Default black.
• Padding top / bottom, Color scheme.

Blocks

• Product hotspot — Horizontal/vertical position (0–100) plus a product. Opens a product card.
• Content hotspot — Position plus heading, text, image, link, link label. Opens a content popover.

Example use cases

• Build annotation. Content hotspots on a deck detail shot — ply count, press notes, ink — material storytelling without product links.
• Kit shot. Product hotspots on a packed-out photo, each dot opening the item worn or carried.

Notes

• Position values are percentages of the image, so dots hold their spots across breakpoints.
• For a product-only treatment with a persistent product panel beside the image, use Shop the look instead.