> 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/avante-themes/sections/media.md).

# Media

Visual and media sections in the Avante theme — image grids, comparison sliders, shoppable stories, video embeds, hotspot images, and text-media layouts.

Nine sections for visual content beyond banners — image grids, comparison sliders, interactive hotspots, shoppable media experiences, video, and Instagram-style stories.

***

### Section overview

<table data-search="false"><thead><tr><th>Section</th><th>Page</th><th>What it does</th></tr></thead><tbody><tr><td>Media with Text</td><td>Media with Text &#x26; Media with Side Tabs</td><td>Image or video paired with text content in a side-by-side or stacked layout</td></tr><tr><td>Media with Tabs</td><td>Media with Text &#x26; Media with Side Tabs</td><td>Tabbed content section where each tab switches the paired media</td></tr><tr><td>Image Grid</td><td><a href="/docs/avante-themes/sections/media/image-grid.md">Image grid</a></td><td>Gallery of extra images pulled from a <code>custom.gallery</code> metafield — masonry or fixed-ratio grid with an optional zoom lightbox</td></tr><tr><td>Image Comparison</td><td>Image Grid, Image Comparison &#x26; Multicolumn</td><td>Before/after slider comparing two images side by side</td></tr><tr><td>Multicolumn</td><td>Image Grid, Image Comparison &#x26; Multicolumn</td><td>Multi-column content blocks with image, heading, text, and link per column</td></tr><tr><td>Image with Hotspots</td><td><a href="/docs/avante-themes/sections/media/image-with-hotspots.md">Image with Hotspots</a></td><td>Interactive image with clickable pins that reveal product cards or content</td></tr><tr><td>Shoppable Media Slider</td><td>Shoppable Media Slider &#x26; Stories Slideshow</td><td>Full-screen media carousel with embedded product cards for direct purchase</td></tr><tr><td>Stories Slideshow</td><td>Shoppable Media Slider &#x26; Stories Slideshow</td><td>Instagram-style stories with swipeable slides and shoppable product cards</td></tr><tr><td>Video</td><td>Video</td><td>Embedded YouTube or Vimeo video behind a cover image that loads the player on click</td></tr></tbody></table>

***

### Quick decision guide

**Pairing an image with descriptive text?** → Media with Text — the standard side-by-side layout. Media with Tabs for a tabbed version where each tab shows different media.

**Building an image gallery?** → Image Grid pulls its images from a `custom.gallery` metafield on the product, page, blog or collection — nothing is uploaded in the Theme Editor. Multicolumn for columns with text underneath each image.

**Showing a before/after comparison?** → Image Comparison — interactive slider between two images.

**Want clickable product pins on an image?** → Image with Hotspots — place pins on a lifestyle photo that reveal product cards on click.

**Shoppable visual experience?** → Shoppable Media Slider for a full-screen carousel with product cards. Stories Slideshow for an Instagram-style swipeable format.

**Embedding a video?** → Video section — YouTube or Vimeo only, with separate desktop and mobile cover images. The player loads when the customer clicks the cover, so there is no autoplay.

***

### Shared features

Most media sections support overlay controls, color scheme overrides, section width options, responsive mobile layouts, and content positioning. Shoppable sections share product card settings (price, vendor, rating, quick view).


---

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