> 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-slideshow-and-stories-slideshow.md).

# Image Slideshow & Stories Slideshow

Two carousel sections in Volume — a wide image slideshow with 13 transition effects, and an Instagram-style stories slideshow with shoppable banners.

Two sections, two completely different jobs. **Image Slideshow** rotates full-width images with a choice of thirteen transitions — a visual section for campaigns, seasons and collections. **Stories Slideshow** borrows the format every customer already knows from their phone: round thumbnails that open full-screen banners, each of which can carry products.

<figure><img src="https://846450420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJZYrhya1ZIeTZS4wpBJB%2Fuploads%2FyjFIkvxqBJ9WOC8F8z1a%2Fstories-slideshow.gif?alt=media&amp;token=c2f2dd3a-5d5d-4df4-a69a-7efd7c13000e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**At a glance**

| Image Slideshow   | **Add section → Banners** — up to **8** slides |
| ----------------- | ---------------------------------------------- |
| Stories Slideshow | **Add section → Media** — up to **7** stories  |
| Allowed on        | Any template                                   |
| Typical use       | Campaign rotation; shoppable story tray        |
| {% endhint %}     |                                                |

{% hint style="warning" %}
**Image Slideshow lives under Banners in the editor.** The section is documented here with the rest of the media sections, but when you click **Add section** you'll find it in the **Banners** group, not **Media**. If you've been scrolling the Media list looking for it, that's why.
{% endhint %}

***

## Image Slideshow

### How to add

{% stepper %}
{% step %}

### Add the section

Click **Add section** and pick **Image slideshow** from the **Banners** group.
{% endstep %}

{% step %}

### Add slides

Each slide is an **Image** block, with its own image, link and content. The section stops at **8 slides** — the Add block button simply won't add a ninth.
{% endstep %}

{% step %}

### Choose a transition

**Effect** offers thirteen options: Slide, Fade, Flip, Coverflow, Cards, Stack, Morph, Peel, Pixelize, Ripple, Shutters, Wave X and Wind. The default is **Fade**.
{% endstep %}

{% step %}

### Decide about autoplay

Autoplay is **off** by default. Turn it on and set **Autoplay speed** between 3 and 10 seconds — the default is 7.
{% endstep %}

{% step %}

### Give mobile its own slides

Every slide has a mobile image, a mobile height, a mobile overlay and its own mobile colour schemes. There is no separate mobile slide list — same slides, different dressing.
{% endstep %}
{% endstepper %}

{% hint style="success" icon="lightbulb" %}

### Good to know

* **Arrows disappear with a single slide.** They're also hidden whenever **Show arrows** is off. A one-slide "slideshow" is simply a banner, and the theme treats it as one.
* **The exotic effects cost attention.** Pixelize, Ripple, Shutters and Wind are genuinely eye-catching the first time and genuinely tiring by the third rotation. Fade is the default for a reason.
* **Autoplay off is the safer default.** Most visitors never see slide two of an autoplaying slideshow — they've either scrolled past or clicked. If the second slide matters, consider two banners instead.
* **Hover does not pause autoplay.** Reading a slide won't stop it from advancing, so keep the copy short enough to finish inside the interval.
* **Eight slides is the ceiling.** Plan the campaign around it rather than discovering it at slide nine.
  {% endhint %}

***

## Stories Slideshow

### How to add

{% stepper %}
{% step %}

### Add the section

Click **Add section** and pick **Stories slideshow** from the **Media** group.
{% endstep %}

{% step %}

### Add a story

Each **Story** block is one thumbnail in the tray. Give it a **Thumbnail image** and a **Title** — this is what the visitor taps.
{% endstep %}

{% step %}

### Fill the banners inside the story

A story holds up to **eight banners**, each with its own image, link, label, button style and the option to reuse the main button style.
{% endstep %}

{% step %}

### Attach products to a banner

Each banner has its own product list. Products are optional — add them where the story is shoppable, leave them out where it's editorial.
{% endstep %}

{% step %}

### Pick the grid

**Grid** controls how wide the tray runs. It defaults to **Alternative**.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
**Stories are not connected to a collection — and not to Instagram.** There is no collection setting and no feed import. Every thumbnail, every banner image and every product is chosen by hand in the editor. That's what makes the section good for curation and bad for anything you expect to update itself.
{% endhint %}

{% hint style="success" icon="lightbulb" %}

### Good to know

* **Seven stories, eight banners each.** The caps are hard: `max_blocks` is 7 for stories, and each story has exactly eight banner slots.
* **With no stories, the section renders nothing at all** — not even in the editor. An empty Stories slideshow looks like it failed to install.
* **The product tray only appears when a banner has products.** Add none and the banner is purely visual; add some and the tray respects the section's **Quick buy** setting, so shoppers can add to cart without leaving the story.
* **Shoot the thumbnails as a set.** They sit in a row at a small size, and a mismatched set of crops is far more obvious there than in a full-width banner.
* **The format carries an expectation.** Visitors who recognise the round-thumbnail tray expect something current. A story labelled for a season that has passed ages the whole page.
  {% endhint %}

### Customization ideas

<details>

<summary><strong>Campaign rotation (Image Slideshow)</strong></summary>

Three slides, Fade, autoplay off, arrows on. One campaign per slide, each with its own link. Lets a visitor browse your current pushes without a wall of banners.

</details>

<details>

<summary><strong>Seasonal homepage hero (Image Slideshow)</strong></summary>

A single strong slide with the mobile image and mobile overlay set separately. Fewer slides, better crops, faster page.

</details>

<details>

<summary><strong>Shoppable lookbook (Stories Slideshow)</strong></summary>

One story per look or per outfit, each banner a photograph with the products in it attached. The closest thing to an Instagram story that converts in place.

</details>

<details>

<summary><strong>Guides and how-tos (Stories Slideshow)</strong></summary>

A story per topic — *How to measure*, *Care*, *Sizing* — with banners as steps and no products at all. A help centre that doesn't look like one.

</details>

<details>

<summary><strong>Category tray (Stories Slideshow)</strong></summary>

One story per category, each opening on a banner that links into the collection. Useful on a homepage where a full collection list would be too heavy.

</details>

***

### Settings reference

<details>

<summary>Image Slideshow — section settings</summary>

| Setting         | What it does                                                                                                         |
| --------------- | -------------------------------------------------------------------------------------------------------------------- |
| Effect          | Slide, Fade, Flip, Coverflow, Cards, Stack, Morph, Peel, Pixelize, Ripple, Shutters, Wave X, Wind. Default **Fade**. |
| Enable autoplay | Off by default.                                                                                                      |
| Autoplay speed  | 3–10 seconds, default 7. Only with autoplay on.                                                                      |
| Show arrows     | Hidden automatically when there is one slide or fewer.                                                               |

**Slide blocks** — up to 8, each with an image, link and content, plus a mobile image, mobile height, mobile overlay and its own mobile colour schemes.

**Section layout, Color and Spacing** — the standard Volume groups.

</details>

<details>

<summary>Stories Slideshow — section settings</summary>

| Setting   | What it does                                                          |
| --------- | --------------------------------------------------------------------- |
| Grid      | Width of the tray. Default **Alternative**.                           |
| Quick buy | Whether attached products can be added to cart from inside the story. |

**Story blocks** — up to 7.

| Setting             | What it does                                                                                                                                |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Thumbnail image     | The round tile in the tray.                                                                                                                 |
| Title               | The label under the thumbnail.                                                                                                              |
| Banner 1 … Banner 8 | Eight repeated groups, each with an image, link, open-in-new-tab, label, button style, a "use main button" option and its own product list. |

</details>

### Best practices

* **Fewer slides, better slides.** Engagement with slide three and beyond is close to zero in almost every store that measures it.
* **Keep one message per slide.** A slide read in three seconds while it fades out has room for one idea and one button.
* **Give the stories a reason to be opened.** A thumbnail labelled "New in" earns a tap; one labelled with your brand name doesn't.
* **Keep the stories current.** The format implies freshness; stale content in it is worse than no section.

## Related

* [Video](/docs/volume-themes/sections/media/video.md) — for a single long-form video
* [Image with Hotspots](/docs/volume-themes/sections/media/image-with-hotspots.md) — another shoppable-image format
* [Media with Text](/docs/volume-themes/sections/media/media-with-text.md) — when one image needs real copy beside it


---

# 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-slideshow-and-stories-slideshow.md?ask=<question>&goal=<user_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.