Customer Ed.

How can I add an embedded form to a page on my Shopify Store?

Forum|Forum|5 years ago
November 27, 2020
25 replies
15463 views

To add a Klaviyo embedded form to your Shopify website, head to your store’s Pages (e.g., YOUR-STORE.myshopify.com/admin/pages). Then, select the page where you want the form to live or click Add page to create a new page.

Click into the source (< >) for this page. Copy and paste the embedded signup form code into the source. Head to our article on How to Find Where to Paste a Form's Embed Code: Create an Embedded Form to learn where to find your embedded code.

Finally, click Save and check that your form looks as expected.

Sign-up forms

jjaworsky

Contributor IV

My form appears but cannot get it to center on my Shopify page. What I am doing wrong? It is left justified.

Jan J. from ScarfLady

David To

Klaviyo Employee

Hello @jjaworsky,

I would first recommend ensuring that your signup form is published to the latest version within Klaviyo. Any changes you make within the signup form builder in Klaviyo will not be published onto your page until you’ve gone through and published it.

If your form looks to be rendering correctly as you designed within the Klaviyo signup form builder and published to the latest version and still appears to be mis-rendered, I would recommend double checking if you happen to have any onsite CSS that may be impacting how your form appears. I elaborated further on this in another Community Post which you can find below:

I hope this helps!

David

S

StephCosta

Contributor I

I added the embedded form to a “page” like stated above, and when i went to my store it was simply a link. when i clicked on it i saw the box i created on klaviyo in a new page. how do i make it so its just on the footer of the main page?

David To

Klaviyo Employee

Hey @StephCosta,

I would suggest taking a look at the Shopify subsection in the Where to Paste a Form's Embed Code Help Center Article to guide you on how to embed a signup form onto your website. From the experience you are detailing, it sounds like you may have either create a new page on your website where this embedded form is housed or you may have added this embed form within some other lines of code within your website which may be causing it to redirect to another page.

David

S

StephCosta

Contributor I

oh my goodness i got it to work! thank you! The only thing is, I deleted the old newsletter sign up code and replaced it with my code for the klaviyo sign up. I assumed that meant it would go in the same spot. but its all funky and not in line with the other things in that row. Any idea how to figure out how to fix that? the spacing of it? I included a pic so you can se what i mean. The arrow pointing where I wanted it to go!

David To

Klaviyo Employee

Hey @StephCosta,

Glad you got it working!

I would suggest reviewing the codes surrounding the area where you intend the Klaviyo embedded form to appear and making some appropriate adjustments in the code to align it properly if needed.

Since this does pertain to working on your site’s code, I would suggest working with a site developer or finding a Klaviyo partner who can better assist with this.

Thanks for being a Klaviyo Community Member!

David

S

StephCosta

Contributor I

Will do, thank you!

L

LanaHooper

Contributor I

Hi, I have followed all the instructions and pasted the code into the source (< >) for a page in Shopify but when I preview the page where the form is supposed to be its just blank. It’s all saved in Shopify and live in Klaviyo, just not showing up at all. Any advice appreciated. I have just moved over from Active Campaign and have used their forms before in the same way.

David To

Klaviyo Employee

Hello @LanaHooper,

Since it sounds like you are trying to add an embedded Klaviyo form to a specific page on your Shopify site that is not meant for the footer; can you confirm if instead of adding the embedded form’s <div> code directly to the page source code, you’re adding a Custom content or a Custom HTML block to the page first. Following adding these sections to your page, you’ll want to add the embedded form’s <div> code to these sections. You can also find a GIF of how to perform this action from the Where to Paste a Form's Embed Code article which i’ve included below for your convenience: