# Image with text slider

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

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

{% endtab %} {% tab title="Right" %}

{% endtab %} {% endtabs %} * **Show controls**: Toggle arrows for manual slide navigation.

* **Auto-rotate content**: Automatically cycles through slides when enabled. * **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?** 👉 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?** 👉 There’s no hard limit, but 3–5 slides are optimal for user attention. ***