How to Add a Shopify Announcement Bar

Announcement Banner

Yesterday I wrote a post about how you can add an announcement bar to WooCommerce. Today I want to show how you can do the same thing in Shopify. The Shopify Announcement Bar isn't built in which is a little annoying. But the free app is really configurable. You can set it up in a few minutes and have it match your theme perfectly.

The Setup

Now you can have an announcement bar for anything. It could be a sale, it could be dates that orders have to be in to be shipped on time, it could be new blog post that you want to promote. It could be anything really. So we're going to need something that will display a bit of text. And we might need a link to a page for more information.

Setting Up The Shopify Announcement Bar

You're going to want to go to the Admin of your Shopify store.

Then go to the App Store. And in the App Store search for “Quick Announcement Bar by Hextom“.

Quick Announcement Bar App

The Quick Announcement Bar app in the app store.

Let's click Get to install it.

Now once you install it you're going to land on a pretty intense page. It's like they didn't know what was important for you to read so they made everything look important.

Click on “Create New Bar”.

Quick Announcement Bar Settings Page

Click “Create New Bar” and try to ignore the rest of the craziness on this page.

Then select one of the many templates. This is totally up to you and how you want to represent your brand. Now in most cases you want announcement bars to be obvious so you want it to contrast with the rest of your site.

Select Announcement Bar Template

Select a template for your announcement bar

The one caveat is you don't want to it to be the same color as your add to cart button. You pretty much always want that to be unique. You don't want an announcement to be more important than adding a product to the cart.

I'll select Harvest Gold. Now you can see a preview and if you scroll down you can customize the text.

Anouncement Bar Preview

Here's how mine looks. It's detailed with a link for more information.

Announcement Bar Button

The button can link to any page on your site (technically any site).

Even if your message is short it's nice to elaborate on an actual page. You might have a short annoucement like:

Order by December 18th to recieve by Xmas

But that may not be the whole story. You could put additional deadlines depending on the shipping method they choose. That should definitely go on a separate page.

If you don't need the button you can disable it by checking “Do not add any link (Not clickable and remove the button)”.

Other Settings

You can choose the position of the announcement bar, on what pages it shows up, what devices are affected, and what geo regions are affected.

A few of these are premium features. For most cases you won't need the premium version. But if there's any feature it's like to be the schedule feature. That way you can turn on the announcement bar on a specific day.

Once you're done you can scroll down and click “Save”.

Shopify Announcement Bar Example

The Shopify Announcement Bar on my own site.

Happy announcing!

One thought on “How to Add a Shopify Announcement Bar

  1. Yeah! Thanks for sharing!
    And Happy new year!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.