4 display types for the announcement bar: Simple, Fade, Marquee, and Timer. Configuration and customization.
Announcement Bar
The announcement bar is a thin strip displayed above the header. It lets you communicate important messages: promotions, free shipping, new arrivals, events. Scale Theme offers 4 different display types.
4 Display types
| Type | Description | Best for |
|---|---|---|
| Simple | Static message, always visible | A single important message (shipping, promo) |
| Fade | Multiple messages that alternate with a fade effect | 2-3 different messages in rotation |
| Marquee | Message that scrolls horizontally in a continuous loop | Long messages, dynamic effect |
| Timer | Countdown with message | Limited-time promotions, launches |
Simple
A static message displayed permanently. The most direct and readable format.
| Setting | Description | Options |
|---|---|---|
| Message | Text to display | Free text |
| Link | URL on click (the entire bar is clickable) | URL |
| Icon | Icon before the text | 20+ icons / None |
Fade
Multiple messages alternate with a crossfade effect. Each message stays visible for a few seconds before giving way to the next one.
| Setting | Description | Options |
|---|---|---|
| Messages | List of messages | Up to 5 messages |
| Duration | Display time per message | 3s - 10s |
| Transition speed | Fade transition duration | Fast / Normal / Slow |
| Pause on hover | Stop rotation on hover | Yes / No |
Marquee
The text scrolls horizontally in a continuous loop, from right to left. Creates a dynamic effect and allows for longer messages.
| Setting | Description | Options |
|---|---|---|
| Message | Scrolling text | Free text |
| Speed | Scroll speed | Slow / Normal / Fast |
| Pause on hover | Stop scrolling on hover | Yes / No |
| Repeat | Repeat the message for continuous scrolling | Yes / No |
| Separator | Character between repetitions | Free text (e.g., " --- " or " * ") |
Timer
A countdown timer integrated into the announcement bar. Combines a message with a timer that counts down to a target date.
| Setting | Description | Options |
|---|---|---|
| Message | Text before or after the timer | Free text |
| End date | Target date and time | Date picker |
| Format | Timer display | Days/Hours/Minutes/Seconds |
| Timer position | Placement relative to the text | Before / After / Below |
| Hide after expiration | Hide the bar when the timer reaches zero | Yes / No |
| Expiration message | Text displayed when the timer reaches zero | Free text |
Common settings
Color palette
| Setting | Description | Options |
|---|---|---|
| Color palette | Bar colors | Palette selection |
Link
| Setting | Description | Options |
|---|---|---|
| Link | Destination URL | URL |
| Open in new tab | Link behavior | Yes / No |
When a link is set, the entire announcement bar is clickable. A pointer cursor indicates to the visitor that the bar is interactive.
Visibility
| Setting | Description | Options |
|---|---|---|
| Desktop | Show on desktop | Yes / No |
| Mobile | Show on mobile | Yes / No |
| Dismissible | Visitor can close the bar | Yes / No |
Best practices
- One clear message: The announcement bar should communicate a single concept at a time. "Free shipping from $50" is better than "Free shipping + code PROMO15 + new arrivals every week"
- Keep it short: Keep messages under 60 characters so they are readable on mobile without truncation
- Real urgency: Only use the Timer for promotions with an actual end date. Fake urgency damages trust
- Contrast: Make sure the text is readable on the background. Minimum contrast ratio of 4.5:1
- Don't overdo it: The announcement bar is premium real estate. Only put the most important information there