How To Use The Klaviyo Embed Form On Shopify

Backend developer using 3 computers
by Aaron Burton

by Aaron Burton

Embedding your forms in klaviyo is as simple as

  1. Creating an embed form in klaviyo
  2. Publishing embed form
  3. Copying embed code
  4. Pasting code in your shopify theme footer.liquid

Creating your embed form

Let’s create our form! In klaviyo click on the sign up forms tab then select the blue create signup form button.

Klaviyo signup form page
klaviyo sign up form
klaviyo newsletter selection

Click on behaviors and you will see your embed code. Copy this to a notepad. Sometimes things don’t copy correctly so its best to have it saved somewhere.

Klaviyo copy embed code screen

Publish your embed form

Lastly click on publish form. It will prompt you to copy the code yet again if you haven’t already…

Add embed code screen

Copy embed code

Your embed code will look like this below. It’s a simple div tag. A tag is anything between the greater and less than signs <>. Tags are also closed with the slash like this</>. In a nutshell the div tag defines a division of the HTML document ie your website. A class is just an attribute which can be called upon using css. Classes are used to categorize a Z. In this case “klaviyo-form-MDBcqA” is the class the div is referencing.

Paste Code In Your Shopify Theme footer.liquid

To place the code go to online store -> themes ->actions -> Edit code.

An alternative way to get to the code area is by going to online store -> themes -> customize -> Theme actions -> Edit code.

The latter is definitely not the fastest way however if your already customizing your theme it’s literally only a mouse click away.

Once your in the theme editor do a search for footer and click footer.liquid

Edit code action in shopify
Footer search in shopify theme editor

Next place the code right above the copyright code. Do a search for “copy” to find this area of the code faster instead of having to scroll through the entire thing.

Placing the embed code above the copywrite code

Once you save it your form will display at the footer of your site.

Frequently Asked Questions

Where do you see embed form analytics?

One of the reasons why I love klaviyo is because of their advanced analytics. Reading your form data is really easy in klaviyo. Simply go to dashboard -> analytics and click on forms overview. For a more in depth overview of klaviyo report features read this article.

Can you embed videos in klaviyo?

At the moment it isn’t possible to embed videos directly into klavito. Its best practice to upload an image of a video thumbnail and hyperlink it to an actual video. This can either be a youtube video or a video hosted on your ecommerce store. , you can embed gifts in however. Just note that if the persons bowers just so happens to not support X or Y the content will not load. Gifs are the safest option. Videos tend to not load as fast.

Are Their Alternatives To Klaviyo Forms?

Yes, I recommend using optinmonster. If you get the optinmonster shopify app it will automatically link the form on your page without having to mess with the theme liquid. There are also other benefits such as a more robust form editor, added conditions, & a Yes/No gate to make your visitors make an extra microcomment. The latter has been proven to increase optin rates.

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

Leave a Comment

Your email address will not be published. Required fields are marked *