How to Create Shopify Announcement Bars

What is an Announcement Bar

An announcement bar is a thin horizontal strip that appears at the very top of your website, above the header navigation. It is designed to grab attention and communicate time-sensitive or important information to every visitor.

Unlike pop-ups, announcement bars are non-intrusive. They do not interrupt the shopping experience but remain visible as a constant reminder. This makes them perfect for ongoing promotions, shipping thresholds, and store-wide messages.

Research shows that announcement bars can significantly impact conversion rates. A well-crafted free shipping message alone can increase average order value by 30% or more, as customers add items to reach the threshold.

Built-in Announcement Bar

Most Shopify themes include an announcement bar feature out of the box. Here is how to set it up using the Dawn theme as an example. Other themes follow a similar process.

Setting Up Your Announcement Bar

1. 1
   Open the theme customiser

   Go to Online Store, then Themes, and click Customise on your active theme.

2. 2
   Find the Header section

   In the left sidebar, click on Header. The announcement bar is usually a block within this section.

3. 3
   Enable the announcement bar

   Look for an Announcement bar or Announcement block and ensure it is enabled.

4. 4
   Enter your message

   Type your announcement text. Keep it concise, typically under 60 characters.

5. 5
   Add a link (optional)

   Link to a relevant page like your sale collection or shipping information.

6. 6
   Customise the appearance

   Most themes let you choose background colour, text colour, and font size.

Multiple Announcements

Some themes support rotating between multiple announcements, which is perfect when you have several messages to share. If your theme does not support this natively, you can achieve it with custom code or an app.

Theme-Based Rotation

Modern themes like Dawn 2.0 and newer support multiple announcement blocks that automatically rotate. To set this up:

• •Add multiple Announcement blocks within your Header section
• •Each block can have its own text, link, and colour scheme
• •The theme will automatically cycle between them
• •Rotation speed is typically configurable in Theme Settings

Custom Rotation with JavaScript

For themes without built-in rotation, you can add this functionality with custom code. Here is a simple implementation:

<div class="announcement-bar-rotating">
  <div class="announcement-message active">
    Free UK delivery on orders over £50
  </div>
  <div class="announcement-message">
    20% off everything with code SAVE20
  </div>
  <div class="announcement-message">
    New arrivals just dropped
  </div>
</div>

<style>
  .announcement-message {
    display: none;
    text-align: center;
    padding: 10px;
  }
  .announcement-message.active {
    display: block;
  }
</style>

<script>
  const messages = document.querySelectorAll('.announcement-message');
  let current = 0;

  setInterval(() => {
    messages[current].classList.remove('active');
    current = (current + 1) % messages.length;
    messages[current].classList.add('active');
  }, 4000);
</script>

Custom Announcement Bar

For complete control over design and functionality, you can build a custom announcement bar. This approach is best if you need features like countdown timers, dismissible banners, or complex targeting.

Creating a Custom Section

Create a new section file in your theme for a fully customisable announcement bar:

{%- if section.settings.show_announcement -%}
<div
  class="custom-announcement"
  style="
    background-color: {{ section.settings.bg_color }};
    color: {{ section.settings.text_color }};
  "
>
  <div class="custom-announcement__content">
    {%- if section.settings.link != blank -%}
      <a href="{{ section.settings.link }}">
        {{ section.settings.text }}
      </a>
    {%- else -%}
      {{ section.settings.text }}
    {%- endif -%}
  </div>

  {%- if section.settings.dismissible -%}
    <button
      class="custom-announcement__close"
      onclick="this.parentElement.remove()"
    >
      &times;
    </button>
  {%- endif -%}
</div>
{%- endif -%}

<style>
  .custom-announcement {
    position: relative;
    padding: 12px 40px;
    text-align: center;
    font-size: 14px;
  }
  .custom-announcement a {
    color: inherit;
    text-decoration: underline;
  }
  .custom-announcement__close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: inherit;
  }
</style>

{% schema %}
{
  "name": "Custom Announcement",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": "Show announcement",
      "default": true
    },
    {
      "type": "text",
      "id": "text",
      "label": "Announcement text",
      "default": "Free delivery on orders over £50"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background colour",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text colour",
      "default": "#ffffff"
    },
    {
      "type": "checkbox",
      "id": "dismissible",
      "label": "Allow customers to dismiss",
      "default": false
    }
  ]
}
{% endschema %}

Adding a Countdown Timer

Countdown timers create urgency and can significantly boost conversions for limited-time offers. Here is how to add one:

<div class="announcement-countdown">
  <span>Sale ends in: </span>
  <span id="countdown-timer"></span>
</div>

<script>
  const endDate = new Date('2024-03-31T23:59:59').getTime();

  const timer = setInterval(() => {
    const now = new Date().getTime();
    const distance = endDate - now;

    if (distance < 0) {
      clearInterval(timer);
      document.getElementById('countdown-timer')
        .innerHTML = 'EXPIRED';
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24))
      / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60))
      / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById('countdown-timer').innerHTML =
      days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's';
  }, 1000);
</script>

Design Best Practices

The most effective announcement bars follow proven design principles. Here is what works best:

Conversion Optimisation

A well-optimised announcement bar can significantly impact your store's performance. Here are strategies to maximise conversions:

Message Hierarchy

Not all messages are equal. Prioritise based on what drives the most revenue:

1. 1.Free shipping thresholds: Consistently the highest impact message
2. 2.Active promotions with discount codes: Creates urgency
3. 3.Limited-time offers with countdown: FOMO drives action
4. 4.New arrivals or restocks: Best for engaged customers

Effective Copy Formulas

Seasonal Strategies

Update your announcement bar to match the shopping calendar:

• •Black Friday / Cyber Monday: Focus on your biggest discount
• •Christmas: Emphasise delivery deadlines
• •January: New year sales and clearance
• •Non-peak periods: Free shipping or loyalty rewards

Common Mistakes

Avoid these frequent announcement bar mistakes that hurt rather than help your conversions:

Next Steps

Now that you understand how to create effective announcement bars, here is how to continue improving:

1. 1
   Set up your first announcement bar

   Start with a free shipping threshold message. It is proven to work.

2. 2
   Track the impact

   Monitor your average order value before and after. Most stores see a lift.

3. 3
   Test different messages

   Try different copy and colours to find what resonates with your audience.