Announcement Bars

The Announcement Bar allows you to highlight important store updates, promotions, and links at the top of your website. Whether it’s free shipping, limited-time offers, or new features — this is your main attention-grabbing banner.

You can fully customize both its content and appearance, including animations, fonts, spacing, icons, links, and device visibility.Materia includes three types of announcement bars, each designed for a different purpose and layout. You can use one or all of them, depending on your store’s communication needs.

1. Upper Navigation Bar

This bar appears above the header, often used for static messages, contact details, language selectors, or small CTAs. It’s subtle, non-intrusive, and visible sitewide.

Key Features:

  • Static Text: One message only, ideal for phone numbers, support links, or delivery info.

  • Social Media Icons: Option to show social icons with custom colors, hover states, size, and spacing.

  • Custom Font & Font Weight: Easily match your branding.

  • Visibility Settings: Show/hide on mobile, homepage, or all pages.

  • Separator Line: Enable a thin bottom border to separate it from the header.

  • Section Padding: Top/bottom padding in px.

Example Use:

“📦 FREE shipping on orders over $100 — Contact: support@yourstore.com”

2. Basic Announcement Bar

A standard single-line banner that appears directly below your header. This is useful for storewide notices, seasonal promotions, and quick updates.

Key Settings:

  • Announcement Text (Desktop & Mobile): Independent messages for each device.

  • Background Type: Choose solid color or gradient, with angle control.

  • Text Color & Font: Set specific colors and custom fonts.

  • Font Size: Separate values for desktop and mobile.

  • Bar Height: Adjustable per device.

  • Link URL + Open in New Tab: Make the bar clickable.

  • Close Button: Option to allow users to dismiss the bar.

Example Use:

“Click and Collect is now available. Complimentary shipping over $400.”

3. Scrolling Announcement Bar

This is a multi-message marquee-style bar that cycles between 2–4 messages. It appears either above or below the header, depending on your layout.

Key Features:

  • Up to 4 Rotating Messages: Scroll horizontally with adjustable speed.

  • Autoplay + Pause on Hover

  • Separator Icon: Visually separate messages using icons.

  • Background Type: Solid or gradient, full color control.

  • Custom Fonts, Text Size, Message Spacing

  • Link Redirection: Redirect users when clicking anywhere on the bar.

  • Hide on Homepage: Useful if you want to keep the homepage clean.

Advanced Settings:

  • Scroll Speed (ms): Time between each scroll cycle.

  • Hover Effect / Background Animation: Optional visual polish.

  • Social Icon Options: If needed on this bar as well.

Example Use:

“FAST—FREE PACKING AND SHIPPING | SIGN UP FOR 10% OFF | NEW PRODUCTS LIVE NOW”

Best Practices

  • Use the Upper Bar for utility: contact info, email, store status.

  • Use the Basic Bar for alerts or single promos.

  • Use the Scrolling Bar for multi-message campaigns or rotating announcements.

  • Avoid stacking all three unless they serve distinct purposes. Stick to 1–2 for a clean user experience.

PreviousImage With Text ProNextHeader

Last updated