Technical
1 min read

How to connect Klaviyo signup form to Shopify store

Written by Andriy Boychuk
Technical
1 min read

Sign up forms are an easy but sure way to collect your prospects’ emails. In this video, you’ll learn how to connect Klaviyo opt-in form to Shopify footer form.

Use this tutorial to connect a sign up form in the footer and anywhere else on your webstore. 

How to connect a newsletter, sign up form in the footer or anywhere on your Shopify store to Klaviyo? 

Hi, my name’s Andriy. I’m the founder of Flowium’s YouTube channel. Every week we are posting email marketing related video, client related video, or owned marketing videos, so stay tuned. In today’s video, I’ll show you how to connect Shopify sign up forms to Klaviyo.

First thing first, like this video I created a long time ago, I know it’s just 2018, but it’s even older and it’s outdated. That’s why I decided to re-record a new video. 

Make sure that code snippet is installed in your Shopify

So first, let’s go to Klaviyo. This is my Klaviyo demo account, and we need to make sure that code snippet is installed in your Shopify. 

  1. So first thing, go to Integrations. Make sure your Integrations’ active with Shopify. 
  2. Click on Shopify
  3. Click Automatically add Klaviyo onsite javascript (recommended).
    If it’s unchecked, make sure to check it and click update. So now it’s integrating, it’s updating.
  4. Then go back to Signup Forms, click Install Code Snippet. So it’s working, great.

How to customize a newsletter?

So here’s my Shopify, that’s the Shopify I use to do experiments. Okay, as you can see, when I scroll down, this is my newsletter. 

So you go to online store … By the way, just to make your life easier:  after you installed the snippets that I showed you, once the integration automatically adds the code snippet, you have to do nothing else. This newsletter is good and it’s already connected. There’s no extra action from you required. 

If you want to customize it, just click on Online Store, click Customize, click Footer, Newsletter, and add whatever copy you want to add to this part. 

Just a quick test. So here’s my profiles. So, let’s do andriyyoutubevideo@flowium.com. Okay, so now press the subscribe. It’s asking me if I’m not robot, subscribe. Cool. Let’s wait here. 

As you can see, it just appeared there, and it should be subscribed to a newsletter list. It’s not Shopify Tags, it’s a newsletter, and for some reason it’s not connected to my list, but it should. Okay, I’m not sure why it’s not connecting to the list, but the most important thing is getting to your Klaviyo, and you can start marketing to them. 

How to add the Klaviyo form?

However, if you still want to use a Klaviyo form, you can go here, delete this, remove content. So it’s not there anymore. Click Save, then go to your Klaviyo, Signup forms, Create sign up form

Let’s do sorted, and let’s do something like this. Select the list Newsletter, Create the form, make sure it’s showing a mobile desktop, and make sure it’s shown to all visitors. This is very important, because if you do only mobile, and you check in right now, it will not appear. So click Publish, copy this code, publish. It should be green, that means good. 

Go back to your Shopify, click on Online Store, Themes, add this code, password, type in footer. Okay. And we’re looking for footer.liquid. Okay, in this code, by the way, I’m not the coder, but this is tricky, so please follow me and trust me, you will do it the same way I do it. So click somewhere here in the window, so it’s active click command F or, I mean, whatever is search is on the Windows. I’ll type in site-footer_hr. So there’s one option, and to second one, we need this one and go back to… Here’s the code, go here, and paste it here. Click Save and refresh. 

As you can see, it appeared here. I mean, of course, you need to modify it in Klaviyo. Like how you want to do a blog, you can add a text here. You can do this part, where you do, I don’t know, 300 pixels. I don’t know, maybe you want to sign up at the bottom. Of course, you have to modify it, everything. But you get the idea, right? Maybe zero, I don’t know, like that? Publish, and on your refresh, it will be there. 

So basically, you install a code, and you do all the ads on Klaviyo, save on site and it will reflect on the Shopify site. If you want to move it somewhere, let’s say this form, down or up, you basically have to play with the code, with the positioning, where to place it, above or down below on the code. I found this, this place is the best one, because it shows on right under the other section, like quick links or whatever you have. 

So in case you have any additional questions, please leave them under this video. Thank you.

Talk email strategy with an expert