# Slideshow

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FNN2SvEE7rrm9UxnNgRbM%2FFox-BG%20Light%20(59).jpg?alt=media&#x26;token=a5a92dd8-aa84-4b2d-8c73-bd62590fdebe" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FlnMQglQl7KLa1H9dwMIt%2Fimage.png?alt=media&#x26;token=cc898756-de8c-477b-b9c4-d5553bd49b21" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fc3Y02rV9vdLqCKL27gMN%2Fimage.png?alt=media&#x26;token=f73aea7e-d331-49a0-a736-5d2cd3fa3b3a" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fh78iqd01BRKihXlUGnAY%2Fimage.png?alt=media&#x26;token=e5563cda-d2c6-4684-89bb-e3dd906f66c0" alt=""><figcaption></figcaption></figure></div><div><figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F3BCw3R4W1A3Bg4GpiZdi%2Fimage.png?alt=media&#x26;token=5ab00a4e-7c22-442a-a11d-ffb9a1e8b368" alt=""><figcaption></figcaption></figure></div><div><figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FCK2p6Qqr1NoIE0ETpUUl%2Fimage.png?alt=media&#x26;token=266c5006-6483-456f-a3e4-07bd0b808065" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FsmuwldRfLYsOj2KavjWS%2Fimage.png?alt=media&#x26;token=c074485b-b6ad-43da-8898-bc1b850eb4a2" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FSzJLxKGc2cyQDYb7JunA%2Fimage.png?alt=media&#x26;token=8980d05a-5111-4792-9baa-f82f19aa30b2" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FPHgDwt1qBQMg59pR29gQ%2Fimage.png?alt=media&#x26;token=f3780d04-c709-45cf-bda6-7337f4f34715" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Flxbp1dcSJxtaphkp2DRr%2Fimage.png?alt=media&#x26;token=299ed8c4-fad5-4394-a2a7-c76be9058656" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/theme-sections/slideshow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.