How To Add Klaviyo Form To Your Page

Before we start, make sure you have the Klaviyo: Email Marketing & SMS app installed on your Shopify Store. Visit our article about How To Install The Klaviyo App On Your Store for full instructions.

Embed form type

Step 1: Create a signup form in Klaviyo following this guidance and set your form type to Embed. Skip this step if you have already created the Klaviyo form you need.

 


Note: Please note that by default, all Klaviyo lists are set to double opt-in, meaning that subscribers of the form will have to confirm their registration one more time via either email, SMS, or both. See this article from Klaviyo to learn more.


Step 2: Copy the Klaviyo form ID. There are two ways to find your form code ID on the editor page:

  • Under the Targeting & Behaviour tab on the left sidebar.

 

  • In the confirmation popup when you Publish your form for the first time.

 

 

You only need to copy the 6-letter Klaviyo form ID instead of the whole embed code.

 

Step 3: Go to GemPages Dashboard and select a page to enter the Editor.


Step 4: In the Editor, drag and drop a Klaviyo: Email Marketing & SMS element onto your page.

Tip: You can drop it inside a Row element to easily control the size.

 

Step 5: Under the Settings tab, locate the Form Code field and paste the form code you’ve copied earlier into the field.

 


You can use the Alignment options on the left sidebar to position the form better. Don’t forget to further customize your form’s appearance using the Design tab.


Step 6: Hit Save and Publish to bring your form to the live page and check for the result!

 

Popup and Flyout form type

Step 1: Create a signup form in Klaviyo and set your form type to Popup or Flyout. Skip this step if you have already created the Klaviyo form you need.

 

Step 2: Select the Targeting & Behaviour tab on the left sidebar. Under the Display and Timing section:

  • If you select the options "Show immediately on page load" or "Loading delay", the sign-up forms will be shown on your pages after being published without any problem.
  • If you select "Only show on custom trigger", you will need to add the code snippet to your page using our Liquid element. Please follow the instructions from Klaviyo here or contact our support team for further assistance. 

 

You also can check out our video tutorial on how to add Klaviyo form to your page step by step.

 

 

 

Klaviyo is just one of our many integrations. Check out the full list of integrations to make the most out of GemPages and if you need further support, please contact our GemPages Support Team via email or live chat.


Was this helpful?