> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Slideshow

> Up to three wide slides, each a photo with a heading, text and a button in its own box, changed with arrows, dots or a swipe.

![Slideshow on the storefront](https://mintcdn.com/kwebby/MS8e7xtq5qj3x24S/images/kelvin/slideshow.webp?fit=max\&auto=format\&n=MS8e7xtq5qj3x24S\&q=85\&s=e02a99d52ddc0333d29fc816c2231414)

Slideshow, highlighted with the demo content

## Where to find it

On no template when the theme is installed. Add it to the home page or any other page with Add section, then choose Slideshow; it comes with two slides.

## How it works

* With two or three slides, controls under them show previous and next buttons (they wrap around), one dot per slide and a counter such as 2 / 3. On touch screens shoppers can also swipe.
* Only the slide on screen can be reached with the keyboard. Screen readers hear each slide as 1 of 3, and the slide changes a shopper makes are announced.
* Slides never change on their own unless you turn on Change slides automatically, every 6 to 10 seconds (Change slides every). A Pause button then comes first in the controls, and slides hold while the pointer is over them, while keyboard focus is in the slideshow, and while the tab is hidden or the slideshow is off screen.
* Shoppers who ask their device for reduced motion never see slides change on their own, and the slides move without animation.
* Slide height on desktop is Small, Medium or Large (420, 540 or 680 px); a slide grows when its text needs more room.
* Text position places the text box in one of eight places on the photo; left and right swap in right-to-left languages. On phones the text sits below the photo, and a Mobile image replaces the image below 750 px.
* The button shows once it has a Button label and a Button link. The section stays hidden on the store until it has a slide.
* In the theme editor, selecting a slide's block shows that slide and holds it there.

![The Add section list in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-add-section.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=b54bfcb98c05e2133b5810f6fc3f747e)

Not on the demo pages: add it with 1 Add section, then pick it in 2 the list

## Edit it

* Use landscape photos, 2000 x 900px recommended, and add a taller Mobile image for phones, 1000 x 1250px recommended.
* Keep each heading to a few words and the text to one or two sentences, so the box does not cover the photo.
* Pick a Color scheme for each slide's text box so it reads well on the photo.
* Turn on Use the first heading as the page title only when no other section on the page has a main heading; on the home page the hero has it.
* Leave Change slides automatically off unless the slides are quick to read.

## Settings

| Setting | What it does |
| - | - |
| **Slide height on desktop** | Options: Small, Medium, Large. Slides grow when the text needs more room. On phones each slide shows its image with the text below. Default: Medium. |
| **Use the first heading as the page title** | On or off. Makes the first slide's heading the page's main heading. Turn it on only when no other section on the page has one. On the home page the hero has it. Default: off. |

**Autoplay**

| Setting | What it does |
| - | - |
| **Change slides automatically** | On or off. A Pause button shows. Slides stop changing while a shopper points at them or uses the keyboard in the slideshow, and never change on their own for shoppers who turn on reduced motion. Default: off. |
| **Change slides every** | Slider from 6 to 10 s. Default: 7 s. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |

## Blocks

Up to 3 blocks. Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Slide

| Setting | What it does |
| - | - |
| **Image** | Image: upload one or choose from Content → Files. 2000 x 900px recommended. |
| **Mobile image** | Image: upload one or choose from Content → Files. Optional. Shown on screens narrower than 750px instead of the image. 1000 x 1250px recommended. |
| **Heading** | Text. Default: Slide heading. |
| **Text** | Formatted text. |
| **Button label** | Text. Default: Shop now. |
| **Button link** | Link: a page, product, collection or web address. The button shows once it has a label and a link. |
| **Text position** | Options: Top left, Middle left, Bottom left, Middle center, Bottom center, Top right, Middle right, Bottom right. Left and right swap in right-to-left languages. On phones the text sits below the image. Default: Bottom left. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). For the box that holds the text. Default: Scheme 2. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.