# Scrolling banner

<Video src="https://docs-assets.foxecom.app/hyper-theme/ani1_AkeVpobA.mp4" autoPlay="true" loop="true" muted="true" aria-label="image" />

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

<Hint type="success">

Steps:

1. In the theme editor (**Customize**),> click **Add section.**
2. Select **Scrolling banner.**
3. Make necessary changes.
4. **Save** the setting&#x73;**.**

</Hint>

## How to edit a Scrolling banner section

### Section settings

* **Container**:&#x20;
  * **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.

<Hint type="info">

Go to **Theme settings > Layout** to set your **Page width**.

</Hint>

* **Slide height**: Choose how tall your banner appears.
  * Adapt to first image
  * Small&#x20;
  * Medium
  * Large
* **Mobile layout:** Set how the content appears on mobile view. This setting **applies to all image slides**.
* **Animations**:&#x20;

  * **Enable zoom**: Apply a zoom-in effect on the background image.



  <Video src="https://docs-assets.foxecom.app/hyper-theme/Untitled%20design%20(30)_NImzgygO.mp4" autoPlay="true" loop="true" muted="true" aria-label="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**:&#x20;
  * **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](https://docs.foxecom.com/hyper-theme/theme-settings/colors)

![image](https://docs-assets.foxecom.app/hyper-theme/image_HD56dQ2Q.png)

## FAQs

### **Can I add video backgrounds to this section?**

Not supported natively in this section.&#x20;

<Hint type="info">

For video, consider using the [Video hero](https://docs.foxecom.com/hyper-theme/theme-sections/video-hero) or [Slideshow](https://docs.foxecom.com/hyper-theme/theme-sections/slideshow) section.

</Hint>

### **Can I link each slide to a different collection?**

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