Use Shopify announcement bars that boost conversion rate

Use Shopify announcement bar that boosts conversion rate

You will find more than 1000 discussions related to the announcement bar in the Shopify community one year recently. The common questions are related to how to use and customize this bar. It implies that many Shopify merchants may have trouble using the announcement bar effectively. 

To address this issue, this article will demonstrate the strategies and tips for how to use an announcement bar to boost your conversion rate effectively. Before jumping into it, let’s explore what an announcement bar is.

An announcement bar in Shopify

What is its definition?

Announcement bar is a snippet usually on the upper part of a webpage. It’s also known as sticky bar, notification bar, floating bar because of its features. As its name suggests, Shopify merchants often use it to display custom notifications, announcements, updates or special offers. 

Mostly, the announcement bar is placed above the header or navigation bar and sticks there even scrolling or moving to other pages. That means the message of the announcement bar will appear in front of web visitors all the time. This also keeps them not to miss out on important information for any of their web journeys. 

What contexts to use it in Shopify?

Shopify merchants usually use the announcement bar to communicate a specific message to their potential customers.  Depending on the goals, you can customize the message for highlighting your unique selling points or offering a special deal that converts web visitors for the first time. You can also take advantage of your customer loyalty programs to keep current customers or promote any custom messages, which you want all web visitors to know.

announcement bar of bombas
Web store: https://bombas.com/

For example, Bombas is running a shipping promotion. To notify all visitors, it uses an announcement bar to display this promotion above the header. 

The message is “Father’s Day Is Coming – Get Free Standard Shipping On Orders $50+ Through 6/10”. This message gives web visitors a reason to buy by reminding them that father’s day is coming. And by touching down the emotional feeling for relatives, such an offer may help you to boost the revenues quickly. 

How to use the announcement bar to boost Shopify conversion rate?

You have already known the basic things about the Shopify announcement bar in the previous section. Now, let’s look deeply at its greatest impact – boost conversion rate for Shopify stores. 

Nudge visitors to complete orders by free shipping announcement

According to Reuters [1], 74% of online shoppers said that free shipping is the most important option to complete check out. Moreover, 60% of U.S. eCommerce consumers expect free shipping [2], reported by Radial survey. And only 23.5% of them are willing to pay below $10 for shipping. It’s understandable because most consumers think that shipping is an extra cost and they are not willing to purchase.

announcement bar of vera bradley
Web store: https://verabradley.com/

For instance, Vera Bradley, which is an independent fashion retailer covering almost all states of the United States, runs a free shipping program for all online orders. All web visitors can easily know this because the brand announces this policy on the sticky bar. 

Since online shoppers consider delivery options on their buying decisions, it’s no surprise when approaching 90% of retailers to provide at least an opportunity to get free delivery, according to an analyst of Mark Miller [3]. Even free shipping means raising costs but “it doesn’t matter because you have to play the game”, a representative of company analyst Oliver Chen said to Reuters [3].

However, to limit the expense for this promotion, Vera Bradley limited one order per customer or household within the US. Some other stores also apply free delivery with conditions of passing the order value threshold. 

Quickly offer every visitors a great deal

Everyone enjoys a deal whether it is a special occasion or not. But how do you offer a competitive deal? The answer may vary depending on how well you understand your strengths, weaknesses as well as competitive competitors. 

Firstly, looking deeply at the analytics reports of your Shopify store to understand what stops, drives or persuades web visitors to make a purchase. In particular, kindly discover: 

  • What drivers bring visitors to your store? 

By knowing that you can gain more and more traffic.

  • What particular barriers make people exit your store?

The answer will support you to design effective strategies to gain more orders. 

  • What hooks persuade visitors to convert? 

These hooks should solve defined barriers at the previous question.

After that, create a great deal based on the mentioned hooks. And with the support of an announcement bar,  your web visitors will be trapped in your game soon. Hawk Incentives researched [4] that 97% of consumers said that they expect deals when shopping. Even 56% are more likely to wait for a deal this year than last year like deal seekers. Similarly, research by PRRI in 2019 [5] found that 92% of consumers utilized a kind of promotion or used a coupon. Let’s see the case study of Bulletproof. 

Bulletproof, which sells millions of cups of coffee per year [6]. It uses the announcement bar to showcase its deal – 25% off.  If people visit the home page first, they may be caught attention by promotion in the big banner. For other cases, the sticky bar will remind them of about 25% off the sale. 

announcement bar of bulletproof
Web store: https://www.bulletproof.com/

Drive web visitors by a strong call to action and hyperlink

You may spend a lot of money to build a completely custom and friendly website. You also spend hours researching web flow in order to optimize the web journey. But do you know that the announcement bar can help this easily?

The example of Bulletproof mentioned above successfully led web visitors to the sale collection. In particular, the sticky bar is embedded with a hyperlink, which redirects to the sale collection including 25% off items. It’s clear that wherever web visitors start their buying journeys, they can be led to the promotion. Meanwhile, this type of promotion has a notably positive impact on purchasing decisions proved by research in the International Journal of Research and Review [7].

announcement bar with cta by bulletproof
Web store: https://www.bulletproof.com/

An announcement bar allows you to customize text embedded with hyperlinks. By doing this, you can drive visitors to specific pages wherever they start with your website. Compared with pop-up notifications, it causes less annoyance for users. Your job is to create a strong call to action so that they click. If so, what things should a strong call to action include? Keep reading, you’ll find it in the next section. 

Display multiple bars for A/B testing

A/B testing (sometimes known as split testing) is a marketing technique that measures and compares two versions of a web page or other digital marketing assets to find which performs better. They will randomly display version A or B to users. 

All behaviors (such as clicks, purchases) of experimenting users will be recorded and analyzed. Based on predefined indicators such as conversion rate, we’ll consider which version performs better. Worthy A/B testing should be based on your own data to recommend. For example, you can run A/B testing to find out which promotion is more attractive. Let’s see the case of Chubbies. 

 

announcement bar of chubbies
Web store: https://www.chubbiesshorts.com/

Version A:

Chubbies offers free shipping and gifts. According to IRP eCommerce [8], the average order value on eCommerce counted to April 2021 is about £87.76. For this reason, Chubbies’s threshold price is easy to reach. Because it is below half of the common average value. Otherwise, gifts being available in the cart with a purchase will give visitors powerful motivation to check out.

Version B:

Chubbies also has another web version (below picture). This version remains a threshold price for free shipping as the previous. The difference is pushing visitors in urgency and scarcity by reminding “last chance” with a countdown timer. As mentioned above, this announcement bar can be considered a strong one because it includes:

  • Added-value of services: offer free shipping on orders $35+
  • A hyperlink: redirect to the flash sale collection
  • A deadline: countdown time of this sale day
announcement bar of chubbies with timer countdown
Web store: https://www.chubbiesshorts.com/

How to add a Shopify announcement bar?

The previous section introduced strategies to improve the conversion rate through an announcement bar. It’s time to convert these ideas into reality. Let’s start with the very first thing: add an announcement bar to Shopify stores. There are two main ways to add an announcement bar to Shopify stores. 

Using Shopify apps

The simplest way is to use Shopify apps. There are hundreds of apps when you search “announcement bar” on the Shopify app store. However, I would like to recommend the 2 following apps. Because these apps are user-friendly, highly customizable, fully responsive, and offer an available free plan. Additionally, you can apply the above-mentioned strategies that improve the conversion rate with these apps.

Quick Announcement Bar

Shopify app - Quick announcement bar

The highlight of this app is advanced targeting, which offers discounts based on different customer segments. In addition, you can translate the message in your announcement bar into multiple languages. These features will help to sell globally. These advanced features are only available for premium plans, which charge $9.99/month or $8.25/month billed at $99 once per year.

All Announcement Bars & Banner

Shopify app - All announcement bars and banner

The plus plan ($5.99/month) includes rotating multi-message and countdown timer bars, which are special types of announcement bars. Additionally, when upgrading to pro plan ($9.99/month), you can also show an announcement bar on specific pages or devices, target web visitors by geolocation or referring source. 

Editing code

The other way is editing code. In this way, your announcement bar will be fully customized for your business. This is not only saving your tight budget but it also will be yours forever. You will not be charged per month or year. However, it requires technical skills to set up. Therefore, hiring Shopify experts to do it for you is recommended. It will save time and effort if you are not skilful in coding in the Shopify solar system.

   

add announcement bar without app

Before creating an announcement bar for yourself, keep in mind some tips to make it great.  

Tips to make a Shopify announcement bar effectively?

Use a Shopify announcement aligning with brand identity 

Brand identity plays a crucial part with businesses, especially in eCommerce. Lucidpress and Demand Metric found powerful facts and statistics on the effect of brand consistency. Particularly, 70% of survey constituents [9]stated that consistent branding is a requirement to communicate with current customers. Additionally, brand consistency can contribute to an average revenue increase of 33%. 

Consistency presents through font, color, content. We can start with small things such as using the brand font in the announcement bar as Gymshark. The consistent font will bring harmony to your website as a whole. In other words, this helps the announcement bar not be discrete even though it is an add-in. 

announcement bar of gymshark
Web store: https://www.gymshark.com/

Here are some of the settings, which you can adjust for an announcement bar: 

  • Text
  • Hyperlinks
  • Color
  • Font-size
  • Checkbox

Define position to put before adding a Shopify sticky bar

Mostly, Shopify stores add an announcement bar on the top of their websites. Because it is friendly with the user interface (UI) when it sticks neatly near the header. Visitors may feel distracted when scrolling down to explore products or information but the bottom part of the screen is covered by the announcement bar with irrelevant information. Instead of that, putting an announcement into the menu is not a bad idea as Nerdwax.

announcement bar of nerdwax
Web store: https://nerdwax.com/

However, we don’t have one answer to fit all. A different approach can bring surprising results. You can learn the way of Luxury hair. They put the announcement bar on three positions within a web page: on the top of the website, above the footer, and a small bar running your scrolling. Creativity doesn’t have limitations and you are the game owner. Use the A/B testing to find the most suitable solutions for your business.

Luxury announcement bars on multiple positions
Web store: https://www.luxyhair.com/

Use a strong CTA in the Shopify announcement bar

What things make a call to action being strong?

– The added value of your service: As mentioned above, we already know how powerful a great deal is. Consequently, include it in your call to action.

– A hyperlink: Not every visitor has the same journey but you want all of them to land the sale collections or a landing page to see your best deal or current campaign. In this case, embedding a hyperlink in the call to action is enough.  

– An emphasis on the urgency: A deadline will put visitors in an urgent situation and increase the scarcity of your deal. Consequently, it will shorten the duration of the order completion. A case study [10] of ConversionXL completed successfully with this tactic. By presenting the urgency to their product, they were able to increase their conversion rate by 332%.  

Check out this article to see how to optimize the call to action for your Shopify store.

Add a Shopify announcement bar being responsive with mobile 

According to Statcounter, over 50% of total internet activity worldwide is completed on mobile devices. Following behind are desktops with over 45% of total internet activity, and tablets portion the rest. Consequently, responsiveness with mobile is a vital element of an eCommerce store’s design. Therefore, don’t forget to ensure that your website is compatible with various devices. 

For the announcement bar, responsive mobile is adjusted to its height, width, and font size. The below image includes bad practice and good practice of mobile responsiveness. While the right one is neat and eye-catching, the left one overlaps the logo. 

responsive announcement bar

Final thought

In short, you can use an announcement bar to contribute to a better conversion rate. Based on customer insights from your store analytics report, you can design a great deal that matches the insights and let them know through your announcement bar.  If you don’t have many insights or a small database, start with free shipping. It has been proven that free shipping is an effective strategy from time to time. To help your customers learn more about your free shipping policies, embed a hyperlink to the sticky bar to redirect them to the page containing the promotion. Don’t forget to use a strong call to action to amplify the effect. Additionally, it’s recommended to have multiple versions to implement using A/B testing to find the best-performing one. 

Now that you know an impressive tool to raise the conversion rate: announcement bar. It’s time to test them out. Let’s add an announcement bar to your Shopify store with a few clicks to explore how powerful it is. Keep it aligned with the brand identity and responsible with mobile to achieve your goals.

References:

[1] https://www.reutersevents.com/supplychain/ecommerceretail/free-shipping-and-ease-return-dominates-online-shoppers-demands-says-survey

[2] https://www.radial.com/press-room/press-releases/new-study-retailers-must-prioritize-emerging-markets-get-ahead

[3] https://www.retaildive.com/news/how-much-is-free-shipping-really-costing-retailers/403128/

[4] https://www.prnewswire.com/news-releases/hawk-incentives-research-deal-seeking-on-the-rise-shoppers-report-these-behaviors-make-them-feel-smarter-300530557.html

[5] https://couponscience.org/iherb/2017-coupon-promo-code-study/

[6] https://www.businessinsider.com/bulletproof-coffee-dave-asprey-2017-4

[7] https://www.ijrrjournal.com/IJRR_Vol.7_Issue.9_Sep2020/IJRR0027.pdf

[8] https://www.irpcommerce.com/en/gb/ecommercemarketdata.aspx?

[9] https://www.lucidpress.com/blog/25-branding-stats-facts

[10] https://cxl.com/blog/creating-urgency/

[11] https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet