Sync contact fields. Segment people into lists. Personalize your website for Klaviyo contact segments.
Connect For FreeIt’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:
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 ☕️
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:
Now you’ll land in ConvertFlow’s drag-and-drop builder where you can customize your Klaviyo announcement bar:
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:
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.:
For this example, let’s update the color of the buttons to be in line with our brand:
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.
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:
Now, choose when your announcement bar triggers by heading to the “Settings” tab in the builder panel:
Here you can choose your trigger type:
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.
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):
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.
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:
From here, select the “Manage integrations” button. Find Klaviyo from the integrations menu and click “Connect”:
Follow the on-screen instructions to verify the integration with ConvertFlow.
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":
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.
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.
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”:
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 🎉
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:
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:
Then, like with the form, just click “Manage Actions” to connect the button to whatever destination you want to send shoppers to next:
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 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.
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:
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.
Your campaign is live 🎉Now you can grow your Klaviyo lists right from your website’s announcement bar.
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:
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 ConvertFlow account and integrate
Klaviyo
in minutes.
Sync contact fields. Segment people into lists. Personalize your website for Klaviyo contact segments.
Connect For Free
.svg)
