How to Add a Klaviyo Form to Shopify Debut Theme

Klaviyo is definitely a good tool to start email marketing campaigns. The ease of use is a big help for beginners. Makes getting a return on your investment much easier than other email marketing platforms on the market.

 

There is so much targetting and automation you can do from within Klaviyo. One of these is adding a Klaviyo Form to your Shopify free theme. In this series, we will tackle the Debut free theme.

 

Add a Newsletter Sign up Form

The first thing that we need to do is to add a newsletter sign up form. This is typically on the bottom part of your website. If you don’t have that form, then you need to enable that feature first before you can use the Klaviyo form.

 

To add a newsletter sign up form:

1. Go to your Online Store Admin Page then, click the “Customize” button on the Current Theme area.

shopify admin

 

2. Under the Section tab, click “Footer” to customize your footer then, look for the “Show Newsletter Sign up” checkbox.

shopify footer section

 

3. Put a check on it if it doesn’t have any yet then click the “Save” button located on the top right.

shopify footer newsletter

 

So that’s how you add a newsletter sign up form.

 

Add a Klaviyo Form Snippet to Shopify

What we need to do next is to add a Klaviyo-Form snippet to Shopify.

 

1. Go to your Online Store Admin Page then, on the Current Theme area, click the “Actions” drop-down and select “Edit Code“.

shopify current theme

 

2. Type in “Snippets” on the search field then select “Add a New Snippet” on the results.

 

3. Name your snippet “Klaviyo-Form” then click the “Create Snippet” button.

shopify add snippet

 

As you notice that it is just a blank file. Let’s grab the source code from a Klaviyo List.

shopify klaviyo form

 

4. Go to your Klaviyo main dashboard then, click the “List & Segments” section on the left side.

 

5. Select the list that you wish to sync your sign up form then, click the Sign Up Forms tab.

klaviyo list segment

 

6. Click the “Standard Embed” sign up type then, scroll down to the bottom on where the code is.

klaviyo standard embed

 

7. Copy the source code then go back to your Shopify Theme editor and Paste the code in.

klaviyo code

 

8. Click the “Save” button located on the top right once the code is already in.

shopify klaviyo liquid

 

Replace the Default Debut Theme Sign up Form

Now that we have added a Klaviyo-Form snippet, what we need to do next is to replace the default Debut Theme Sign up Form with your Klaviyo Form.

 

1. Go back to the theme edit code then search for “Footer” on the search field and select footer.liquid to edit the footer code.

 

2. On your Keyboard, press “CTRL+F” for Windows or “Command+F” for Mac then type “Form” on the search field.

 

3. Look for the tag for the start of the form that looks like this 

Get Free Widget
 and the end tag that looks like this: 

 

4. Highlight the entire form block then press “CTRL+/” for Windows or “Command+/” for Mac to comment it out.

 

5. Below the Endform Tag, add a new line by pressing enter then add an Include statement tag for the “Klaviyo-list.liquid” file that we just created. So Type this in.

shopify footer liquid

 

6. Click the “Save” button on the top right to finalize everything.

 

Now when we go visit your storefront website, the default sign up form is now replaced with your Klaviyo sign up form.

And that ladies and gents are the steps on How to Add a Klaviyo Form to Shopify Debut Theme.

 

 

Want us to walk you through it? Watch the video here!
 
 

Do You Want To Expand Your E-commerce Business?

If you want to expand your e-commerce business on different platforms, check out our other E-commerce Tutorials.

Just to let you know, we have a couple of experts who have excelled in E-commerce and are willing to share their knowledge. You can out check their blogs at https://blog.sellerschoice.digital/

If you want to hear them live, just sign up for our webinar.

 

e-commerce tech stack ebook

TELL US YOUR THOUGHTS!

FREE CONFERENCE LIST

Gain access to our exclusive list of top rated events for e-commerce sellers

ENTER YOUR EMAIL TO DOWNLOAD YOUR FREE LIST OF E-COMMERCE EVENTS BELOW!

Get E-Commerce News Right To Your FB Inbox!

fb-toys-img
SUBSCRIBE TO SELLER’S BOT