Select Sidearea

Populate the sidearea with useful widgets. It’s simple to add images, categories, latest post, social media icon links, tag clouds, and more.

Spify Shop by Brand
Shopify announcement bar: How to add it to your Shopify store to boost sales

Shopify announcement bar: How to add it to your Shopify store to boost sales

Shopify announcement bar is so important for online business. It is a simple yet effective method to drive awareness to a deal or discount code. In this article, I’ll demonstrate how to add an announcement bar to your Shopify store

An announcement bar is a great way to display a free shipping offer, sale, or other promotion. Besides, Announcement bars are also crucial in other circumstances, like displaying important shipping information, showcasing a new loyalty program, or promoting any custom messages that your customers want to present. And there’s no need to use an app with a monthly fee for this feature. To add a Shopify announcement bar, follow these steps:

Step 1. Open the theme editor

Visit Online Store > Themes > Actions > Edit code.

how to add announcement bar

If your website is getting live traffic, we suggest you make a copy of your live theme and work on the unpublished theme to avoid breaking anything on your live website.

Step 2: Add a new Section

See the sidebar on the left of your theme editor. Under the “Sections” header, choose “Add a new section”. In the popup that displays, fill the name “announcement-bar”.

Shopify announcement bar 1

You need to delete the default code that Shopify puts in your new section.

Step 3. Paste in some code

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

Shopify announcement bar

Step 4. Open theme. liquid

You’ll look for theme.liquid near the top of the sidebar, inside the Layout folder.

Shopify announcement bar 3

Step 5. Add one more line of code

Inside theme.liquid, see code that looks like this:

{% section ‘header’ %}

Some other common names are:

{% section ‘general-header’ %}

{% section ‘dynamic-header’ %}

Just above this command line, copy and paste the following:

{% section 'announcement-bar' %}

The finished result should look like this:

Shopify announcement bar

Step 6. Set up announcement bar

Your announcement bar is now installed. View your theme settings (Online Store > Themes > Customize), and you’ll see a new section titled “Announcement bar.”

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

Top Shopify Announcement Bar Apps 

1. Announcement Bar + Web Push

Shopify app

More details

The Announcement Bar & Web Push app is developed by AAAeCommerce Inc. Firstly, Web Push Notification is able to send Push Messages when the users come to your website and even when the users are NOT on your website, then upload their data back to your dashboard. Moreover, the owners store can easily generate multiple Notification bars and include more effects on the bar like Rotating Text, Blink, etc. Besides, a crucial feature of this app that assigns you more competitive than any competitors is Sales Motivator Notification Bar.

2. Announcement Bar & Header Bar

shopify app

More Details

With Welcome Header Bar, you will get your own customizable and responsive header bar, and the customizing process such as text, color, position, size, etc. Also, the module will allow you to add Email Capture, Countdown Timers, and even Coupons into your header bar if you use its premium edition.

3. Enorm Announcement Bar

Shopify announcement bar

More Details

The announcement bar & text rotator app is a fully custom announcement bar to display any announcements, which helps you follow your customer’s preference and shopping habits. This app also allows Shopify owners to add simple rotating texts to their website. Furthermore, the design is fully customized, so your store looks so attractive. The customers will be engaged in shopping more and more. Moreover, the description of your products will be displayed by multiple messages on the text slider. Especially, this app will freely and easily install. Last but not least, the shop owners can attract more customers by adding discount codes and provide more relevant product links to encourage the purchase.

4. Hello Announcements

Shopify announcement bar

More Details

As you can see that, the app is easily used without requiring any coding knowledge. You can install or uninstall the app under your needs. The app comes with full and highly customizable bars such as text, colors, and integrated links. In addition, it can allow you to specify which countries to showcase the bar and after a time-out, bars will be automatically hidden. Especially, at the same time, shoppers can receive many announcements and users can use the interface with a live preview.

5. Quick Announcement Bar

Shopify app

More Details

Quick Announcement Bar by Hextom is one of the most highly appreciated apps on the market. With an unlimited Free Shipping Bar including Announcement Bar, Hello Bar, as well a Promotion Bar, this app will surely help you boost your sales and revenue.

More specifically, Quick Announcement Bar enables you to Curated bar background images to express the holiday and promotion mood to your clients to boost conversions and more sales. Noticeably, all the factors of templates are customizable, which means that you can freely change the templates as you wish.

That’s it! Now you know how to add the announcement bar to your Shopify store. Also, check out some useful Shopify tutorial, and our roundup of the best sale-boosting Shopify apps and Themes

Write a comment