This guide covers every setting in the Announcement Bar editor, organized by tab. Use this as a reference when creating or editing announcement bars in HashBar.
The editor has 9 tabs: Templates, Content, Position, Targeting, Countdown, Coupon, Schedule, Design, and Animation.
Note: Features marked (PRO) require HashBar Pro. All other features are available in the free version.
Tab 1: Templates
Start with a professionally designed template or create from scratch. Selecting a template pre-fills your bar with colors, fonts, and layout settings.
Free Templates (10)
Template
Description
Classic
Clean, simple announcement bar for general use
Sale Alert
Bold design for promotions and discount announcements
Free Shipping
Highlight shipping threshold offers
Info Banner
Informational banner for general updates
Countdown Sale
Sale announcement with countdown timer integration
Coupon Display
Designed to showcase coupon codes
Minimal Elegant
Clean, subtle design for professional sites
Urgent Alert
High-visibility design for important notices
Holiday Special
Festive design for seasonal promotions
Limited Stock
Create scarcity messaging for limited items
Pro Templates (8)
Template
Description
Trust Builder
Build credibility with social proof messaging
New Launch
Announce new products or features
Premium Gold
Luxurious design for premium offers
Summer Vibes
Bright, seasonal design for summer campaigns
Social Media
Drive social media engagement
Bundle Deal
Promote bundle offers and packages
VIP Exclusive
Exclusive offers for VIP customers
Early Bird
Early-bird discount announcements
Tab 2: Content
Configure your bar’s message text and call-to-action button.
Message Settings
Setting
Description
Options / Range
Message Text
The announcement text displayed on the bar
Up to 500 characters
Multiple Messages (PRO)
Add multiple messages that rotate automatically
Unlimited messages
Rotation Interval (PRO)
Time between message rotations
5 – 60 seconds
CTA Button Settings
Setting
Description
Options
Enable CTA Button
Toggle the call-to-action button
On / Off
Button Text
Text displayed on the button
Custom text
Button URL
Link destination when clicked
Any URL
Link Target
How the link opens
Same Window / New Tab
Tip: Use multiple rotating messages to show different offers. For example, rotate between a discount offer, a free shipping message, and a new arrival announcement.
Tab 3: Position
Control where and how your announcement bar appears on the page.
Position Settings
Setting
Description
Options
Bar Position
Display location on the page
Top / Bottom
Sticky Mode
Bar stays visible on scroll
On / Off
Close Button
Allow visitors to dismiss the bar
Enable / Disable
Close Button Text
Custom text for the close button
Custom text (e.g., “×”)
Close Position
Position of the close button
Left / Right
Reopen Button (PRO)
Show a button to reopen a closed bar
On / Off
Cookie / Dismiss Duration
Control how long the bar stays hidden after a visitor closes it.
Option
Description
Show on Reload
Bar reappears on page reload
Session Only
Stays hidden for the browser session
1 Hour – 1 Month
Various duration options
Never (Persistent)
Once closed, stays closed permanently
Tab 4: Targeting
Control who sees your announcement bar with precise targeting rules.
Page Targeting
Option
Description
All Pages
Show the bar on every page of your site
Homepage Only
Show only on the homepage
Specific Pages
Select exact pages where the bar should appear
Exclude Pages
Hide the bar from selected pages
Device Targeting
Option
Description
All Devices
Show on all screen sizes
Desktop
Show on desktop computers only
Tablet
Show on tablets only
Mobile
Show on mobile phones only
Geographic Targeting
Option
Description
All Countries
Show to visitors from all locations
7 Major Countries
Target visitors from 7 pre-configured countries
240+ Countries (PRO)
Target any country in the world
User Targeting
Option
Description
All Users
Show to everyone
Logged In
Show only to registered, logged-in users
Guests
Show only to non-logged-in visitors
Behavioral Targeting
Option
Description
Range
Time on Site
Show bar after visitor spends X seconds on the site
0 – 3600 seconds
Tab 5: Countdown
Add a countdown timer to your announcement bar to create urgency and drive immediate action.
Timer Types
Type
Description
Fixed Date
Counts down to a specific date and time you set
Evergreen (PRO)
A personal timer that starts fresh for each visitor
Daily Recurring (PRO)
Resets at a set time every day
Timer Styles
Style
Description
Simple
Clean inline number display
Digital (PRO)
Digital clock-style display
Box (PRO)
Numbers displayed in styled boxes
Circular (PRO)
Circular progress-style display
Display Options
Setting
Description
Show/Hide Units
Choose to display Days, Hours, Minutes, Seconds
Custom Labels
Rename unit labels (e.g., “Days” to “D”)
Separator
Character between units (e.g., “:”)
Position
Timer placement: Top, Left, Right, or Below message
Custom Text Before/After
Add text before or after the timer
Timezone
Use site timezone or visitor’s local timezone
Styling Options
Setting
Description
Background Color
Timer box background fill
Text Color
Number color
Label Color
Unit label color
Size
Small, Medium, or Large
PRO Feature: Evergreen timers create personal urgency for each visitor. The timer starts when they first see the bar, so every visitor gets the full countdown experience regardless of when they visit.
Tab 6: Coupon
Display discount codes on your announcement bar with one-click copy functionality.
Coupon Settings
Setting
Description
Enable Coupon
Toggle coupon display on/off
Coupon Code
The discount code to display
Copy Button
One-click copy to clipboard
Copy Button Text
Text on the copy button (e.g., “Copy”)
Copied Feedback Text
Text shown after copying (e.g., “Copied!”)
Auto-Copy on Click (PRO)
Copies code when the coupon area is clicked
Tab 7: Schedule
Schedule your announcement bar to appear and disappear at specific dates and times.
Date Range
Setting
Description
Start Date
When the bar becomes active
End Date
When the bar stops showing
Timezone
Use site timezone or visitor timezone
Recurring Schedule (PRO)
Setting
Description
Active Days
Select which days of the week the bar is active
Start Time
Daily start time for the bar
End Time
Daily end time for the bar
Tip: Use scheduling to prepare campaigns in advance. Set up your holiday sale bars weeks ahead and they’ll automatically appear and disappear at the right time.
Tab 8: Design
Customize the visual appearance of your announcement bar to match your brand.
Background
Option
Description
Solid Color
Single color background
Gradient (PRO)
Two-color gradient background
Image (PRO)
Background image with optional overlay
Typography
Setting
Description
Range
Font Family
Choose a font for the bar text
System fonts
Font Weight
Text thickness
300 – 700
Font Size
Size of the message text
12px – 32px
Text Alignment
Align text left, center, or right
Left / Center / Right
Text Color
Color of the message text
Color picker
Spacing
Setting
Description
Range
Bar Height
Overall height of the bar
40px – 200px
Padding
Inner spacing (top, right, bottom, left)
Customizable
Button Styling
Setting
Description
CTA Background Color
Button fill color
CTA Text Color
Button text color
CTA Hover Background
Button color on mouse hover
CTA Hover Text
Text color on mouse hover
CTA Font Size
Button text size
CTA Border Radius
Rounded corners for button
Close Button Color
Close (×) button color
Close Hover Color
Close button color on hover
Custom CSS (PRO)
Write custom CSS to fine-tune your bar’s appearance. Available CSS selectors include:
.hashbar-announcement-bar – Main bar container
.hashbar-announcement-cta – CTA button
.hashbar-announcement-message – Message text
.hashbar-announcement-close – Close button
Tab 9: Animation
Add smooth entry and exit animations to your announcement bar.
