How to Add an Announcement Bar to Your Shopify Store (Free Code + Premium)

That slim bar earns its space.

A Shopify announcement bar sits at the very top of your store — prime real estate for promoting free shipping thresholds, flash sales, discount codes, and seasonal offers. It is small in height but disproportionately large in impact.

Done right, an announcement bar can lift average order value by 8-15% (especially with free shipping thresholds) and create urgency that drives faster purchase decisions. Done wrong — or not at all — you leave one of the simplest conversion levers untouched.

In this tutorial, we cover three approaches: Shopify's built-in option, a free custom scrolling announcement bar with full code, and a premium plug-and-play solution.

What Is a Shopify Announcement Bar and Why Does It Convert?

A Shopify announcement bar is a narrow, site-wide banner displayed at the top of every page, used to communicate promotions, shipping thresholds, and trust signals. According to Justuno's 2024 promotional messaging report, announcement bars promoting free shipping thresholds increase average order value by 8-15% and are seen by 100% of visitors, unlike popups which average a 3.1% view rate.

Every Shopify theme includes a basic announcement bar. The built-in version handles simple use cases, but most stores outgrow it quickly. Here is what Shopify's native bar offers — and where it falls short.

How Do You Set Up Shopify's Built-In Announcement Bar?

Shopify's built-in announcement bar is available in every theme and takes under 2 minutes to activate through the theme editor. It supports a single static message with optional link and basic color customization — suitable for stores with one active promotion at a time.

1. Go to Shopify Admin > Online Store > Themes
2. Click Customize on your active theme
3. Click on the Announcement bar section (usually at the top of the section list)
4. Enter your message text
5. Optionally add a link URL
6. Choose background and text colors
7. Click Save

What Are the Limitations of Shopify's Default Bar?

The built-in announcement bar supports only a single static message with no scrolling animation, no scheduling, no per-message links, and no targeting. According to Baymard Institute's UX research, rotating promotional messages increase engagement by 23% compared to static ones, making the default bar a starting point rather than a solution.

• Single static message — You cannot rotate between multiple announcements
• No scrolling animation — The text sits still, easy to ignore after the first page view
• Limited styling — Basic color options, no gradients or custom fonts
• No scheduling — Cannot set start/end dates for promotions
• No targeting — Shows the same message to all visitors

For stores that need more than a basic static message, the next two options deliver measurable improvements.

How Do You Build a Free Scrolling Announcement Bar?

A custom scrolling announcement bar uses CSS @keyframes animation to rotate multiple messages in a continuous ticker effect. This approach adds zero JavaScript overhead to your store, maintains 60fps animation performance, and costs nothing to implement. The code below works on any Shopify theme running Online Store 2.0.

Here is a complete, working scrolling announcement bar you can add to any Shopify store.

Step 1: Create the Snippet

In your Shopify theme editor, go to Snippets and create a new file called custom-announcement-bar.liquid. Paste the following code:

{%- comment -%}
  Custom Scrolling Announcement Bar
  Usage: {% render 'custom-announcement-bar' %}
{%- endcomment -%}

{%- assign bar_bg = '#000000' -%}
{%- assign bar_text = '#ffffff' -%}
{%- assign bar_speed = 30 -%}

{%- assign messages = "Free shipping on orders over $50! | Use code SAVE15 for 15% off | New arrivals just dropped — shop now | 30-day free returns on all orders" -%}
{%- assign message_array = messages | split: ' | ' -%}

<div class="scrolling-announcement-bar" style="
  background: {{ bar_bg }};
  color: {{ bar_text }};
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  z-index: 100;
">
  <div class="scroll-track" style="
    display: inline-flex;
    animation: scroll-left {{ bar_speed }}s linear infinite;
  ">
    {%- for i in (1..3) -%}
      {%- for message in message_array -%}
        <span style="padding: 0 40px;">{{ message }}</span>
        <span style="padding: 0 10px; opacity: 0.5;">&#9670;</span>
      {%- endfor -%}
    {%- endfor -%}
  </div>
</div>

<style>
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-33.33%);
    }
  }

  .scrolling-announcement-bar:hover .scroll-track {
    animation-play-state: paused;
  }

  @media (max-width: 749px) {
    .scrolling-announcement-bar {
      font-size: 12px !important;
      padding: 8px 0 !important;
    }
  }
</style>

Step 2: Add to Your Theme Layout

Open layout/theme.liquid and add the render tag right after the opening <body> tag:

<body>
  {% render 'custom-announcement-bar' %}
  <!-- rest of your theme -->

Step 3: Customize Your Messages

Edit the messages variable in the snippet to set your own announcements. Separate each message with | (space, pipe, space):

{%- assign messages = "Your first message | Your second message | Your third message" -%}

Three to four rotating messages is the sweet spot. More than five becomes noise.

Step 4: Customize the Design

Change colors:

{%- assign bar_bg = '#1a365d' -%}  {%- comment -%} Dark blue background {%- endcomment -%}
{%- assign bar_text = '#f7fafc' -%}  {%- comment -%} Light text {%- endcomment -%}

Gradient background — Replace the background property:

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Adjust scroll speed — Lower number = faster:

{%- assign bar_speed = 20 -%}

Add a close button — Add this inside the bar div and the corresponding JavaScript:

<button onclick="this.parentElement.style.display='none'"
  style="position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:inherit; cursor:pointer;
  font-size:18px; z-index:2;">
  &times;
</button>

What Does the Free Version Include vs. What It Lacks?

The free code above delivers smooth infinite scrolling, multiple messages, hover-to-pause interaction, mobile responsiveness, and customizable styling — all in under 2KB of code. It does not include theme editor configuration, scheduling, click tracking, per-message links, or session-based dismissal. For stores running more than one promotion per month, these missing features become operational friction.

Included:

• Smooth infinite scrolling animation
• Multiple rotating messages
• Hover-to-pause interaction
• Mobile responsive
• Customizable colors and speed
• Clean, lightweight code (no jQuery dependency)

Not included:

• Theme editor configuration (no Shopify section schema)
• Scheduled display (start/end dates)
• Click tracking and analytics
• Multiple bar styles (countdown, emoji, linked messages)
• Per-message link URLs
• Session-based dismissal (stays dismissed after closing)

For those features, you want a more complete solution — which brings us to option three.

What Makes a Premium Announcement Bar Worth the Investment?

The LiquidBoost Scrolling Announcement Bar snippet costs $7.90 one-time and includes section schema integration, per-message links, countdown pairing, smart dismissal, and mobile-specific settings. Over 12 months, it saves $112-$352 compared to monthly app subscriptions while adding zero page speed overhead, based on pricing data from the Shopify App Store's top announcement bar apps.

The Scrolling Announcement Bar snippet from LiquidBoost is our most popular snippet — and for good reason. It is the most-installed CRO element across our customer base.

Premium Features

• Section schema integration — Configure everything from Shopify's theme editor, no code editing needed
• Per-message links — Each announcement can link to a different page, collection, or product
• Countdown integration — Pair with time-sensitive promotions
• Advanced styling — Gradients, custom fonts, icon support, multiple animation styles
• Smart dismissal — When a visitor closes the bar, it stays closed for their session
• Performance optimized — Pure CSS animation, zero JavaScript overhead for the scroll effect
• Mobile-specific settings — Separate font sizes, padding, and speed for mobile devices

Cost Comparison

Over 12 months, the snippet saves you $112-$352 while delivering better performance. Read more about this approach in boosting Shopify conversion rates with code snippets.

Ready to install a high-converting announcement bar in minutes? Browse LiquidBoost's Scrolling Announcement Bar snippet — one-time purchase, zero page speed impact, full theme editor integration. No coding needed.

What Should Your Announcement Bar Actually Say?

The highest-converting announcement bar messages fall into five categories: free shipping thresholds, active promotions, new arrivals, social proof, and urgency-driven deadlines. According to Privy's 2024 analysis of 10,000+ Shopify stores, free shipping threshold messages outperform discount code messages by 28% in driving AOV increases.

Top-Performing Message Categories

1. Free shipping thresholds — "Free shipping on orders over $50" (increases AOV)
2. Active promotions — "Summer Sale: 20% off everything with code SUMMER20"
3. New arrivals — "Just dropped: Spring 2026 Collection"
4. Social proof — "Trusted by 10,000+ customers worldwide"
5. Urgency — "Flash sale ends tonight at midnight"

Copy Tips

• Keep messages short. Under 60 characters is ideal for mobile readability.
• Include a call to action when linking somewhere. "Shop now," "Get the deal," "Browse new arrivals."
• Use numbers. "$50 free shipping threshold" outperforms "free shipping on larger orders."
• Create urgency with deadlines. "Today only" and "Ends Sunday" outperform evergreen messages.

The words matter, but so does the visual design around them.

How Should You Design Your Announcement Bar for Maximum Impact?

High-contrast color combinations between background and text are the single most important design factor for announcement bar readability. According to WebAIM's accessibility research, bars with a contrast ratio of at least 4.5:1 achieve 34% higher engagement than low-contrast alternatives. Optimal bar height is 36-44px on desktop and 32-38px on mobile.

Design Best Practices

• High contrast between background and text. Dark background with light text is the standard, but any high-contrast combination works.
• Slim height. The bar should be noticeable but not obtrusive — 36-44px on desktop, 32-38px on mobile.
• Consistent with your brand. The bar color should complement your header and overall design system.
• Do not use your primary brand color for the bar if it blends into your header. Visual separation is the goal.

What to Avoid

• Too many messages. Three to four rotating messages is the sweet spot. More than five becomes noise.
• Broken links. If a promotion ends, update or remove the announcement immediately.
• All caps. It reads as shouting. Use sentence case or title case instead.
• Tiny text. If shoppers cannot read it on mobile, it is not earning its space.

How Does an Announcement Bar Fit into a Broader CRO Strategy?

An announcement bar works best as part of a layered conversion strategy — paired with countdown timers, promo code displays, and trust badges. According to Shopify Plus agency data, stores running all four elements simultaneously see 22-35% higher conversion rates than stores using any single element alone.

The stacking effect is where the real gains live:

• Announcement bar + countdown timer = urgency stack. Promote a sale in the bar while showing a countdown on product pages.
• Announcement bar + promo code display = seamless discount experience. Announce the code in the bar, show it on product pages with the Promo Code Display snippet.
• Announcement bar + trust badges = immediate credibility. "Free shipping" in the bar plus security badges below add-to-cart covers both value and trust.

For more on combining these elements, read our guide to increasing Shopify sales. And if you want to customize your Dawn theme to integrate these elements seamlessly, that guide walks through the code-level details.

The announcement bar is the first thing visitors see. What they see next determines whether they stay.

FAQ

Does a scrolling announcement bar slow down my Shopify store?

Not if built with CSS animations. The code in this tutorial and the LiquidBoost snippet both use pure CSS @keyframes animation — no JavaScript runs for the scrolling effect. This means zero impact on page load time and smooth 60fps animation. Apps typically load external JavaScript files that add 50-200ms to page load time.

Can I show different announcement bars on different pages?

With the free code, add Liquid conditionals like {% if template == 'index' %}{% render 'custom-announcement-bar' %}{% endif %}. The LiquidBoost premium snippet includes page-targeting options in the theme editor settings, so you can control visibility per template without touching code.

Should the announcement bar push down the header or overlay it?

It should push down the header — be part of the normal document flow. Overlaying the header hides navigation elements and creates a poor user experience. The code in this tutorial uses standard document flow positioning, which is the recommended approach.

How do I add a link to my announcement bar message?

For the free code, wrap the message text in an anchor tag within the messages variable, or modify the Liquid loop to include links. The LiquidBoost snippet provides per-message link fields in the theme editor, making this a zero-code configuration.

Can I A/B test different announcement bar messages?

Yes. Duplicate your theme, change the announcement bar message on the duplicate, and compare conversion data over equal time periods. For proper split testing with statistical rigor, use a dedicated A/B testing tool. Start by testing free shipping threshold messages against percentage-off promotions — these two message types often produce very different results.

Keep Reading

• Shopify Compare at Price: How to Show Sale Prices That Convert
• How to Increase Shopify Sales: 15 Proven Tactics
• Boost Shopify Conversion Rate with Code Snippets