> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/storytelling/scrolling-hotspots.md).
# Scrolling hotspots
One large image with pins on it. Each pin is tied to a content panel, and the panels move alongside the image as the visitor scrolls. Good for flatlays, room scenes, or model shots where several details each need their own note.
{% hint style="success" %}
**Image tip:** The hotspot image fills about half to two-thirds of the page width on desktop. Upload a large, sharp image so the small pins stay crisp.
{% endhint %}
***
## Settings
### Image
| Setting | Description |
| -------------- | ---------------------------------------------------------- |
| Image | The main photo the pins sit on. |
| Image width | Proportion of the section taken up by the image. |
| Image position | Show the image on the left or right of the content panels. |
### Gap
| Setting | Description |
| ------- | ---------------------------------------------------------- |
| Desktop | Space between the image and the content panels on desktop. |
| Mobile | Space between the image and the content panels on mobile. |
### Content
| Setting | Description |
| ---------------- | ------------------------------------------ |
| Max width | Maximum width of each content panel. |
| Content position | Horizontal position of the content panels. |
| Alignment | Text alignment within the content panels. |
### Background
| Setting | Description |
| -------------- | --------------------------------------------------- |
| Media | Add a background image or video for the section. |
| Video | A Shopify-hosted background video. Autoplays muted. |
| Image | Background image. |
| Image (mobile) | Separate background image for mobile. |
| Overlay | Adds a color layer over the background media. |
| Overlay color | Color and opacity of the overlay. |
### Color
| Setting | Description |
| ------------ | ----------------------- |
| Color scheme | Colors for the section. |
### Mobile padding
| Setting | Description |
| --------------- | ---------------------------------- |
| Top (mobile) | Space above the section on mobile. |
| Bottom (mobile) | Space below the section on mobile. |
***
## Available Blocks
### Header
An optional heading area above the image. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md).
### Hotspot
A pin plus the content panel it points to. Add one per detail you want to call out.
#### Hotspot Settings
| Setting | Description |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Show hotspot on image | Shows the pin on the image. Turn it off to keep the panel in the scroll sequence without marking a point on the photo. |
| Horizontal | Pin position across the image. |
| Vertical | Pin position down the image. |
| Gap | Space between the blocks inside the panel, set for desktop and mobile. |
| Border thickness | Width of the border around the panel. |
| Corner radius | Roundness of the panel's corners. Choose Custom to set an exact value. |
| Shadow | Drop shadow depth. |
| Type | Let the panel inherit the section's colors, or give it its own color scheme. |
| Color scheme | Colors for the panel. Shown when Type is Color scheme. |
| Padding | Inner space around the panel content, with optional separate mobile values. |
#### Hotspot Blocks
| Block | Description |
| ----------------------------------------------------- | -------------------------------------------------- |
| [Heading](/helix/theme-blocks/basic/heading.md) | Main headline. |
| [Subheading](/helix/theme-blocks/basic/subheading.md) | Small label above or below the heading. |
| [Text](/helix/theme-blocks/basic/text.md) | Rich-text paragraph for supporting copy. |
| [Button](/helix/theme-blocks/basic/button.md) | Single call-to-action with label, link, and style. |
| [Icon](/helix/theme-blocks/basic/icon.md) | An icon from the theme library. |
| [Image](/helix/theme-blocks/basic/image.md) | Inline image within the panel. |
| [Colors](/helix/theme-blocks/basic/colors.md) | A row of color swatches. |
{% hint style="info" %}
**Tip:** Place each pin directly on the detail it labels — the stitching, the buckle, the sole — rather than in the empty space beside it. To include a panel without adding a pin, turn **Show hotspot on image** off for that block.
{% endhint %}
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}