Skip to main content
The Interactive Banner is a full-width visual section designed to highlight multiple key messages within a single banner area. It works similarly to a full width banner but allows multiple interactive slides that change on hover or click. Each slide displays a heading that acts as both a visual trigger and a navigation point. The first slide is active by default, and up to 5 slides can be added. Interactive banners help create engaging, dynamic experiences by allowing users to explore multiple messages or campaigns within a compact, visually striking format. Interactive Banner section overview

​
What this section controls

This section controls interactive banner displays with the following capabilities:
  • Multiple slides with hover-triggered media changes
  • Layered headings that act as navigation triggers
  • Separate desktop and mobile media configuration
  • Click-through functionality with custom links
  • Up to 5 slides per section
  • Customizable banner height and content width

​
How the Interactive Banner works

The Interactive Banner uses a block-based slide system:
  • Displays multiple headings layered on top of a single banner area
  • The first slide is active by default
  • Hovering over a heading changes the background media with an animation
  • Clicking a heading navigates to its assigned link
  • Supports both images and videos
  • Desktop and mobile media can be configured separately
  • Maximum of 5 slides per section

​
Getting started

1

Open Theme Customizer

From Shopify admin, access the Theme Customizer.
2

Add Interactive Banner section

Add the Interactive Banner section to your page or template.
3

Add slides

Click Add Slide to create interactive banner states.
4

Configure media and links

Upload media for each slide and assign click-through links.
Interactive Banner section in Theme Customizer

​
Section settings

Section settings control the overall size and layout of the banner.
Controls the height of the banner on desktop devices.Range: 20vh – 100vhControls the height of the banner on mobile devices.Range: 20vh – 100vhBanner height settings

​
Slide settings

Slide settings control individual interactive slides. Each slide represents a single interactive state of the banner.
The first slide in the list is automatically active on page load.

​
Heading

The visible title displayed on top of the banner.
  • Rich text supported (bold, italic, underline, links)
  • Acts as an interactive trigger on hover
  • Acts as a navigation element on click
Defines where the user is redirected when the heading is clicked.
  • Shopify URL selector
Heading and link configuration

​
Best practices

  • Keep headings short and scannable (2-5 words maximum) for quick comprehension
  • Use consistent image or video styles across slides to maintain visual coherence
  • Limit slides to 3–4 for better usability and to avoid overwhelming users
  • Avoid external videos unless absolutely necessary due to performance impact
  • Ensure sufficient contrast between headings and media for readability
  • Test hover interactions on desktop to ensure smooth transitions
  • Use high-quality media that maintains clarity at full width
  • Consider load time when using videos for multiple slides
  • Make sure headings clearly communicate the destination or value proposition

​
Common use cases

  • Campaign landing headers - Showcase multiple campaigns with interactive exploration
  • Collection highlights - Feature different product collections with visual appeal
  • Editorial storytelling banners - Tell brand stories through interactive narratives
  • Brand positioning sections - Highlight key brand values or pillars
  • Seasonal or promotional hero areas - Display time-sensitive offers with engaging visuals

Common Settings

Learn about common settings shared across sections