Add a Klaviyo Pop Up or Fly Out to Your Shopify Store

read

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:

  • 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, check out 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.

2017-06-05_11-47-40.png

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

650045.png

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

650047


And this is what our basic fly out looks like:

defaultPopUp.jpg

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. You can adjust this by checking out our guides to customizing popups and fly outs below.

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.

Learn more

Interested in even more customization for your popup or fly out form?

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