How to Create a Shopify Announcement Bar

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:

• How to create a basic announcement bar in Shopify
• The limitations of Shopify’s announcement bars
• How to create more advanced Shopify announcement bars

Then, you’ll be able to choose the right method for your needs.

Let’s get into it.

How to create a basic Shopify announcement bar

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:

• Announcement text
• Colors as set in your theme settings
• Link (optional) to another URL or page on your store

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.

The limitations of announcement bars in Shopify themes

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:

• Forms for list building
• Images or graphics
• Timers for limited-time offers
• Buttons, like add-to-cart buttons

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.

How to create more advanced Shopify announcement bars

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:

• Create more engaging, eye-catching announcement bars
• Personalize your campaigns to each user
• Increase conversions with different formats

To do this we’ll be using ConvertFlow’s sticky bars tool and Shopify integration.

Step 1: Choose a template

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:

• List building
• Cart abandonment
• Quizzes
• Product recommendations
• Surveys
• And more

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:

Step 2: Customize the design of your announcement bar

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:

• Theme level: Which will set your style across your campaign as a whole
• Element level: Which will override theme settings to adjust styles at an individual element level

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.

Step 3: Set the announcement bar to top or bottom

Also in the “Theme” section, you can choose where your announcement bar appears: the top or bottom of the screen:

Step 4: Choose your announcement bar’s trigger

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:

• Exit-intent: This trigger type will detect the shopper’s mouse movement to determine when to trigger the sticky bar. On mobile devices, exit-intent sticky bars will trigger when the visitor clicks the back button in their browser.
• Scroll-point: This trigger type lets you display your campaign when the visitor has scrolled to a certain percentage of the page. For example, you may want to trigger the sticky bar 50% of the way through a blog post.
• Timed delayed: You can have your sticky bar display X number of seconds after the page loads using this trigger type.
• Upon click only: Using this trigger option, your sticky bar can show only when a button is clicked.
• On-site message: Using this trigger type, you can have a small popup message appear in the corner of the screen, that when clicked will trigger the sticky bar.
• Two-tap floating button: Display a floating button from the corner of your website that triggers the announcement bar when clicked.
• Add to cart (Shopify): Trigger your sticky bar after an item is added to the cart.

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.

Step 5: Update your announcement bar’s content

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.

Step 6: Connect Shopify to ConvertFlow

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.

Step 7: Update actions

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.

Step 8: Preview your announcement bar

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.

Step 9: Launch your Shopify announcement bar

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 🎉

Launch your Shopify announcement bar with ConvertFlow

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:

• Build your email & SMS lists
• Prevent browse & cart abandonment
• Launch cross-sell & upsell campaigns
• Promote sales
• And so much more

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.