# Slideshow

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(59)_JoLAN3yw.jpg)

Highlight key messages, promotions, or brand visuals using a mix of image and video slides. Each slide can include overlay text and up to two buttons to encourage visitors to explore further.

## How to add a Slideshow to your Shopify store

<Hint type="success">

Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Slideshow**
3. Make necessary changes
4. **Save.**

</Hint>

## How to edit a Slideshow

### Section settings

![image](https://docs-assets.foxecom.app/zest-theme/image_VCcIP4vf.png)

<Table widths="215,auto">

| Setting | Description |
| --- | --- |
| **Slide height** | Controls height of the slideshow |
| **Show pagination** | Toggle on to display dots or counters showing slide number |
| **Show navigation** | Show left/right arrows to manually navigate slides<br/><img src="https://docs-assets.foxecom.app/zest-theme/image_o2eNNgAM.png" alt="image" /> |
| **Auto-rotate slides** | Automatically advance slides after a set time |
| **Change slides every** | Set how many seconds before slides rotate (if auto-rotate is enabled) |
| **Controls background** | Choose the color style for nav arrows:<br/>• `Dark`<br/>• `Light`<br/>• `None`<br/><img src="https://docs-assets.foxecom.app/zest-theme/image_Z15kZu5d.png" alt="image" /><img src="https://docs-assets.foxecom.app/zest-theme/image_fitL2P62.png" alt="image" /><img src="https://docs-assets.foxecom.app/zest-theme/image_FVkLwRxz.png" alt="image" /> |
| **Desktop controls position** | Position nav arrows: `Left`, `Center`, or `Right` |
| **Pagination type** | Choose between:<br/>• `Dots` – simple visual dots<br/>• `Counter` – e.g., “1 / 2”<br/><img src="https://docs-assets.foxecom.app/zest-theme/image_680HlB09.png" alt="image" /> |
| **Show content below images on mobile** | If enabled, moves all text/buttons below the image on mobile<br/><img src="https://docs-assets.foxecom.app/zest-theme/image_hXtEOkQM.png" alt="image" /> |
| **Mobile content alignment** | Align text on mobile: `Left`, `Center`, or `Right` |
| **Slideshow description** | Add alt text for screen readers (accessibility best practice) |

</Table>

### Block settings

Since theme blocks have their own settings, you need to click each block to modify it. It features options to fine-tune the text, image, and call-to-action components.

<Hint type="success">

Steps

1. In the **Slideshow** section, click **Add block.**
2. Choose:
   * **Image slide** – displays a static banner
   * **Video slide** – supports Shopify-hosted videos
3. Make necessary changes.
4. **Save.**

</Hint>

<Table widths="250,auto">

| Setting | Description |
| --- | --- |
| **Image / Video** | Upload desktop image or Shopify-hosted video |
| **Mobile image** | Upload alternate image optimized for mobile |
| **Image overlay opacity** | Add a dark overlay on top of the image to improve text readability |
| **Desktop content position** | Place content vertically (Top, Middle, Bottom) |
| **Desktop content alignment** | Align horizontally (Left, Center, Right) |
| **Heading / Subheading** | Add and style main text elements |
| **Description** | Add supporting text under headings |
| **Text color / Heading color** | Adjust for readability over background |
| **Heading size** | Options from Medium to Extra Large |
| **Button 1 &#x26; 2** | Add label, link, style, and size for up to 2 CTA buttons |

</Table>

![image](https://docs-assets.foxecom.app/zest-theme/image_BIh2IYgT.png)

![image](https://docs-assets.foxecom.app/zest-theme/image_jzUbh7wr.png)