Fully Customizable Klaviyo Legacy Embedded Email Signup Form in Shopify [AJAX] [4 STEPS]
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.
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.
# 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.
- Click on “Add section”.
- Search for “Klaviyo”.
- 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.
