Announcement bar

The Announcement Bar is a prominent section within your Shopify theme, strategically placed in the Header Group. It functions as a dynamic space allowing you to display crucial updates, promotions, or essential messages directly to visitors on your online store.

This feature provides a visually impactful way to communicate time-sensitive information and engage effectively with your audience.

How to set-up announcement bar?

  • Here, you have the flexibility to enable the sticky feature, making the Announcement Bar persistently visible as users scroll. Tailor the appearance further by selecting an appropriate layout by sidebar or scrolling text.

    Choose your preferred message navigation style whether it's a slider or Scrolling text– to enhance the visual appeal. Adjust the scroll speed to control the pace at which messages transition, creating a seamless and engaging experience for your visitors.


  • Language Selector

    • Show/Hide Language Selector: This option enables you to display or hide the language selector in the announcement bar.

      Country Selector

      Show/Hide Country Selector: This option lets you display or hide the country selector in the announcement bar.

      Show/Hide Country Flag and Country Name or Initials: When the country selector is enabled, you can choose to display either the full country name with its flag or just the country initials. This provides a clean and customizable look depending on your design preferences.

      Sublinks Settings

      Social Links

      • Show Social Links: Social media links will only appear if they are updated in the global theme settings. Ensure you have your social media URLs set in the global settings for platforms like Facebook, Twitter, Instagram, etc. This makes it easy for users to connect with your social media profiles directly from the announcement bar.

        Custom Links
      • Add Custom Links: You can add up to three custom links (Custom Link 1, Custom Link 2, Custom Link 3) in the announcement bar. Each link can be customized with the relevant information, such as the link text and URL, providing quick access to key pages or external sites
  • Personalize the Announcement Bar's aesthetics by defining a color scheme that complements your store's overall design. Explore dedicated theme settings for the Announcement Bar to ensure it seamlessly integrates with your chosen theme.
Enable Sticky Bar

Want your announcement to stay visible as customers scroll down your site?

Turn this on to make the bar "stick" to the top of the page—it’s perfect for can’t-miss messages like sales, shipping deals, or important notices.
Layout Width – Full or Fixed

Decide how wide your announcement bar should be:

Full Width:

  • Stretches the bar edge-to-edge across the screen.
  • Hides language selectors, region selectors, and sublinks to keep things clean.
  • You can use the Desktop Carousel Width slider to control how wide the content inside the bar appears (e.g., centered or stretched).

Fixed Width :

  • Keeps the bar aligned with your site’s main content area.
  • Allows space for language selectors, country selectors, and sublinks.
  • You can still use the Desktop Carousel Width slider, but the content won’t stretch to the full screen—it will adjust within the available space.
Stack timer and content (Desktop) Controls timer layout ( works when timer block is added) : Vertical Stack makes the timer and message occupy separate lines for high visibility; Horizontal keeps them side-by-side for a single, clean strip.
Desktop Carousel Width

Controls how wide your announcement content appears on desktop.

  • Measured in %, this slider lets you decide how much horizontal space the message should take.
  • Works best when using Full Width layout—set to 100% to stretch across or reduce for a more centered look.
  • In Fixed Width, this still works, but the content is limited to the container space (especially when using sublinks or language selectors).
Layout – Slider or Scrolling Text

Choose how your announcements display:

  • Slider: Shows one message at a time and switches between them like a slideshow.
  • Scrolling Text: All messages scroll from right to left in a ticker-style animation.
Scroll Speed (Scrolling Text only)

Controls how fast the text scrolls across the screen.

  • Set in seconds—the higher the number, the slower it scrolls.
  • Only applies if you’re using the Scrolling Text layout.
Carousel Animation (Slider only)

Enables smooth, automatic transitions between slides.

  • Turn this on if you want your slider messages to change automatically.
  • Works hand-in-hand with Change Slides Every.
  • If this is off, the first message will stay put unless the customer manually changes it.

⚠️ Want an auto-rotating slider? Make sure Slider layout + Carousel Animation are both on!
Change Slides Every (Slider only)

Controls how often the message changes in Slider layout.

  • Also set in seconds.
  • Shorter times = faster rotation, longer times = more reading time.
  • Only applies to Slider layout.

For users with advanced customization needs, the Announcement Bar offers options for custom CSS, providing a high level of control over the visual presentation.


Block Settings

To configure this section, navigate to the Header Group settings in your Shopify theme customization. Within the "Announcement Bar" section, find the "Announcement" block.

With these customization options, you can effortlessly set up the Announcement Bar to effectively convey important messages and updates, enhancing communication and engagement on your storefront.


Timer Block

Year, Month, Day, Hours, Minute Use these fields to define the exact date and time your promotion will end. The timer will count down to this specific moment.
Time zone Crucial for accuracy! Always select your shop's official time zone (e.g., "Shop time zone"). This prevents confusion and ensures the timer ends simultaneously for everyone, regardless of where the customer is browsing from.
When timer expires...

How the timer behaves after the sale ends:

• Set timer to zero: The timer will stop at 00:00:00  and remain visible. Use this if you want the banner to remain as a record of the sale.

• Hide timer (often an option): The entire timer block disappears from the page. Use this for the cleanest look once the promotion is truly over.
Text The label right next to the countdown (e.g., "Offer ends in:" or "Time left to shop:").
Text Color Sets the color of the countdown numbers and the label text. Use a high-contrast color (like bright yellow #DBFF00  or white) to make the numbers jump off the bar.
Background Color Sets the background color specifically for the timer box. Use a contrasting color (like black #313131 ) to make the timer stand out from the rest of the banner or product page.
Spacing (Desktop) & Gap Controls the vertical space around the timer and the small horizontal space between the elements (like the number and the label), ensuring the timer is neat and easy to read on desktop.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.