Partner Website →

Sync contact fields. Segment people into lists. Personalize your website for Klaviyo contact segments.

Connect For Free
ConvertFlow +

How to Create a Klaviyo Announcement Bar for Your Website

It’s easy to create a Klaviyo announcement bar to gather email & SMS opt-ins right at the top of your store’s website. But you need the right tool for the job.

Most announcement bars (or “sticky bars”) included with your store’s Shopify theme are going to be basic. You can usually only customize your campaign’s color, copy, and link.

With Shopify alone, you can’t add a Klaviyo form for list building. For that, you'll need a tool with form functionality that integrates with Shopify and Klaviyo.

With ConvertFlow's sticky bar builder, you can add a Klaviyo form and gain a whole lot more functionality at the same time.

In ConvertFlow, you can customize your Klaviyo announcement bar to:

  • Show different messages for each shopper segment
  • Include eye-catching images and graphics
  • Add a timer for limited-time offers
  • And so much more

You can also A/B test to find the version that results in the most opt-ins.

This added functionality can help you boost conversions and personalize the shopper experience on your website.

Create a Klaviyo announcement bar for your online store now with this step-by-step guide.

To do this we’ll be using:

Grab your favorite drink and let's dive in ☕️

Step 1: Select a template

Start by choosing a form-based design template for your announcement bar. Check out ConvertFlow’s template library to choose one to get started with.

For this guide, we’ll use a two-step email & SMS sticky bar:

Choose your template and click “Use this template.” Then, create a free ConvertFlow account (or log in if you already have one) to start editing.

Step 2: Customize the design of your announcement bar

Now you’ll land in ConvertFlow’s drag-and-drop builder where you can customize your Klaviyo announcement bar:

ConvertFlow's drag-and-drop builder with the selected template ready to edit

Before editing the content, we recommend setting up your template’s aesthetic design first.

That means setting your campaign’s colors, logos, fonts, styles, etc. to suit your brand.

You can set the aesthetic design at the:

  • Theme level: To set styles for your campaign that will stay consistent when you add new elements
  • Element level: To override theme settings and customize the style of an individual element

Start by setting your theme level style so that any new elements in your sticky bar campaign follow the same design.

Then, if you want specific elements to be different, edit those one by one.

To edit your theme, click the “Theme” tab in the builder’s side panel. Here you can customize the style for each element type—such as headers, paragraph text, buttons, forms, etc.:

The theme panel in ConvertFlow can be accessed via the "Theme" tab in right-side menu.

For this example, let’s update the color of the buttons to be in line with our brand:

The buttons theme settings, showing options to edit font, text size, button & text color, and more.

You’ll notice that the color of the buttons in the second and third steps of the campaign also updated since we set the style at the theme level.

Continue like this until your theme suits your brand.

Step 3: Set the announcement bar to top or bottom

In the “Container” section of the “Theme” tab, you can choose if you want your announcement bar to appear at the top or bottom of the screen:

Sticky bar position for our campaign set to "appear from top"

Step 4: Choose your announcement bar’s trigger

Now, choose when your announcement bar triggers by heading to the “Settings” tab in the builder panel:

Sticky bar trigger settings can be accessed via the "Settings" tab in the right-side menu

Here you can choose your trigger type:

  • Exit-intent: Appears when the site visitor shows intent to exit
  • Scroll-point: Appears when the site visitor scrolls to a percentage of the web page
  • Timed delayed: Appears after a set number of seconds
  • Upon click only: Shows only when a button is clicked
  • On-site message: Shows after the shopper clicks a popup in the corner of the screen
  • Two-tap floating button: Displays a floating button from the corner of your website that triggers the announcement bar to appear when clicked
  • Add to cart (Shopify): Appears after a product is added to the cart

You also have the option to make your Klaviyo announcement bar closable by the user or not.

If you don’t want shoppers to have the option to close the sticky bar, remove the close icon by sliding the “show close icon” to the off position (left) in your container settings in the Theme tab.

Note that if you keep the close icon and set trigger suppression to “always trigger,” the announcement bar will show up again after the shopper closes the campaign. So, it’s best to remove the close icon to avoid confusing site visitors.

If you do want to give shoppers the option to close the sticky bar, you can adjust the trigger suppression setting for each trigger type except “upon click only.”

For example, you can set the campaign 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 still access your offer after they have already closed it.

Step 5: Update the announcement bar’s content

You’ll want to update your Klaviyo sticky bar with a relevant offer or call-to-action (CTA) to encourage sign ups, as well as any relevant images for your products or brand.

So, to update your sticky bar’s content, simply select the element you want to change. The side panel will show options to update the copy, design, and any actions (we’ll get to actions in the next few steps):

Before and after editing the button text for the campaign's form. Before, the button reads, "Get 10% off." After, the button reads "Get my discount."

You can add other elements like 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 step 8 so you can easily display your products.

Step 6: Connect Klaviyo to ConvertFlow

With the content of your sticky bar set, it’s time to connect your Klaviyo account so that form data can be passed on to your subscriber database.

To do this, select the form in the first step from the builder. Click the “Manage Actions” button that appears in the side panel:

The "Manage Actions" button that appears when clicking a form in ConvertFlow

From here, select the “Manage integrations” button. Find Klaviyo from the integrations menu and click “Connect”:

The integrations menu in ConvertFlow, highlighting Klaviyo

Follow the on-screen instructions to verify the integration with ConvertFlow.

Step 7: Connect form inputs to Klaviyo

Now that you’ve got Klaviyo connected to ConvertFlow, you can set up an automation to push form submissions into your Klaviyo account.

After connecting, you should be brought back to the “Manage Actions” window. From here, click "Add Automation":

The "Manage Actions" panel in ConvertFlow

In our example, we want to add form submissions to our newsletter list in Klaviyo. So let’s select “Klaviyo - Add to list” as the automation type and choose the “Newsletter” list from the Lists dropdown menu.

The "new automation" form in ConvertFlow

Click “Create automation,” then “Done.”

New subscribers that fill out the form in your Klaviyo sticky bar will now get added to this list 🙌🏽

You can repeat this with the SMS form in the second step of your announcement bar, choosing the appropriate list for SMS subscribers.

Step 8: Connect your online store to ConvertFlow

To get your Klaviyo announcement bar live on your website, you’ll need to connect to Shopify.

When you connect your Shopify store to ConvertFlow, you’ll be able to do even more with campaigns like pulling in product and customer information.

From your website’s dashboard in ConvertFlow, go to “Settings,” then “Integrations” in the left-side navigation. Find Shopify in the menu and click “Connect”:

The integrations menu in ConvertFlow, highlighting Shopify

Now you'll be taken to the Shopify store. Click "Add app" on ConvertFlow's app listing and follow the instructions on the screen to add ConvertFlow to your store.

Once connected, ConvertFlow’s script will be automatically installed on your Shopify store 🎉

Step 9: Update button actions

The last step in our form template has a button to continue directing your shoppers’ online experience.

You can connect that final CTA anything you want, such as:

  • Your quiz
  • A specific product collection
  • Another campaign

Or, you can remove the button and make the last step a simple confirmation message.

To keep it simple for now, we’ll just direct the button to shop all our products. So let’s update the copy of the last step:

An updated final step of the announcement bar that reads, "Ready to shop? Check out our best-selling products." The CTA button reads, "Start shopping."

Then, like with the form, just click “Manage Actions” to connect the button to whatever destination you want to send shoppers to next:

The "Manage Actions" button that appears when selecting a button in the builder

We’ll leave the “Default Confirmation Action Type” as “Redirect to a URL” and then copy-paste our collection URL into the form:

The "Manage Actions" panel in ConvertFlow

Click “Done” to save.

Step 10: Preview your Klaviyo announcement bar

Once you're done making your edits, save and publish your changes. Then click “Preview” to see your announcement bar in action.

The "Preview" page in ConvertFlow, showing how the Klaviyo announcement bar will look on the website.

Here you'll be able to preview and test your campaign.

Testing your announcement bar here doesn't trigger automations (like adding a contact to your email list) or count toward your campaign stats. So, feel free to test out the sticky bar’s functionality.

Step 11: Launch your Klaviyo announcement bar

Now it’s time to get it live 🚀

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:

Targeting settings for the announcement bar in ConvertFlow

This lets you show the campaign 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.

Targeting conditions for the announcement bar in ConvertFlow

Your campaign is live 🎉Now you can grow your Klaviyo lists right from your website’s announcement bar.

Launch your Klaviyo announcement bar with ConvertFlow

The sky’s the limit when it comes to what you can do with announcement bars in ConvertFlow. You can create different versions of your sticky bar that show to different segments or that show dynamic content based on customer data.

Beyond growing your list like we showed in this guide, you can also:

  • Announce new products
  • Prevent browse & cart abandonment
  • Launch cross-sell & upsell campaigns
  • Promote sales
  • And so much more

And you can split-test an unlimited number of variants to find what performs best.

To launch a Klaviyo announcement bar, you need a third-party app that integrates with Shopify and Klaviyo.

ConvertFlow makes it easy with ready-to-use templates and advanced functionality to design campaigns that help you reach your goals.

Create a free account to start building today.

Grow your list, checkouts, and AOV with Klaviyo & ConvertFlow

Create a free ConvertFlow account and integrate


in minutes.


Sync contact fields. Segment people into lists. Personalize your website for Klaviyo contact segments.

Connect For Free

Related integrations

See all integrations →