# Image with text slider

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(30)_ZxARmouj.jpg)

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 type="success">

Steps:

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

</Hint>

## How to edit an Image with text slider section

### Section settings

#### General

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

#### 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%).

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

* **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">

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

</Tab>

<Tab title="Right">

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

</Tab>
</Tabs>

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

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

* **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 type="success">

In the **Image with text slider section**, click **Add image slide** to add more slides.

![](https://docs-assets.foxecom.app/hyper-theme/image_SP8BZamy.png)

</Hint>

#### 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)
* **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?**

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

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

### **How many slides can I add?**

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