> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/slideshow.md).

# Slideshow

Rotate through image and video slides, each with its own heading, text and button, to showcase products, collections and news.

***

The **Slideshow** section rotates through full-size image and video slides. Each slide has its own caption, heading, description and button. Use it at the top of your home page to feature new arrivals, campaigns or your most popular collections.

For other slideshow styles, see the [Slideshow: Pagination](/articles/sections/theme-sections/slideshow-pagination.md) and [Slideshow: Split](/articles/sections/theme-sections/slideshow-split.md) sections.

### 1. Our guide to set up a Slideshow section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Slideshow.**
* Click **Save.**
  {% endhint %}

The section is added with two **Image** blocks. Add **Image** or **Video** blocks for more slides, up to 5 of each.

### 2. Section settings

* **Layout:**
  * **1 column:** One full-width slide at a time.
  * **2 columns:** Two slides side by side on desktop.
  * **Split:** On desktop, the slide's text sits at the bottom left and its button at the bottom right. The slide's **Desktop content position** and **Desktop content alignment** don't apply.
  * **Compact:** The slideshow stays within the page width instead of reaching the edges of the screen.
* **Pagination style:** None / Dots / Counter / Numbers. Shows which slide customers are on and lets them move between slides.
* **Navigation style:** None / Arrows. **Arrows** adds previous and next buttons to the slideshow.
* **Auto-rotate slides:** Moves to the next slide automatically.
* **Change slides every:** 3–9 seconds.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/6e5205ab-36e6-4de1-8b5f-5c3ada57aa12/Screenshot%202023-11-15%20at%203.50.53%20PM.png" alt="Pagination style, Navigation style and Auto-rotate settings"><figcaption></figcaption></figure>

* **Media settings**
  * **Desktop slide height:** Adapt to first media size / Small / Medium / Large / Custom. **Adapt to first media size** sets the height from the shape of the first slide's image or video.
  * **Desktop custom height:** 250–850px. Applies when **Desktop slide height** is set to **Custom**.
  * **Mobile slide height:** Adapt to first media size / 150px / 250px / 350px / 450px / 550px / 650px / 750px.
* **Accessibility**
  * **Slideshow description:** Describes the slideshow for customers using screen readers.

With **2 columns**, the arrows and pagination only appear when there are more than two slides.

### 3. Block settings

**Image block**

* **Image:** The slide image.
* **Mobile image:** An optional image for mobile. If you leave it blank, mobile shows the **Image**.
* **Image focal point:** Center / Top / Bottom / Left / Right / Top Left / Top Right / Bottom Left / Bottom Right. Which part of the image stays visible when it's cropped.
* **Image link:** Makes the whole slide clickable. This only works when **Button label** is blank.
* **Image overlay opacity:** Darkens the image so text stands out, 0–100%.
* **Caption:** A short line above the heading.
* **Heading:** The slide's heading.
* **Heading size:** 15–80px.
* **Description:** The text under the heading.
* **Desktop content position:** Where the content sits on desktop: Top, Middle or Bottom, combined with Left, Center or Right.
* **Desktop content alignment:** Left / Center / Right.
* **Button label:** Leave the label blank to hide the button.
* **Button link:** Where the button goes.
* **Use outline button style:** Shows the button with an outline instead of a solid fill.
* **Show container on desktop:** Shows the content in a box on desktop.
* **Colors**
  * **Heading** and **Text:** The colors of the heading and the caption and description.
  * **Button label**, **Button background** and **Button outline:** The colors of the button. **Button outline** applies when **Use outline button style** is on.
  * **Container background:** The color of the box. Visible when the container is displayed.
* **Mobile layout**
  * **Mobile content position:** Top / Middle / Bottom.
  * **Mobile content alignment:** Left / Center / Right.

**Video block**

A video slide. The video plays automatically, muted and on a loop.

* **Video:** A video uploaded to your Shopify files.
* **Mobile video:** An optional video for mobile. If you leave it blank, mobile shows the **Video**.
* **Video overlay opacity:** Darkens the video so text stands out, 0–100%.
* **Caption**, **Heading**, **Heading size**, **Description**, **Desktop content position**, **Desktop content alignment**, **Button label**, **Button link**, **Use outline button style**, **Show container on desktop**, **Colors** and **Mobile layout:** Same as the **Image** block.

### 4. Tips

* Add a **Mobile image** or **Mobile video** in portrait format so slides look good on phones.
* Keep videos short and small in file size so the slideshow loads quickly.
* If you turn on **Auto-rotate slides**, keep the text on each slide short so customers can read it before the slide changes.