> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/media/image-with-hotspots.md). # Image with Hotspots Turn one lifestyle photo into a shoppable scene — pin product and text hotspots anywhere on the image and let visitors buy from the picture. You have the photograph that sells the whole room, the whole outfit, the whole setup — and underneath it, a list of product cards nobody connects to it. **Image with Hotspots** closes that gap: pin markers directly onto the picture, and the visitor buys from inside the scene they fell for.
{% hint style="info" %} **At a glance** | Where to find it | **Add section → Media** | | ---------------- | ----------------------------------------------------------------- | | Blocks | Product hotspot and Text hotspot — no limit on either | | Positioning | Percentage sliders, 5–95, with separate desktop and mobile values | | Allowed on | Any template | | Typical use | Shop-the-look, room scenes, feature callouts | | {% endhint %} | | *** ### How to add {% stepper %} {% step %} ### Add the section Click **Add section** and pick **Image with hotspots** from the **Media** group. {% endstep %} {% step %} ### Upload the scene One image carries the whole section, so choose one with breathing room around each product — a tightly packed flat-lay leaves nowhere to put a marker. {% endstep %} {% step %} ### Add a hotspot A **Product hotspot** links to a product; a **Text hotspot** just says something. Add as many as the image can carry. {% endstep %} {% step %} ### Position it with the sliders There's no dragging on the preview: each hotspot has **Vertical position** and **Horizontal position** sliders running from 5 to 95 percent. Move them and watch the marker travel. {% endstep %} {% step %} ### Set the mobile position Each hotspot also has mobile vertical and horizontal sliders, defaulting to 30 / 30. They only take effect under one condition — see the warning below. {% endstep %} {% endstepper %} {% hint style="warning" %} **Mobile hotspot positions only apply when a mobile image is set.** Without one, the section reuses the desktop coordinates on every screen — so adjusting the mobile sliders appears to do nothing. If your markers drift off their products on a phone, upload a **Mobile image** first; the mobile positions start working the moment you do. {% endhint %} {% hint style="success" icon="lightbulb" %} ### Good to know * **Hotspots are never hidden on mobile.** Every marker you place shows up on a phone too. Six hotspots that look elegant at desktop width can cover half a small screen — this is the main reason to keep the count down. * **The sliders stop at 5 and 95.** You can't pin a marker to the very edge of the image, which is deliberate: an edge hotspot would have nowhere to open its card. * **Quick view or product page, your choice.** **Open product in 'Quick view'** decides whether a product hotspot opens the quick-view popup or sends the visitor to the product page. Quick view keeps them in the scene; the product page gives them the full description. * **Text hotspots aren't a lesser version.** Use them for details that aren't products — the material, the finish, the year, the technique. They turn a photo into a caption-free explainer. * **The section takes the usual content blocks too**, so a heading and a line of copy can sit with the image without a separate section above it. {% endhint %} ### Customization ideas
Shop the look One styled outfit, three or four product hotspots. The single highest-intent use of the section: the visitor already likes the combination, so make every piece of it buyable.
Shop the room An interior shot with hotspots on the lamp, the chair, the rug. Furniture and homeware stores get more from this section than anyone else.
Feature callouts A single product photographed large, with **Text hotspots** marking the stitching, the zip, the lining. A spec list people actually read.
Bundle builder A flat-lay of a set — the kit, the refill, the case — with a hotspot on each. Sells the bundle without needing bundle software.
*** ### Settings reference
Section settings | Setting | What it does | | ---------------------------- | -------------------------------------------------------------------------------------- | | Image | The scene the hotspots sit on. | | Mobile image | A separate crop for small screens. **Required for mobile hotspot positions to apply.** | | Open product in 'Quick view' | Product hotspots open the quick-view popup instead of linking to the product page. | **Section layout, Color and Spacing** — the standard Volume groups.
Block reference **Product hotspot** — a marker tied to a product. | Setting | What it does | | -------------------------------------------- | ----------------------------------------------------------------------------------------- | | Product | The product the marker opens. | | Vertical position / Horizontal position | Desktop placement, 5–95%. | | Mobile vertical / Mobile horizontal position | Placement on small screens, 5–95%, default 30 / 30. Only used when a mobile image is set. | **Text hotspot** — a marker that shows text instead of a product, with the same four position sliders. **Content blocks** — the usual Volume set around the image.
### Best practices * **Three to five hotspots.** Enough to feel rich, few enough to stay readable — and remember they all survive to mobile. * **Shoot the photo for the hotspots.** Leaving space around each product at the shoot is far easier than fighting a crowded frame in the editor. * **Place markers beside products, not on top of them.** A marker covering the thing it sells defeats the purpose. * **Check every hotspot on a real phone.** The sliders are percentages of a different crop; what lines up at 1440 px rarely lines up at 390 px. ## Related * [Media with Text](/docs/volume-themes/sections/media/media-with-text.md) — when the explaining needs sentences, not markers * [Image Slideshow & Stories Slideshow](/docs/volume-themes/sections/media/image-slideshow-and-stories-slideshow.md) — another shoppable-image format * [Image Comparison](/docs/volume-themes/sections/media/image-comparison.md) — for showing a difference rather than pointing at details --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/volume-themes/sections/media/image-with-hotspots.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.