Shopping Cart

How to add an announcement bar on your Shopify store (without an app)

| 0 comments

An announcement bar is a great way to display a free shipping offer, sale, or other promotion. And there's no need to use an app with a monthly fee for this feature. Just copy a few lines of code into your theme and you're all set!

This free announcement bar also lets you show an optional "free shipping countdown," so shoppers will always know how close they are to receiving free shipping!

Here's how (full written tutorial below the video):

1. Open the theme editor in Shopify.

This can be found under Online Store > Themes > Actions > Edit code.

If your site is getting live traffic, I recommend making a copy of your live theme and working in the unpublished theme to avoid breaking anything on your live site.

Open the Shopify theme editor

2. Add a new Section

Look in the sidebar on the left of your theme editor. Under the "Sections" header, click "Add a new section". In the popup that appears, enter the name "announcement-bar".

Make sure to delete the default code that Shopify puts in your new section.

Add a new section called announcement-bar

3. Paste in some code

Open this link. Select all, then copy and paste the code into your new section.

Your screen should now look like this:

Announcement bar code

4. Open theme.liquid in your theme editor

You'll find theme.liquid near the top of the sidebar, inside the Layout folder.

Open theme-liquid

5. Add one more line of code

Inside theme.liquid, look for code that looks like this:

{% section 'header' %}

It might be called something else depending on your theme, but it probably has the word "header" in it. Some other common names are:

{% section 'general-header' %}

{% section 'dynamic-header' %}

Just above this code, copy and paste the following:

{% section 'announcement-bar' %}

The finished result should look like this:

Add section code for announcement bar

6. Open your theme settings and set up your announcement bar!

Congratulations! Your announcement bar is now installed. Open your theme settings (Online Store > Themes > Customize), and you'll see a new section titled "Announcement bar."

Here you can set up the announcement message, colors, font size, link, and an optional free shipping countdown.

Announcement bar theme settings

Watch the full video above for a detailed walkthrough of this tutorial.

Interested in working with us?

Talk to us about your project