If you're using Klaviyo's new embedded signup forms, after you install the general signup form code, you'll need to paste a short snippet of code on your site. Where you paste this code will depend on where you would like the embedded form to appear.
This step is unique to embedded forms and is not required for popups or flyouts. Once you paste the embed code on your site, you will be able to edit your form within Klaviyo without having to worry about updating the snippet when you're ready to publish your changes.
Create an Embedded Form
Once you have your form styled the way you would like, there are two places you can grab the form's embed code:
- In the Behaviors tab.
- When publishing an embedded form, you will see a modal that also prompts you to paste the embed code on your site, as outlined in our article on installing signup forms.
When you're finished styling your form, publish it so that it will be visible when you paste the embed code on your site.
Paste the Code on Your Site
Where you should paste the code on your site will depend on where you want the embedded form to appear and will vary by integration. Below, we've outlined some example use cases.
By default, browsers who subscribe to your newsletter through your Shopify signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your Shopify embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list. Learn more.
First, navigate to your Shopify admin and go to Online Store > Themes. Then, click Actions > Edit code.
Open your footer.liquid theme file. Let's say you would like to have your signup form display above your site's copyright information. Search for the term "copyright" in the file.
Next, on a line above the opening <div> for the copyright code, paste the form embed code.
Click Save, and the form will appear in the footer of your site.
By default, browsers who subscribe to your newsletter through your Shopify signup form are automatically added to your Klaviyo newsletter list through the integration. Learn more.
If you would like to include an embedded form on your Shopify site anywhere besides the footer, you can do so using a Custom HTML block.
First, navigate to your Shopify admin and go to Online Store > Themes. Then, click Customize > Add Section. Here, you will either see the option to add a Custom content or a Custom HTML block. If you see Custom content instead of Custom HTML, add this block and delete the default content that populates. Next, click Add content > Custom HTML.
Here, you can paste in your embed code.
Shopify Password Page
If you'd like to collect newsletter signups before your site is live on a landing page, you can use a Klaviyo form to ensure that these contacts are synced to your Klaviyo newsletter list. To do this, navigate to your Shopify admin and go to Online Store > Themes. Then, click Actions > Edit code.
Next, open your password-content.liquid theme file. You will first need to install the Klaviyo form installation code, as the password-content.liquid file does not leverage the theme.liquid file. You can find the code installation instructions and snippet in this article. Add the snippet to the end of the file.
Please note that any published forms you have in your account will appear on this page once you install the snippet unless you specify for them not to be shown on the specific URL.
Next, comment out the default Shopify signup form so that you can replace it with your Klaviyo form.
Finally, paste your Klaviyo embed code above the commented out Shopify embed. Once you save the file, the Klaviyo embedded form will appear on the password page on your site.
BigCommerce - Stencil Footer
If you're using a Stencil theme for BigCommerce, you can replace your default embedded form with a Klaviyo form by locating the default form in your theme files. First, navigate to your BigCommerce store's admin and click Storefront > My Themes. From the My Themes area, click the dropdown menu and select Edit Theme Files.
Here, you'll be brought to a page where you can edit your theme's code. Once you're in the editor, click templates > components > common > footer.html. This is where the default newsletter signup form is located.
Next, search for the term "newsletter." Once you find the code associated with the default newsletter form, you can either comment it out or delete it. Paste your Klaviyo form code above this code.
In the example above, we commented out the default form code and inserted the Klaviyo embed code beneath the footer class to retain the same look and feel as the default code. This will ensure that the form is formatted similarly and appears in the same location in the footer.