How to add a sticky announcement bar to Shopify

Nina De la Cruz Nina De la Cruz 7 min read

Announcement bars are the most convenient way to drive your customers’ attention to anything important happening in your store.

You can easily place a sticky bar at the top or bottom of any page, tailor it to your brand’s style, and even use personalization – displaying different messages to different types of customers.

The cherry on top? You can make your Shopify announcement bar interactive. For example, you can add a CTA button that will take customers to another page👇


Or, if you’re promoting a discount code, you can let customers copy the code to the clipboard with a click (so that they paste it at checkout).

With apps like Getsitecontrol, adding an announcement bar to your store will take a few minutes. There’s no need to deal with the code or edit your Shopify theme. Just install the app and start creating beautiful, custom sticky bars and popups for your store within 5 easy steps.

In the following sections, we’ll show you how it works.

How to add an announcement bar to Shopify without coding

Before getting started, add the Getsitecontrol app to your Shopify store. The installation takes a couple of minutes; from there, you can use the free plan to create a non-targeted announcement bar and display it to all visitors, sitewide or on selected pages.

Step 1. Select a template

Log into your Getsitecontrol dashboard and hit Explore popular use cases.

How to access template gallery from the Getsitecontrol dashboard

From the menu on the right side, select ‘Make announcements’ and you’ll be taken to the template gallery featuring over a dozen sticky bars designed in different styles. If you haven’t installed the app yet, you can view the gallery right on the website.

Template gallery featuring announcement bars for Shopify

Click the templates to see them in action. Once you’ve found something close to what you had in mind, hit Take this template, and it will go straight to your Getsitecontrol dashboard.

How to add a sticky bar template to the Shopify dashboard

💡One of the best practices is to place your announcement bar at the bottom of the page. That’s why it’s the default template position. However, you’ll be able to place the same bar at the top of the page if you want – we’ll show you how to do it in a moment.

Step 2. Type your text

To add the text of your announcement, just click on template text and a simple WYSIWYG editor will slide in from the right. That’s where you can type your copy.

How to edit text on a Shopify announcement bar

If you want to remove the button from the bar, click on it right on the template and proceed to ‘Remove button’. If you prefer keeping the button and using it for engaging your visitors, we’ll show you how to set it up.

Step 3. Set up the button action (optional)

There are several types of action you can assign to a button click.

For example, you can drive people to another URL, let them copy the coupon code, apply a discount to their cart, or even add a product to the cart.

When it comes to announcement bars on Shopify, the first two scenarios are probably the most popular ones, so we’ll break them down for you. Once you click the button on the template, a menu with button settings will slide in from the right. That’s where you can change the text on the button, its style and features 👇

How to assign a URL to a button click in Getsitecontrol

By default, our template already has the ‘Open URL’ action selected. All we need to do is paste the URL address and indicate whether the page should open in a new tab or not.

On the other hand, if you’re using the bar to promote a discount code on Shopify, the button is handy to let customers copy the code to clipboard. To set things up, remove any default option, then open the Actions menu, and select ‘Copy to clipboard’. Paste the discount code to the corresponding field and modify the confirmation message below – by default, it’s a brief notification saying ‘Copied!’

How to apply the copy to clipboard feature to a button click in Getsitecontrol

Keep in mind that before promoting the discount code, you need to create and activate it in your Shopify store.

Step 4. Change the position and color of your Shopify announcement bar

If you’re done with the text and button settings, it’s time to work on the appearance!

First off, if you want to move the bar to the top of the page or just shift it slightly higher, use the Position menu. It’s really straightforward, and you’ll see the result right away.

How to place an announcement bar at the top of the page on Shopify (instead of bottom)

Now let’s tackle the design. The two default color themes in Getsitecontrol are Light and Dark – you can switch between them using the Theme menu. However, note that you can easily change the colors of the background, text, and button to make them match your website’s color theme.

How to change the color of the announcement bar on Shopify

If you happen to know a little bit of CSS, you can go the extra mile and customize this sticky bar precisely to your vision.

Step 5. Set displaying conditions (this step contains optional, premium features)

The last step before you publish the bar on your website is to set the conditions for when and where it should appear.

These conditions will depend on the type of announcement you want to make. For example, if you want to notify all visitors of a new collection or an ongoing sale, it makes sense to display the announcement on every page to every visitor. If you want to let customers from a certain location know about shipping terms, it makes sense to display the announcement to visitors from that location only.

You can also display the announcement based on the products or brands a customer is viewing, the number of products in their cart, the cart price, and plenty of other parameters.

To select the desired conditions, go to the Targeting tab and check the controls. By default, your announcement bar will be displayed on every page, as soon as a visitor arrives at your store.

How to set up page and audience targeting for an announcement bar

Most of these controls are self-explanatory, but here is what they mean 👇

Display widget on allows you to select pages where the announcement should (Include) or should not (Exclude) be displayed. For example, if you add your Thank you page or Order status page to the ‘Exclude’ field, the announcement won’t be displayed there.

Display widget if allows you to target certain groups of visitors based on their locations, devices, based on whether they’re first-time visitors or not, products they have in their carts, and so on. For instance, you can encourage first-time visitors to make a purchase with a welcome offer featured on a sticky bar.

Start displaying widget allows you to select displaying triggers, such as page scroll depth, time spent on a page or website, exit intention, products being added or removed from the cart. For example, you may want to encourage those who have removed a product from the cart to put it back by offering free shipping.

Hide widget allows you to set the conditions that will make the announcement bar disappear. By default, the bar will disappear as soon as the previous conditions are no longer met. For instance, if you were targeting those with shopping cart prices under $50, as soon as they reach $50, the bar will disappear.

Stop displaying widget allows you to decide how soon customers should see the announcement bar again after interacting with it. For example, you can stop displaying it forever if a visitor takes action (clicks the button in this case) or for a week if they just close the bar.

💡More so! If you’re announcing a short-term campaign, you can even create a schedule and specify which dates, days, or hours the bar should be displayed in the store.

Publish the announcement on your website

If you’ve finished with the settings, save the announcement bar and activate it on your website.

Ho to activate a widget on a website in the Getsitecontrol dashboard

Once the announcement goes live, you’ll be able to track the number of views and clicks it has collected, right in the dashboard. You can also edit the text and design, access more in-depth performance analytics (more on that in a moment), and even run an A/B test.

How to personalize your announcement bar (optional, premium features)

Personalization is the key to higher conversions, but you already know that, so we’ll skip the theory.

The question is, how do you personalize an announcement bar?

Here is an idea. Even with so little space for copy, you can use the dynamic text replacement feature.

Here are three examples of what it may look like:

Logged-in customers’ names

  • You’re just in time, love! We’re having a flash sale today

  • You’re just in time,Amanda! We’re having a flash sale today

Customers’ location

  • Free shipping to your door on all orders of $50 and above

  • Free shipping to Brooklyn on all orders of $50 and above

The name of the brand customer’s viewing

  • Lucky you! This brand is on sale today. Use LUCK at checkout for 15% off

  • Lucky you! Guerlain is on sale today. Use LUCK at checkout for 15% off

Most importantly, adding dynamic replacement to your copy is incredibly easy. If you want to learn how to do it, read our detailed guide to using dynamic text replacement.

Shopify announcement bar ideas (that aren’t a shipping bar)

Most times, the first thing that comes to mind when we talk about sticky bars is a free shipping bar. Although it’s a valid and probably the most popular use case, you can use sticky bars for so much more!

Here are our 12 Shopify announcement bar ideas (the clickable ones come with pre-designed templates – check them out!)

  1. Flash sale
  2. Seasonal or holiday sale
  3. Welcome offer
  4. Shipping & return policy or schedule
  5. Expected delivery delays
  6. New product launch
  7. New collection
  8. Brick-and-mortar store schedule
  9. New blog post or video
  10. Your store’s cookie policy
  11. A contest or giveaway
  12. Or even a job opening

If you’d like to use any of these sticky bars in your store, you’ll find them in the template gallery under the relevant use cases.

Use announcement bars to boost customer engagement

Having an announcement bar in your online store is convenient for both you and your customers. There’s just no better way to notify them of a flash sale, new product launch, new shipping schedule, or any other news.

Sometimes, the built-in Shopify feature-set makes it challenging to create a custom, clickable announcement bar – even if you’re willing to deal with the code of your theme.

No-code apps like Getsitecontrol can help you create your own sticky bar within minutes, tailor it to your store, and even track its engagement rate. The best part? Apart from announcement bars, you’ll be able to create pop-up newsletter forms, surveys, and even product recommendations for your Shopify store.

Still on the fence? Get started with the free plan and see how it works!

Nina De la Cruz is a content strategist at Getsitecontrol. She is passionate about helping small and medium ecommerce brands achieve sustainable growth through email marketing.

You’re reading Getsitecontrol usecase collection where we talk about the best practices for using website popups. This usecase is a part of Grow on Shopify section.

Get the print version

Download a PDF version of our use case for easier offline reading and sharing with coworkers.

Download PDF