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

# Slideshow

<figure><img src="/files/JoLAN3yw1kp9GL3ZC3Rk" alt=""><figcaption></figcaption></figure>

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 style="success" %}
Steps

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

## How to edit a Slideshow

### Section settings

<figure><img src="/files/VCcIP4vfVhUcBVsCiTB8" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Slide height</strong></td><td>Controls height of the slideshow</td></tr><tr><td><strong>Show pagination</strong></td><td>Toggle on to display dots or counters showing slide number</td></tr><tr><td><strong>Show navigation</strong></td><td>Show left/right arrows to manually navigate slides<br><img src="/files/o2eNNgAMTs5Zoo1inFhm" alt=""></td></tr><tr><td><strong>Auto-rotate slides</strong></td><td>Automatically advance slides after a set time</td></tr><tr><td><strong>Change slides every</strong></td><td>Set how many seconds before slides rotate (if auto-rotate is enabled)</td></tr><tr><td><strong>Controls background</strong></td><td><p>Choose the color style for nav arrows:</p><ul><li> <code>Dark</code></li><li> <code>Light</code></li><li> <code>None</code><br></li></ul><div><figure><img src="/files/Z15kZu5dEhQqKey1RSh1" alt=""><figcaption></figcaption></figure></div><div><figure><img src="/files/fitL2P62k4VhyVxApk7H" alt=""><figcaption></figcaption></figure></div><div><figure><img src="/files/FVkLwRxzmOB4jJQhtNFT" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td><strong>Desktop controls position</strong></td><td>Position nav arrows: <code>Left</code>, <code>Center</code>, or <code>Right</code></td></tr><tr><td><strong>Pagination type</strong></td><td>Choose between:<br>• <code>Dots</code> – simple visual dots<br>• <code>Counter</code> – e.g., “1 / 2”<br><img src="/files/680HlB09ZbND6ocDZlQW" alt=""></td></tr><tr><td><strong>Show content below images on mobile</strong></td><td>If enabled, moves all text/buttons below the image on mobile<br><img src="/files/hXtEOkQMlFvdnRKsw7bf" alt=""></td></tr><tr><td><strong>Mobile content alignment</strong></td><td>Align text on mobile: <code>Left</code>, <code>Center</code>, or <code>Right</code></td></tr><tr><td><strong>Slideshow description</strong></td><td>Add alt text for screen readers (accessibility best practice)</td></tr></tbody></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 style="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.**
   {% endhint %}

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

<figure><img src="/files/BIh2IYgTqygbQl8M5sah" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/jzUbh7wrTXYuWPiibnmL" alt=""><figcaption></figcaption></figure>