> 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.md).

# Media

Browse the media sections in the Volume Shopify theme — video, multicolumn layouts, before-and-after sliders, shoppable images, stories and social grids.

Volume's media sections are the ones that show rather than tell: a video with its own cover, a row of equal columns, a draggable before-and-after, a photograph you can shop from, a tray of stories, a wall of social tiles.

***

### Section overview

| Section             | Page                                                                                                               | What it does                                                             |
| ------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------ |
| Video               | [Video](/docs/volume-themes/sections/media/video.md)                                                               | One video — YouTube, Vimeo or Shopify-hosted — with your own cover image |
| Multicolumn         | [Multicolumn](/docs/volume-themes/sections/media/multicolumn.md)                                                   | A row of equal columns holding images, looping videos or text            |
| Media with text     | [Media with Text](/docs/volume-themes/sections/media/media-with-text.md)                                           | Image or video on one side, 14 kinds of content block on the other       |
| Image comparison    | [Image Comparison](/docs/volume-themes/sections/media/image-comparison.md)                                         | A draggable divider between a before and an after image                  |
| Image slideshow     | [Image Slideshow & Stories Slideshow](/docs/volume-themes/sections/media/image-slideshow-and-stories-slideshow.md) | Up to 8 full-width slides with 13 transition effects                     |
| Stories slideshow   | [Image Slideshow & Stories Slideshow](/docs/volume-themes/sections/media/image-slideshow-and-stories-slideshow.md) | Instagram-style thumbnails opening shoppable full-screen banners         |
| Image with hotspots | [Image with Hotspots](/docs/volume-themes/sections/media/image-with-hotspots.md)                                   | Markers pinned onto a photograph, each linking to a product or a note    |
| Social grid         | [Social Grid](/docs/volume-themes/sections/media/social-grid.md)                                                   | A curated grid or slider of social-style tiles                           |
| Image grid          | [Image Grid](/docs/volume-themes/advanced-features/image-grid.md)                                                  | A gallery built from a page metafield — set up in Advanced features      |

{% hint style="warning" %}
**Two of these sit elsewhere in the editor.** **Image slideshow** is listed under **Add section → Banners**, not Media, even though it belongs with the media sections conceptually. And **Image grid** needs a `custom.gallery` page metafield before it will do anything — its setup lives in [Image Grid](/docs/volume-themes/advanced-features/image-grid.md).
{% endhint %}

***

### Quick decision guide

**Have one video to show?** → [Video](/docs/volume-themes/sections/media/video.md) for a full section with a cover image and a play button.

**Need to say three or four short things of equal weight?** → [Multicolumn](/docs/volume-themes/sections/media/multicolumn.md) — feature rows, brand values, "how it works".

**One image, and a lot to say about it?** → [Media with Text](/docs/volume-themes/sections/media/media-with-text.md), the most flexible section in the group.

**Proving a difference?** → [Image Comparison](/docs/volume-themes/sections/media/image-comparison.md) — before and after behind a divider the visitor drags.

**Want to sell from inside a photograph?** → [Image with Hotspots](/docs/volume-themes/sections/media/image-with-hotspots.md) for a shop-the-look scene, or [Stories Slideshow](/docs/volume-themes/sections/media/image-slideshow-and-stories-slideshow.md) for a tappable story tray with products attached.

**Rotating several campaign images?** → [Image Slideshow](/docs/volume-themes/sections/media/image-slideshow-and-stories-slideshow.md) — up to 8 slides, found under **Banners** in the editor.

**Showing customer photos or press?** → [Social Grid](/docs/volume-themes/sections/media/social-grid.md), curated by hand rather than pulled from a live feed.

**Building a photo gallery?** → [Image Grid](/docs/volume-themes/advanced-features/image-grid.md), which stores its images in a page metafield.


---

# 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.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.