Boost Your Email List with Klaviyo Pop-ups

Boost Your Email List with Klaviyo Pop-ups

Table of Contents

1. Introduction
2. Adding Signup Forms to Your Website 2.1. Embedded Forms 2.2. Pop-ups
3. Installing the Signup Form Code Snippet
4. Creating a List in Klaviyo
5. Designing a Pop-up
6. Customizing the Pop-up Design
7. Setting Behavioral Triggers for Pop-up Display
8. Testing the Pop-up
9. Designing an Embedded Form
10. Connecting the Embedded Form to the Klaviyo Account
11. Embedding the Form on Your Website
12. Conclusion

Adding Signup Forms to Your Website

In this article, we will discuss how to add signup forms to your website that connect to your Klaviyo account. Adding signup forms and pop-ups strategically to your website is crucial for organic list growth, allowing you to collect email addresses and nurture subscribers into buying customers. We will cover two types of signup forms: embedded forms, which can be found in the footer or landing pages, and pop-ups, which are more effective for growing your email list. While the focus will be on Shopify and Shopify Plus, the process is similar for other platforms like WooCommerce and BigCommerce.

Installing the Signup Form Code Snippet

Before adding any forms to your site, you need to install the signup form code snippet. To do this, navigate to Klaviyo and go to "Sign Up Forms." Click on "Install Code Snippet" and copy the provided code. In your Shopify store, go to "Online Store" and select the theme you're using. Click on "Actions" and then "Edit Code." Find the "body" script and paste the code snippet before the closing body tag. Save the changes.

Creating a List in Klaviyo

Before building signup forms or pop-ups, you need to create a list within Klaviyo to collect subscribers. It is recommended to trigger a welcome flow from this list to nurture subscribers. If you would like a tutorial on creating lists and triggering flows, let us know in the comments. It is also appreciated if you like and subscribe to our channel to support us.

Designing a Pop-up

To add a pop-up to your website, start by designing the form. Click on "Create a Signup Form" and choose the pop-up type. You can start with a Klaviyo default template and make adjustments later. Name the form and select the website opt-in list. Click "Create Form."

Customizing the Pop-up Design

Within Klaviyo, you can customize the design of the pop-up. Begin by changing the background to something relevant to your brand. You can also edit the text and message displayed on the pop-up to align with your branding. Make sure to also customize the success message and make it consistent with your overall design. You can further adjust the behaviors, such as adding a delay for the pop-up display and specifying where it should be shown (desktop, mobile, etc.).

Setting Behavioral Triggers for Pop-up Display

When customizing the pop-up, you can set behavioral triggers that determine when and who should see the pop-up. You can choose to show the pop-up after a certain delay or show it again after a specific number of days if the user doesn't sign up. Additionally, you can specify on which devices the pop-up should appear and exclude existing Klaviyo profiles and specific URLs, such as cart or checkout pages.

Testing the Pop-up

It is essential to test the functionality of the pop-up before publishing it. Make sure everything is set up correctly and that the pop-up appears as desired. If you have linked the pop-up to an existing welcome flow, test the process with your email address to ensure it works properly.

Designing an Embedded Form

Embedded forms are forms placed throughout your website, such as in the footer or within specific pages. To create an embedded form, go back to the "Signup Forms" page in Klaviyo and click on "Signup Form." Choose the embedded form type and select a default template to start with. Name the form and connect it to the same list as the pop-up.

Connecting the Embedded Form to the Klaviyo Account

Make sure to customize the messaging and design of the embedded form to align with your branding. You can delete default blocks and tailor the content as desired. Double-check the behaviors, including the devices on which the form should appear. Copy the embed code provided by Klaviyo.

Embedding the Form on Your Website

Go to your Shopify store's "Online Store" section and select the page where you want to embed the form. Use the custom content or HTML code section to paste the embed code. Preview the website to ensure that the form appears correctly. The embedded form will collect email addresses from users who input their information.

Conclusion

By following the steps outlined in this article, you can successfully add signup forms and pop-ups to your website. These forms will help in growing your email list and allow you to nurture subscribers into buying customers. It is important to customize the design, set behavioral triggers, and test the functionality of the forms before publishing them. Remember to also create a welcome series to engage and convert subscribers effectively. If you have any questions or need further assistance, feel free to reach out to us in the comments.