Creating a Shopify announcement bar is a straightforward process. You can do it right in Shopify, or use a third-party tool that integrates with Shopify for more functionality and control over your bar.
We’ll show you how to do both by covering:
Then, you’ll be able to choose the right method for your needs.
Let’s get into it.
Whether or not you can create a Shopify announcement bar—also known as a “sticky bar”— without adding a third-party app depends on your Shopify store’s theme.
If your theme has an announcement bar built in (most will), you can find out by clicking on “Online Store” in the left-side menu, then “Themes,” and then “Customize.”
Your announcement bar will likely be listed in a section titled “Header” or something similar.
If you know your theme has an announcement bar, but you can’t find it, check out your theme’s documentation or contact your theme’s developer.
Once you’ve found your announcement bar listed, click to edit it.
You’ll be able to choose your:
Click “Save” and you’re good to go!
Optionally, you can set multiple announcement bars that will stack on top of each other. Click “Add announcement” to create another message.
This can be useful if you want to let site visitors know about multiple things like your shipping policy and a sale you’re running.
Alternatively, if you just want to temporarily change your announcement message without getting rid of your standard sticky bar, you can click the eye button to hide one announcement bar to just show one message.
When you are satisfied with your announcement bar, click "Save" to make it live on your website.
While Shopify's announcement bars are a great way to quickly add important messages to your website, they do have some limitations.
Unless you add a third-party app or purchase a pricey theme with additional features, you can only customize the color, copy, and link of your announcement bar.
With Shopify alone, you can’t add:
You also can’t personalize your announcement bar to show different messages for each shopper segment or to show based on a user’s actions (like on exit-intent or scroll-point).
And you can’t A/B test to find what message or offer works best to drive revenue.
This additional functionality can help you boost conversions and personalize the shopper experience on your website.
For these added benefits, you’ll want to integrate a third-party app.
If you want more control over your announcement bar, you can use an app that was built with Shopify stores in mind.
With enhanced functionality, you’ll be able to:
Start by choosing a design template that aligns with the desired outcome of your announcement bar.
ConvertFlow has a wide range of templates to choose from including ones for:
Check out the template library to choose one to get started with.
For this step-by-step, we’ll go with a simple new product announcement popup:
Once you’ve chosen your template, you’ll be taken to the drag-and-drop builder where you can customize the design of your announcement bar.
Before adding any content, we recommend setting up the aesthetic design first.
This means setting your brand colors, logos, fonts, styles, etc.
You can set your design at the:
Start at the theme level so that any new elements you create for your announcement bar follow that same design.
Then, if you want specific elements to be different, you can edit those one by one.
To edit your theme, click the “Theme” tab in the builder’s side panel. Here you can customize your colors, fonts, and other details for each element type:
For this example, let’s update the colors of the buttons to suit our brand:
You can continue in that way until your theme is on brand for your store.
Also in the “Theme” section, you can choose where your announcement bar appears: the top or bottom of the screen:
Unlike theme-native announcement bars in Shopify, you can choose when your sticky bar triggers in ConvertFlow.
In the "Settings" tab of the builder panel, scroll down to find the sticky bar trigger settings.
Here you can choose your trigger type:
You have the option of making your sticky bar closable by the user or not.
If you don’t want to give site visitors the option to close your announcement bar, remove the close icon by sliding the “show close icon” to the off position (left) in your container settings.
Note that if you keep the close icon and set trigger suppression to “always trigger,” the announcement bar will show up again after the visitor closes the campaign. So, it’s best to remove the close icon to avoid confusing shoppers.
If you do give your site visitors the option to close the campaign, you can adjust the trigger suppression setting for each trigger type except “upon click only.”
In other words, you can set it to hide for a number of days after the shopper closes the campaign and it will be suppressed until the given time has passed.
Pro tip: The two-tap floating button can be set to trigger after your sticky bar is closed too, so visitors can access your offer after they already closed it out.
To update the content of your sticky bar, simply select the element you want to change and the side panel will show options to update the copy, design, and any actions:
You can add other elements like forms, buttons, images, products, and more by clicking on the “+” sign that appears when you hover your mouse over different sections.
Note: If you add a product element, you’ll want to connect your Shopify store in the next step so you can easily display your products.
When you connect your Shopify store to ConvertFlow, you’ll be able to easily pull in product and customer information for your campaigns.
From your website’s dashboard in ConvertFlow, go to “Settings,” then Integrations in the left-side navigation. Find Shopify and click “Connect.”
Once you arrive on ConvertFlow's Shopify app store listing, click "Add app." Then follow the instructions to give ConvertFlow access to your Shopify store.
Once connected, ConvertFlow’s script will be automatically installed on your website ⚡️
Note: If you’re adding a signup form to your sticky bar, you’ll go through a similar process to connect your email or SMS marketing tool.
You’ll want to give shoppers a place to go or action to take from your sticky bar. So let’s connect that “Shop Now” button to a collection in our Shopify store.
Select the button and then “Manage actions” in the side panel.
We’ll leave the Default Confirmation Action Type as “Redirect to a URL” and then copy-paste our collection URL into the form.
Click “Done” to save.
Once you're done making your edits, save and publish your changes. Then click “Preview” to see your announcement bar in action.
Here you'll be able to preview and test out your campaign in a safe test environment. Testing your announcement bar doesn't count towards your campaign stats or trigger automations, like adding a contact to your email list.
Next, click "Launch" to control which pages and visitor segments you want to target your sticky bar to.
Here you can control when and where your sticky bar displays on your website.
So you can show it on specific pages or to certain users.
Once you’ve added any targeting conditions needed to control which visitors should see this campaign, toggle the checkbox to activate your announcement bar.
Now your sticky bar will display on your website 🎉
This guide just scratches the surface in terms of what you can do with your Shopify announcement bars in ConvertFlow.
Beyond announcing a new product collection like we showed in this guide, you can also:
You can design your announcement bar to achieve whatever goal you need. The sky’s the limit.
And when it comes to performance, you can split-test an unlimited number of variants to find what works.
To launch a Shopify announcement bar that delivers personalized messages and boost conversions with advanced features and actions, you need a third-party app that integrates with Shopify.
ConvertFlow makes creating a customized announcement bar for your Shopify store easy with ready-to-use templates.
Create a free ConvertFlow account and integrate