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.
Klaviyo Element
In the Editor, drag and drop a Klaviyo: Email Marketing & SMS element onto your page.
Tip: You can drop it inside a Section to easily control the size.
Connect with Klaviyo
- Step 1: Get Code Snippet
- Step 2: Copy and paste the code snippet syntax into the box below and then press Connect
After successful connection, the system will notify and display the necessary settings as below
Popup and Flyout form type
If you have created popup and flyout form on Klaviyo Admin, by default the form will be activated when you drag the Klaviyo Element into the page
- 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 Custom Code. Please follow the instructions from Klaviyo here or contact our support team for further assistance.
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: Get embed code
- Under the Targeting & Behaviour tab on the left sidebar.
- In the confirmation popup when you Publish your form for the first time.
- Step 3: Enable option "Embed within this page". Then copy & paste the code snippet syntax into the box below
