# Image with text slider

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FWvkgqUdpJbgpSJNe5TKO%2FHyper%20docs%20screenshot%20do%20not%20delete%20(30).jpg?alt=media&#x26;token=181177dc-f305-4371-9fe9-d4acc9a7ff1c" alt=""><figcaption></figcaption></figure>

The **Image with Text Slider** section lets you display multiple slides with image + text combinations. It’s perfect for promotional banners, seasonal campaigns, or new collection highlights.

## 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. Locate **Image with text slider**.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit an Image with text slider section

### Section settings

#### General&#x20;

* **Color scheme:** Apply a pre-defined set of colors. Learn more [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")

#### Slider settings

* **Image height**: Set a consistent height for the entire slider images.
* **Width**: Adjust how much horizontal space the image portion will take (40-80%).

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FNpFhN3rEo0X4tJdMmlkM%2Fimage.png?alt=media&#x26;token=c80c3a30-9ac7-4d28-bb36-3e8b09d323ca" alt=""><figcaption></figcaption></figure>

* **Desktop image position**: Choose whether the image displays on the *left* or *right* of the text on desktop. This applies to all sliders.

{% tabs %}
{% tab title="Left" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FcZwDixi2hdIZPGAXh7Xn%2Fimage.png?alt=media&#x26;token=e8c07b87-ce0f-4b5a-90c9-fb5a34c2e897" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FP0987ZlkPia2FEDxHcFo%2Fimage.png?alt=media&#x26;token=87a32a1f-812a-4ea0-b14f-5236994ec7c1" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Show controls**: Toggle arrows for manual slide navigation.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FKvGlQUO5lqFBzccehbSJ%2Fimage.png?alt=media&#x26;token=9b161c2e-3a46-42eb-8482-dfd11f833066" alt=""><figcaption></figcaption></figure>

* **Auto-rotate content**: Automatically cycles through slides when enabled.&#x20;
* **Change slides every:** Set the time (in seconds) between automatic transitions.
* **Desktop controls position / Mobile controls position:** Adjust the position of navigation controls.

### Block settings

{% hint style="success" %}
In the **Image with text slider section**, click **Add image slide** to add more slides.

![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fm3FlwLWe8YoSdhORm1bL%2Fimage.png?alt=media\&token=fdac6d1b-9d76-4117-b7bd-c60284bc8113)
{% endhint %}

#### General

* **Color scheme:** Choose a specific color palette for the slide background/text. Learn more: [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")
* **Image:** Upload your main banner image.
* **Mobile image:** Upload an alternative image optimized for mobile view.

#### Content settings

* **Desktop content position:** Set the vertical alignment of text on desktop view.
* **Desktop content alignment:** Choose horizontal text alignment on desktop view (Left/Center/Right).
* **Mobile content alignment:** Set how text aligns on mobile screens (Left/Center/Right).

#### Advanced

* **Enable preload image**:  Enable if the section is above the fold. Helps improve LCP (Largest Contentful Paint) and speed scores when used properly.

## Best practices

✅ Use auto-rotation for campaigns; turn off for story-driven slides.

✅ Ensure mobile readability by previewing text + image balance on small screens.

## FAQs

### **Can I add videos instead of images?**&#x20;

👉 Not in this section. For video support, consider using:

* [video](https://docs.foxecom.com/hyper-theme/theme-sections/video "mention")
* [video-hero](https://docs.foxecom.com/hyper-theme/theme-sections/video-hero "mention")
* [custom-content](https://docs.foxecom.com/hyper-theme/theme-sections/custom-content "mention")
* [shop-the-feed](https://docs.foxecom.com/hyper-theme/theme-sections/shop-the-feed "mention")

### **How many slides can I add?**&#x20;

👉 There’s no hard limit, but 3–5 slides are optimal for user attention.

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></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/hyper-theme/theme-sections/image-with-text-slider.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.