# Image with hotspots

> An image with dots that open small cards with a title, text and an optional product. Use it to explain the details of a product, a room or a process.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/image-with-hotspots/

## At a glance

- **In the editor:** Image with hotspots
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Home page
- **Settings:** 24
- **Blocks:** Hotspot
- **App blocks:** Yes

## When to use it

Hotspots answer questions a photo raises: *What is the handle made of? Which lamp is that?* The Tally home page shows the section as *A closer look*.

## Set it up

1. Upload the **Image**.
2. Add a **Hotspot** block for each detail and move its dot with **Position from the left** and **Position from the top**.
3. Write the card: a **Title**, a **Text** and an optional **Link**. Pick a **Product** to show its photo, title and price – the title then defaults to the product's.

## Phones

On phones, cards open across the bottom of the image instead of next to the dot, so they never cover what they describe. Add a **Mobile image** – a tighter crop, for example – and every hotspot gets its own **Position from the left on mobile** and **from the top on mobile**.

## Dots

- **Dot:** a *Plus*, a *Number* or a plain *Dot*, in a size from 20 to 48 px.
- **Dot color** and **Dot icon color:** leave them empty to use the button colors of the color scheme.
- **Pulse to draw attention:** a soft pulse around the dots.
- **Open cards:** *On click*, or *On hover* with a mouse. Phones always open them with a tap.

## Image

**Shape:** *Like the image* keeps every dot exactly where you placed it. *Wide*, *Landscape*, *Square* and *Portrait* crop the image, which can move dots near the edges – check them after changing the shape. **Width:** within the page, or full width.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Image with hotspots** (24 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | Sample text |
| **Heading size** | Large · Medium · Small | Medium |
| **Heading alignment** | Left · Center | Left |

*Image*

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Mobile image** – Optional. Each hotspot then gets its own position on mobile | Image | – |
| **Shape** – Like the image keeps every dot exactly where you placed it | Like the image · Wide · Landscape · Square · Portrait | Like the image |
| **Width** | Page · Full width | Page |

*Hotspots*

| Setting | Options | Default |
| --- | --- | --- |
| **Dot** | Plus · Number · Dot | Plus |
| **Dot size** | 20–48px (step 2) | 36px |
| **Dot color** – Empty uses the button color | Color | – |
| **Dot icon color** – Empty uses the button text color | Color | – |
| **Pulse to draw attention** | Checkbox | On |
| **Open cards** – Phones always open them with a tap | On click · On hover | On click |
| **Card color scheme** | Color scheme | Scheme 1 |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 64px |
| **Bottom padding** | 0–160px (step 4) | 64px |
| **Top padding on mobile** | 0–120px (step 4) | 40px |
| **Bottom padding on mobile** | 0–120px (step 4) | 40px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Hotspot** (9 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Position from the left** | 0–100% (step 1) | 50% |
| **Position from the top** | 0–100% (step 1) | 50% |
| **Position from the left on mobile** | 0–100% (step 1) | 50% |
| **Position from the top on mobile** | 0–100% (step 1) | 50% |

*Card*

| Setting | Options | Default |
| --- | --- | --- |
| **Product** – Optional. Shows its photo, title and price and links to it | Product | – |
| **Title** – Empty uses the product title | Text | Sample text |
| **Text** | Rich text | Sample text |
| **Link label** – Empty with a product shows View full details | Text | – |
| **Link** | Link | – |

## Related

- [Shop the look](https://themelab.page/tally/docs/sections/shop-the-look.md): A styled photo with dots on each product and a product list beside it, with one button to add everything to the cart.
- [Image with text](https://themelab.page/tally/docs/sections/image-with-text.md): A photo beside text built from blocks – label, heading, text, list, stats and buttons – plain or on an overlapping card.
- [Before and after](https://themelab.page/tally/docs/sections/before-and-after.md): Two photos with a handle shoppers drag to compare them – for cleaning, restoration, skincare and makeovers.