Product hotspots

Layout, content and available controls for Product hotspots.

Scale Theme · v1.9.3 · 1 min read

Where to find it

Add this section from the theme editor on a supported template.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID: ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Image: Choose an image from your shop. Preview its crop on desktop and mobile.
Media overlay: Enable or disable this option and preview the result.
Overlay colorConditional: Choose a local color when the relevant custom source is enabled.
Overlay styleConditional: Choose the presentation or source that fits this component.Options: Solid · Gradient
Gradient directionConditional: Choose the presentation or source that fits this component.Options: Up · Down
Width: Choose the presentation or source that fits this component.Options: Page · Full
Height: Choose the presentation or source that fits this component.Options: Auto · Small · Medium · Large
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
HeadingConditional: Choose a local color when the relevant custom source is enabled.
Popover textConditional: Choose a local color when the relevant custom source is enabled.
HotspotConditional: Choose a local color when the relevant custom source is enabled.
Hotspot centerConditional: Choose a local color when the relevant custom source is enabled.
Popover borderConditional: Choose a local color when the relevant custom source is enabled.
Popover backgroundConditional: Choose a local color when the relevant custom source is enabled.
Hotspot colorConditional: Choose a local color when the relevant custom source is enabled.
Inner colorConditional: Choose a local color when the relevant custom source is enabled.
Color schemeConditional: Choose an available Shopify color scheme.
Vertical gap: Adjust within the range offered by the theme editor.
Product title typography: Edit presets in [theme settings](/editor?context=theme&category=typography)Options: Default · Paragraph · Heading 4 · Heading 5 · Heading 6
Product price typography: Edit presets in [theme settings](/editor?context=theme&category=typography)Options: Default · Paragraph · Heading 4 · Heading 5 · Heading 6
Top: Adjust within the range offered by the theme editor.
Bottom: Adjust within the range offered by the theme editor.