Scrolling banner

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.

#How to add a Scrolling banner section to your Shopify store

#How to edit a Scrolling banner section

#Section 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.

#Block settings

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.
  • Mobile image: Optional, mobile-optimized image (600x480 px recommended).
    🌟 Tip: Use a version that keeps text-free areas clear so overlayed text remains readable.
  • 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.
  👀 Learn how to set up Colors

#FAQs

#Can I add video backgrounds to this section?

Not supported natively in this section.

#Can I link each slide to a different collection?

Yes. Each button can link to its own page, collection, product, or external URL.