Add a Klaviyo Pop Up/Fly Out to your Shopify Store

Overview

If you are interested in adding a new sign up form to your Shopify store, Klaviyo provides an easy way to build three different types of forms:

  • Simple embedded forms
  • Pop up/modal forms
  • Fly out forms

This article will explain how to get these forms up and running on your site by adding Klaviyo form code to your Shopify store's Theme.

To first explore how to create and customize these forms in Klaviyo, checkout this guide.

Add Klaviyo Form Code to your Site

Once you've finished customizing your pop up or fly out in Klaviyo, it's time to add it to your Shopify store. To do this, open your Shopify store's backend in a new tab and navigate to Sales Channels > Online Store > Themes.

Once inside of Themes, click the small ellipsis in the upper right-hand corner and then click Edit HTML/CSS.

650044

From there, paste your code into the theme.liquid template right after the opening <body> tag.

650045

Once the code has been pasted into your template, visit your store's URL to make sure all is working order. This is what our basic pop up looks like:

650047

And this is what our basic fly out looks like:

650048

FAQ

Will my pop up or fly out form show up every time some visits my site, even if he/she has already subscribed?

By default, when a user closes a fly out or popup, this person will not see the form again for a period of time. This is customizable, however.

If someone visits my site and closes one pop up, will it stop my other forms from appearing as this person continues to browse?

If a user closes a fly out or popup, all other fly outs and pop ups on your site will remain closed as the user continues to navigate the site. This is also adjustable, however - to learn more, click here.

How can I further customize my pop up/fly out form?

Was this article helpful?
1 out of 3 found this helpful