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

@GetTheGiftShop - I looked at your page and I think one possible reason is you have multiple Klaviyo accounts associated with your Shopify. 

You might want to contact Klaviyo to see why there are two different Klaviyo accounts associated with your site. 

Aside from making sure you pasting the snippet code as source, and making sure the form is Published Live, that might be an issue too.

Thanks @retention for the great callout and explanation as to what is going on! I just edited your post to omit the klaviyo.js account IDs for @GetTheGiftShop for safety and security purposes.

We had a great writeup by @David To regarding this type of issue and how to check for it:

Typically this sort of console error arises when you have either duplicate Klaviyo.js present on your site all linked to the same account or if you happen to have multiple Klaviyo accounts accidentally integrated to the site. You can check to see if there this error is caused by a duplication in the Klaviyo javascript or by having multiple Klaviyo accounts by reviewing the Klaviyo.js snippets on your site through:

1. Going to your website
2. Viewing the Page Source or viewing the Inspector Tool
3. Control + F (or Command + F on Mac)
4. Search for the phrase Company_ID

If you were able to locate multiple instances of the same Klaviyo.js present on your site referencing the same Klaviyo Account ID, this may indicate that you have both the setting of Automatically add Klaviyo onsite javascript (recommended) enabled in your Shopify integration settings and have manually installed the Klaviyo.js snippet. In this case, we would recommend only one or the other; either allow Klaviyo to automatically inject the javascript or manually installing the javascript. To resolve this, I would suggest manually finding and removing this snippet from your theme file while only allow Klaviyo to automatically inject the Klaviyo javascript from the Shopify integration settings. (source)

I would recommend checking that community post out for those running into similar errors!

Alex

@alex.hong @retention Yes but how do I completely remove it if I can not log into the old Klavyio accounts? because I have no idea what the login info for those even is. 

I have found that I have 2 within my code when viewing the website source, but then when I go to edit code on my Shopify store > Theme.Liquid ...I no longer can find any Klavyio code in there?

Where do I go to remove this?

Hi @GetTheGiftShop,

If you are having trouble with getting into an account, I would recommend contacting Support as they are best suited to assist with problems like this. Their team should also be able to remove the duplicate klaviyo.js from your site as well.

This won’t be editable on the theme.liquid. Instead you would have to make some API calls to delete the incorrect account and disconnect it from your site. Again, the support team will be your best bet for this situation.

Thanks!
Alex

Hello 

I am also trying to embed a sign up form onto a page just for that.  Basically making my own landing page on my website.   I cannot get it to display.

I went to Themes --- Customize -- and since I want it on a specific page I went to the article at https://help.klaviyo.com/hc/en-us/articles/360006897412#shopify4

And tried to follow the steps 

1. Navigate to your Shopify admin
2. Go to Online Store > Themes
3. Click Customize > Add Section            THERE IS NO ADD SECTION when you are in pages!!!!! only on homepage can you add a section. SO what do I do?  

I want to know how to do this because I want to create several sign up forms in the future 

What am I missing?  

This is the page I am trying to put it on

https://olivegrovelife.com/pages/you-are-loved-bible-newsletter

Thank you so much! 

Hi there @Oliveblessed5,

Thanks for posting here and let me see if I am understanding correctly. In order to create a full-page subscribe Form, click on the appropriate List and navigate to the Subscribe & Preference Pages tab from the header navigation menu. Here, you can customize the styling of your subscribe page and add custom fields.After you have designed your subscribe page, simply copy the snippet of code and paste it to your site. I recommend reviewing our guide on Embed a Full Subscribe Page on Your Website for additional details and instructions on how to set this up.

Now if you are attempting to have a full subscribe page placing the code can be a bit tricky, knowing that it's an iframe it can technically go anywhere, but I'd recommend creating a new page in Shopify and adding the code into the source code of the page content. So you would create a new page and edit the HTML with the code:

​

Another alternative I would also recommend would be ​using a link to direct a customer to your Subscribe Page, for example having a link saying "Sign Up Here" and be directed to a Klaviyo-hosted signup page where a customer can sign up! You can read more about this using this article. 

Let me know if something needs clarification,

Alex
 

Thank you so much that worked!!!!!!!!

I can now try to figur out how to fix up the page 

Again THANK YOU SO MUCH! 

Great to hear @Oliveblessed5! Glad I could help.

Thanks for being a member of the Community!
Alex

Hi, I followed the above advice but this grey box keeps appearing where I’m trying to embed this embeded Klaviyo form into my shopify page. Please advise what I’m doing wrong, thank you! 

Hi there @sevenswim,

This could be occurring for a few possibilities. 

I would suspect that there's something on the website refusing the connection for the Klaviyo embedded form. Klaviyo's forms are all populated via the Klaviyo.js. So something on your site (or just your browser) is preventing that embed code from loading.

The website might be seeing this as an external source and thus blocking the connection for it. 

I would also double check to see the form is properly installed.

Let me know your findings,

Alex