How to add a rotating image banner to any Shopify theme

Introduction

Add visual motion and highlight multiple messages with the Flexi Rotating Image Banner — a dynamic section designed to rotate through images automatically in a clean, attention-grabbing format. Instead of choosing a single static banner, a rotating image banner lets you showcase multiple campaigns, promotions, or brand visuals in one place.

In the video above, you’ll learn how to add a rotating image banner to any Shopify theme using Flexi’s intuitive section settings. Discover how to control rotation timing, transitions, and layout behavior while maintaining a smooth experience across desktop and mobile.

Ideal for homepages, landing pages, and promotional areas, the Flexi Rotating Image Banner integrates seamlessly with any Shopify theme. Whether you’re highlighting seasonal offers or rotating brand imagery, this section helps keep your storefront visually engaging.

Setup Instructions

Install the App

Visit the Shopify App Store and install Flexi Slider Sections. Start your free trial to unlock access to all Flexi sections, including the Rotating Image Banner.

Install Section

Open the Flexi app and navigate to the sections library. Search for "Rotating Image Banner" and click "Add to Theme" to install it instantly.

Add to Your Store

Go to your Shopify admin → Online Store → Themes → Customize. Navigate to the page where you want the banner to appear, click "Add section", and select "Rotating Image Banner" from the available sections.

Set Section Width

In the section settings, choose how the rotating banner should be displayed:

• Full width: Create an immersive, edge-to-edge banner experience
• Fixed width: Set a custom maximum width (320px – 1440px)
• Theme width: Match your theme’s default content container

Add Content

Click "Add block" to add banner slides. Each block represents one image in the rotation and can include optional headings, supporting text, or call-to-action links.

You can reorder banner slides easily using Shopify’s drag-and-drop editor and rotate between promotions, announcements, or brand visuals without rebuilding layouts.

Customize & Style

Customize your rotating image banner using Flexi’s built-in settings:

• Adjust rotation speed and transition style
• Enable or disable auto-rotation and looping
• Control image height, alignment, and focal points
• Customize overlays, typography, and colors

Works Seamlessly with Dawn & Horizon

Flexi sections are built for Shopify’s modern theme architecture, which means the Rotating Image Banner works seamlessly with Dawn, Horizon, and all Online Store 2.0 themes.

Dawn Compatibility

Dawn is Shopify’s reference theme, and the Flexi Rotating Image Banner follows the same responsive layout and spacing conventions used throughout Dawn.

This ensures banner content inherits your theme’s typography, buttons, and accessibility standards by default, while still giving you full control over animation and presentation.

Horizon & Modern Framework Support

Horizon represents Shopify’s next-generation theme framework. The Rotating Image Banner integrates cleanly with Horizon-based themes without overriding global styles or introducing JavaScript conflicts.

Because each Flexi section is self-contained and theme-safe, you can confidently add rotating banners to modern and highly customized storefronts.

Theme-Safe by Design

Every Flexi section is scoped, isolated, and performance-optimized. This means you can:

• Add or update rotating banners without editing theme code
• Preview animation changes safely before publishing
• Reuse the same banner across pages and themes
• Switch themes without rebuilding promotional visuals

Whether you're using Dawn, Horizon, or a fully custom Online Store 2.0 theme, Flexi’s Rotating Image Banner adapts automatically — helping you highlight multiple messages while maintaining performance and design consistency.