Fully Customizable Klaviyo Legacy Embedded Email Signup Form in Shopify [AJAX] [4 STEPS]

Elghorfi Mohamed
4 min readOct 12, 2022

Klaviyo, is an e-commerce marketing automation platform for email marketing and SMS syncs your tech stack with your website store to scale your business.

A growth marketing platform that helps you deliver more personalized experiences across owned marketing channels like email, SMS, in-app notifications, and the web.

I used to use Embedded signup forms on my clients' stores using Klaviyo SDK, until I went into an issue. One of the stores got an issue with Fancybox and Flickity slider libraries, I couldn’t identify the root cause.

Just somehow, the Fancybox and Flickity slider libraries are not working anymore, took me more than a day to solve it (and TBH, I just taped it to solve the issue that time, solved but not in an ideal way, the important part is to make the site fully functional).

Later, got the same issue on another site, and finally, I discovered that the issue is related to the Klaviyo SDK script. When I remove the Klaviyo script everything seems to work fine, but when I put it back, the issue acquires again.

I had to find a solution to that, and like that, I decided to switch from SDK to a normal AJAX call to get the signup form to work without impacting other libraries. and this is what we will see in this article! follow my lead.

Easy Steps To Add a Custom Legacy Embedded Email Signup Form in Shopify — Elghorfi Mohamed

Today, we gonna learn a new trick in Shopify, we will learn how to create customizable embedded email signup using an Ajax call.

Check my article the same but using the Klaviyo SDK here.

Let’s begin!

I have prepared a readily customizable liquid section just for you, all you need to do is to add this liquid file to your themes sections and customize it as you want.

# STEP 1:

Copy/Paste the code below or download it to your local machine.

Download it from here.

# STEP 2:

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, and then click Actions > Edit code.
  • In the Sections directory, click Add a new section.
  • File the name on the popup, and hit “Done”.
  • Copy the code above and paste it into the new section. Then click “Save”.

#STEP 3:

In the top-left corner, click on the three dots and select “Customize theme” as in the picture below.

On the page opened, scroll to the bottom of the left sidebar until the end.

  1. Click on “Add section”.
  2. Search for “Klaviyo”.
  3. Click on the result “Klaviyo Newsletter”.

4. From the section settings, scroll to “Klaviyo List ID”, and copy/paste the “ListId” you took from Klaviyo following the steps below:

  • Login to your Klaviyo account.
  • Select your “List/Segment
  • Click on “Audience” then click “Lists & Segments”.
  • Then on “Settings”.
  • Here is your “ListId” like below.

Click Save and test your newsletter form. You should be able to see your email coming on the list.

So, this is the end of our article today, I hope you learned something from it.

Have a wonderful great day. Don’t hesitate to contact me if you have any questions. If you face any issues, you can reach out to me.

Follow me for more:

--

--

Elghorfi Mohamed

Frontend || Shopify Expert Developer || Shopify Consulting