The Announcement Bar is a slim notification strip typically positioned at the top of a website (above the main header), designed to showcase important, time-sensitive, or promotional messages to users. These messages can include promotions, free shipping offers, service updates, or urgent news.
You can add multiple announcements, which will be displayed in a rotating slider or marquee format to ensure each message gets visibility without taking up additional space.
In the theme editor (Customize), click the Sections button > In Header group, add Announcement bar section
The Announcement bar lets you display important messages or promotions at the top of your store, with options to customize text, design, and layout
To open the section settings, simply click on the section name
To customize the section, follow details guide bellow:
Show separator line: Check to display a separator line above or below this section.
Button close: Check to display a close button for this element.
Min height: Set the minimum height for this section.
Font size: Set the font size for the text within this section.
Design: How multiple announcements are shown on your site: Slider shows them one by one, while Marquee scrolls the text continuously across the bar.
Carousel settings
Effect slider: This option allow sets the transition style: Fade for smooth fading, or Slide for a direct sliding motion
Autoplay: Enable this option to allow the slideshow when the page loads.
Pause on hover: Check to pause autoplay when the user hovers over the slideshow
Marquee
Spacing between items: Adjusts the horizontal space (in pixels) between each announcement message in the scrolling line.
Speed factor: Controls how fast the text scrolls across the screen. Lower values = slower speed; higher values = faster.
Direction: Sets the scrolling direction of the marquee. Options include Right to left (default) or Left to right.
Pause when hover: When enabled, the marquee animation will pause if the user hovers their mouse over the announcement bar.
Layout
Display colors by section: Lets you assign a custom color scheme to this section, choose a Colors schema for consistent styles, and adjust the Background opacity from transparent (0) to fully opaque (1)
Make section full width: Check to stretch this section to full width of the screen. If unchecked, the content will be constrained to the page's maximum content width.
The Announcement bar consists of multiple Announcement blocks. Each block allows you to display a specific message, promotion, or countdown timer
To add Announcement block, click the Add block button (plus icon ➕) under the Announcement bar. Then click section name to open section settings.
Main options include:
Banner link: Enter the URL the banner will link to when clicked.
Banner content: Enter the main content to be displayed on the banner. This can include text, custom HTML, or other rich elements.
Place here text you want to see in the header banner. You can use shortocdes: [countdown], [icon_arrow]
Adding a bottom border on link: Check to add a bottom border to links within the banner. This helps to visually emphasize the links.
Date countdown: Select the end date and time for the countdown. The countdown will display the time remaining until this date.
Text day countdown: Enter the text to display alongside the countdown
Follow this guide video: