Scrolling banner
Display large, high-impact images with text and buttons in a horizontal scrolling format
Last updated
Display large, high-impact images with text and buttons in a horizontal scrolling format
Last updated
Highlight important campaigns, collections, or brand messages through a horizontally scrollable visual banner. Perfect for storytelling, promotions, or setting the visual tone of your store.
Steps:
In the theme editor (Customize),> click Add section.
Select Scrolling banner.
Make necessary changes.
Save the settings.
Container:
Full width: Spans edge to edge across the browser window.
Fixed width: Keeps content within your site's content width for a more boxed layout.
Slide height: Choose how tall your banner appears.
Adapt to first image
Small
Medium
Large
Mobile layout: Set how the content appears on mobile view. This setting applies to all image slides.
Animations:
Enable zoom: Apply a zoom-in effect on the background image.
Enable parallax: Add a layered scrolling effect between the background and content.
Each Image slide is its own visual block. You can add multiple slides to scroll horizontally.
Image settings:
Desktop image: Upload a high-res image (1920x900 px recommended). This is your main visual.
Image overlay opacity: Use this slider (0–100%) to darken the image so your text stands out.
Content settings: Add the image slide content and a CTA button that links to a desired page.
Product: Optional. You can associate a featured product with the slide.
Select a product to display at the bottom of the image.
Select a color scheme for that product card.
Not supported natively in this section.
Yes. Each button can link to its own page, collection, product, or external URL.
Mobile image: Optional, mobile-optimized image (600x480 px recommended). Tip: Use a version that keeps text-free areas clear so overlayed text remains readable.
Learn how to set up Colors
