User Guide

Search limit to:






Scrolling Announcement Bar

by Admin on Sep 24, 2025

The Scrolling announcement bar section (only able to add at Header) creates a dynamic, eye-catching banner that moves across your store header to showcase promotions, announcements, or updates. 


1. Section Components

Section Scrolling announcement bar Create a moving banner that displays promotional elements with a scrolling effect.
Available block Text Show simple text content with adjustable sizing
Icon Add visual icons from built-in library or custom SVG
Image Show images with custom dimensions and styling
Button Create clickable buttons with different styling options

2. Location & Setup

To add & set up the Scrolling announcement bar section:

  • Open the Shopify Theme Editor (Online Store > Themes > Customize).
  • Decide where you want to place the new section in Header.
  • Click "Add Section".
  • Select "OT: Scrolling announcement bar.

3. Highlight Features

  • Smooth Animation: Adjustable scrolling speed and direction control
  • Rich Content Blocks: Mix text, icons, buttons, and images
  • Hover Controls: Pause animation when users hover over the banner

4. Common Use Cases

🤔 How to set up the Scrolling announcement bar?

If you don't know where to start to set up this section, just follow this:

STEP 1:

Add the Scrolling announcement bar section to the Header.

STEP 2: Add/delete, rearrange the blocks inside the section.

Add more, delete the unused, or reorder Text, Icon, Button, and Image blocks to make the section fully yours.

STEP 3: Change the content of each block:

Click on the block to open its settings panel. Depending on the block you use, the setting might be slightly different.

 Text block
  • Enter Text to display on the scrolling announcement bar.
  • Adjust Text size, Text color, and block padding.
Icon block
  • Choose from available icons or use custom icon with SVG code.
  • Adjust Icon height and Icon color.
Image block Upload Image to the section and adjust its ratio, height and edges.
Button block
  • Set up the button on the scrolling label by entering Button label and Button link.
  • Style the button and choose its animation.
  • Choose Colors for button elements.

STEP 4: Adjust the scrolling effect:

Click on the Scrolling announcement bar section, then find the Scrolling setting group. You can change the Speed, Direction of the scrolling effect, and enable Pause on hover to pause the banner scrolling when hovered.

Note: The more seconds you choose at Speed, the slower the announcement bar scrolls.

STEP 5: Click "Save" when done.

🤔 How to customize the Scrolling announcement bar's look?    

To customize the look of the section, do this:

STEP 1:

Click on the Scrolling announcement bar section to open its settings panel.

STEP 2:

Scroll down to Colors, Desktop layout and Mobile layout settings groups to adjust:

  • Color for background, line and borders.
  • Content width, spacing, and padding of the section.


STEP 3: Click "Save" when done.

5. Layout Recommendations  

The Scrolling announcement bar section can create appealing layouts. If you want support to set up the layouts, don't hesitate to chat with us!

📂 Layout recommend  #1


Check out demo here.

📂 Layout recommend  #2


Check out demo here.

📂 Layout recommend  #3


Check out demo here.

6. Support Information

Need help? Contact our support team at Omni Themes Support .