> 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/products/shoppable-media-slider-and-product-hotspots.md).
# Shoppable Media Slider & Product Hotspots
Interactive, clickable image and video sections — a shoppable slider, or hotspots on a photo.
Turn a single image or a slider into something shoppers can click into — a scrollable carousel where each slide sells a product directly, or pinned hotspots on a photo.
* **Shoppable Media Slider** — a carousel where each slide links to a product or tells part of a story.
* **Product Hotspots** — one image with clickable pins layered on top, each linking to a product.
***
### Shoppable Media Slider
A carousel where each slide is either a **Product** block (product + optional custom media override) or a **Text** block (media + numeric badge + title + rich text).
#### How to add
1. In Theme Editor, click **Add section**.
2. Select **Shoppable Media Slider**.
3. Add Product and/or Text blocks to build the slides.
#### Good to know
* This is the one video section in the theme where pause and mute controls default to **on** — everywhere else (Video Banner, Product with Text, Featured Collection with Media) they default off.
* The default 9:16 ratio is built for portrait/mobile-style video content, not wide banner footage.
#### Customization ideas
* Mix Product and Text blocks in one slider to tell a short story — a Text block setting up a use case, followed by the Product blocks that solve it.
#### Settings
Settings
| Setting | What it does |
| -------------------------- | -------------------------------------------------------------------------------------------------------- |
| Product blocks | Product + optional custom image/video override |
| Text blocks | Media + numeric badge + title + rich text — for a non-product slide (a step, a stat, a callout) |
| Media ratio | **Defaults to 9:16** — portrait, mobile-first |
| Enable pause / Enable mute | **Both default to on** — the opposite of most other video sections in the theme, which default these off |
***
### Product Hotspots
One image (with separate desktop/mobile versions) with clickable pins layered on top, each linking to a product.
#### How to add
1. In Theme Editor, click **Add section**.
2. Select **Product Hotspots**.
3. Upload desktop and mobile images, then add up to 8 hotspot blocks.
#### Good to know
* Hotspot position is set independently for desktop and mobile per block — a pin placed well on desktop can land somewhere odd on mobile if you don't check both.
* Maximum 8 hotspot blocks per section.
#### Customization ideas
* Use a lifestyle or outfit photo with 3–5 hotspots as a "shop the look" section instead of a plain product grid.
#### Settings
Settings
| Setting | What it does |
| ---------------------------- | --------------------------------------------------------------------------------------- |
| Desktop image / Mobile image | Separate images per device |
| Product Hotspot blocks | Up to 8 — each with independent desktop and mobile position (5–95% horizontal/vertical) |
| Hotspot color | Per-block, plus a color scheme per hotspot |
| Transition effect | Slide, fade, flip, coverflow, cards, or creative (Swiper-based) |
| Transition duration | Speed of the transition effect |
| Top on mobile | Controls whether the slider or the hotspots render first on mobile |
***
### Best practices
* Use Product Hotspots for a single strong lifestyle photo; use Shoppable Media Slider when you have several products or a short story to tell across multiple slides.
## Related
* [Featured products & collections](/docs/volume-themes/sections/products/featured-products-featured-collections-and-featured-collection-grid.md)
* [Sticky collection grid](/docs/volume-themes/sections/products/sticky-collection-grid.md)
---
# 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/products/shoppable-media-slider-and-product-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.