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.
Display Mode
The Layout setting controls how messages are shown.
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.
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).
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; see Free shipping bar 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 for its settings.
Last updated