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.
Entry Animations #
| Animation | Description |
|---|---|
| Slide Down | Bar slides in from above |
| Fade In (PRO) | Bar fades into view |
| Slide Up (PRO) | Bar slides in from below |
| Bounce In (PRO) | Bouncy entrance effect |
| Zoom In (PRO) | Bar scales from small to full size |
Exit Animations #
| Animation | Description |
|---|---|
| Slide Out Up | Bar slides out upward |
| Fade Out (PRO) | Bar fades away |
| Slide Out Down (PRO) | Bar slides out downward |
| Bounce Out (PRO) | Bouncy exit effect |
| Zoom Out (PRO) | Bar scales down and disappears |
Animation Settings #
| Setting | Description | Range |
|---|---|---|
| Duration | How long the animation takes | 200ms – 2000ms (in 100ms increments) |
Related Guides #
- Getting Started with Announcement Bar – Quick start guide for first-time users
- Countdown Timer Guide – Deep dive into timer types, styles, and use cases
- Coupon Display Guide – Detailed coupon configuration and WooCommerce integration
- Targeting & Triggers Guide – Advanced targeting strategies
- Analytics Guide – Track and measure your bar’s performance
- A/B Testing Guide – Test variants to find your best performing bar (PRO)
- Use Cases & Recipes – Real-world examples with step-by-step configurations
For more details and advanced features, visit HashBar.
