> 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/image-with-text-slider.md).

# Image with text slider

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

The **Image with text slider** section is a versatile, carousel-style banner that helps you highlight multiple messages through slides.&#x20;

This section supports both **image slides** and **video slides**, giving you full control over how to communicate your brand visually.

## How to add an Image with text slider section to your Shopify store

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

1. In the theme editor (**Customize**) > click **Add section**
2. Select **Image with text slider.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit an Image with text slider section

### Section settings

<table><thead><tr><th width="250">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image height</strong></td><td>Choose from Adapt to image, Small, Medium, or Large.</td></tr><tr><td><strong>Image width</strong></td><td>Adjust width of image in slide.</td></tr><tr><td><strong>Image position</strong></td><td>Position image on left or right.<br><br><img src="/files/wC5VH2ODTL1XG3IrxYq5" alt=""><br><br><img src="/files/EfaKahcTGou1Zn1mj6Te" alt=""></td></tr><tr><td><strong>Show pagination</strong></td><td>Enable dots or counter for slider control.<br><img src="/files/8dyI7UMr4MeoANuNaOqP" alt=""></td></tr><tr><td><strong>Show navigation</strong></td><td>Show arrows for manual slide navigation.<br><img src="/files/NmcUFERAsx9jrlEt1nUd" alt=""></td></tr><tr><td><strong>Auto-rotate slides</strong></td><td>Automatically switch slides every few seconds.</td></tr><tr><td><strong>Desktop controls position</strong></td><td>Position nav controls (Left, Center, Right).</td></tr><tr><td><strong>Pagination type</strong></td><td>Choose Dots or Counter.</td></tr></tbody></table>

{% tabs %}
{% tab title="Pagination as Dots" %}

<figure><img src="/files/GyM8B3pLDVxAnVms26qh" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Pagination as Counter" %}

<figure><img src="/files/jOO9uhh6PD8vA3iOCDqj" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Block settings

Each **Image slide** or **Video slide** includes:

<table><thead><tr><th width="180">Block</th><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Video/Image</strong></td><td>Upload content</td><td>Use high-res images or Shopify-hosted video</td></tr><tr><td><strong>Text</strong></td><td>Heading, subheading, description</td><td>Communicate your message clearly</td></tr><tr><td><strong>Content layout</strong></td><td>Position/alignment</td><td>Adjust placement on desktop &#x26; mobile</td></tr><tr><td><strong>Button</strong></td><td>Label, link, style, size</td><td>Add a call-to-action</td></tr></tbody></table>