← Back to Projects Shopify + Klaviyo

Custom Klaviyo Event Signup Form

Created a dedicated Shopify page for Klaviyo signup forms used for events. I also added custom JavaScript so the correct form opens directly from the page.

Shopify Liquid Klaviyo JavaScript HTML CSS
Platform Shopify + Klaviyo
Technology Liquid / JavaScript
Project Type Event Signup Form
01 — THE CHALLENGE

The Klaviyo Form Had a Delay

The signup forms were created in Klaviyo and used for different events. The default popup behavior was not ideal for this type of event signup.

01

The Problem

Visitors had to wait for the Klaviyo popup to appear. For event registration, I wanted the signup form to be available right away.

02

The Solution

I created a custom Shopify page template and used JavaScript to open the Klaviyo form directly instead of waiting for the normal popup trigger.

02 — IMPLEMENTATION

How I Set It Up

I kept the existing Klaviyo forms and connected them to a custom Shopify page.

  • Created a custom Shopify page template.
  • Added the Klaviyo form to the page.
  • Added JavaScript to open the form.
  • Used the event name in the URL to choose the correct form.
  • Tested the different event forms.

Tools Used

Shopify Liquid Klaviyo JavaScript HTML CSS
03 — HOW IT WORKS

Simple Setup

The URL tells the script which Klaviyo form should be opened.

Event Link URL contains event
→
Shopify Page Custom template
→
JavaScript Checks the event
→
Klaviyo Form Correct form opens
04 — CODE

JavaScript Used

The script checks the event name in the URL and opens the matching Klaviyo form.

JavaScript 
document.addEventListener("DOMContentLoaded", function() {
```

const urlParams = new URLSearchParams(window.location.search);
const event = urlParams.get("event");

window._klOnsite = window._klOnsite || [];

if (event === "dti") {
window._klOnsite.push(['openForm', 'UKUJt5']);
}

if (event === "women") {
window._klOnsite.push(['openForm', 'T8gRAu']);
}

if (event === "greenhills") {
window._klOnsite.push(['openForm', 'WVPTyU']);
}

});
```

Each event has its own Klaviyo form ID. The script checks the URL and opens the correct form.

05 — OUTCOME

Easier Event Signup

The event signup forms could be opened directly from a dedicated Shopify page instead of waiting for the normal popup behavior.

The setup also allowed different event links to open different Klaviyo forms.

06 — KEY TAKEAWAYS

What I Worked On

Shopify

Created a custom page template for the event signup page.

Klaviyo

Used existing Klaviyo forms for event registration.

JavaScript

Added simple logic to open the correct form.

Problem Solving

Found a simple way to work around the default popup behavior.

More Shopify Projects

See more of my Shopify, Klaviyo, CRO, and custom-code work.

← Back to Projects
```