> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/header-group/announcement-bar.md). # Announcement bar A thin bar at the very top of every page for short, high-priority messages like promotions, free-shipping offers, discount codes, or a countdown to a sale. {% embed url="" %} ![Announcement bar overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-309383b68119d97e74ccbfa4ce6828b27cf3cc89%2Fheader-group-announcement-bar-overview.png?alt=media) *** ## Display Mode The **Layout** setting controls how messages are shown. {% tabs %} {% tab title="Slider" %} ![Announcement bar in slider mode](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-1f68c7cdad91de6003438e40ae7e1c54090f09ac%2Fheader-group-announcement-bar-slider.png?alt=media) Shows one message at a time and rotates between them. Set how long each message stays on screen, whether the rotation pauses while the cursor is over the bar, whether the previous/next arrows are always visible or only on hover, and which arrow icon to use. {% endtab %} {% tab title="Scrolling" %} ![Announcement bar in scrolling mode](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-85ace6effb89e781565622204e2c53d526a26d2f%2Fheader-group-announcement-bar-scrolling.png?alt=media) Runs all messages together in a moving line that never stops. Set the scroll speed, the direction it moves, and the spacing between messages (separately for desktop and mobile). {% endtab %} {% endtabs %} *** ## Background Choose whether the bar has a plain background or a background image (you can set a separate image for mobile). With an image you can turn on an overlay color to keep the text readable. *** ## Bottom Separator Turn on **Bottom separator** to add a line under the bar, separating it from the header below. *** ## Color The **Color scheme** sets the text, icon, and background colors for the bar. Pick a scheme that stands out against your background. *** ## Padding Set the top and bottom padding to control the bar's height. Turn on **Custom for mobile** to use different values on smaller screens. *** ## Announcement Blocks Add one or more blocks inside the bar. Each block is a message. In slider mode each block is a slide; in scrolling mode they all move together. ### Text A simple line of text for a policy, tagline, or any short message. * **Text** — The message to show. * **Font** — The font used for the text. * **Font size** — The text size. * **Letter spacing** — The spacing between letters. * **Text color** — The text color. ### Discount code Shows a promo code with a one-click copy button. * **Text** — An optional message shown next to the code. * **Coupon code** — The code shoppers copy; can be made bold and given a background. * **Button** — An optional button with its own label, link, style, and icon. * **Gap** — The spacing between elements, set separately for desktop and mobile. ### Free shipping progress Shows the free-shipping message (how much more to spend), updating whenever the cart changes. The threshold is set in [Theme settings → Cart](/helix/theme-settings/cart.md); see [Free shipping bar](/helix/features/free-shipping-bar.md) for the full setup. * **Alignment** — The horizontal alignment of the message. * **Text size** — The message size. * **Text color** — The message color. * **Padding** — The top and bottom spacing, with a custom option for mobile. ### Countdown timer Counts down to a fixed date or on a repeating schedule. * **Text** — An optional message shown next to the timer. * **Timer type** — Count down to a fixed end date, or run on a repeating schedule. * **Timer style** — The look of the timer, with an optional background and corner radius. * **Timer text** — The font, size, letter spacing, and color of the countdown digits. * **Button** — An optional button with its own label, link, style, and icon. * **Gap** — The spacing between elements, set separately for desktop and mobile. * **Hide when finished** — Hides the block once a fixed-date timer runs out. ### Icon A small mark from the icon library, or your own uploaded SVG, placed between messages. In scrolling mode it runs along with the text, making a neat separator; in slider mode it shows as a slide of its own. See [Icon](/helix/theme-blocks/basic/icon.md) for its settings. *** {% hint style="info" icon="headset" %} **Need help?** Whether you have a question, run into an issue, or just need some guidance, our support team is here to help. Chat with us Submit a ticket {% endhint %}