Unable to embed form to Shopify

Hello. I have done the steps to embed my form into my Shopify store. When I go to the store to view the form,https the complete form is not there.

Hi T&S,

Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

Let me help you with embedding your form into your Shopify store. When embedding, make sure you have copied the full embed code correctly and pasted it into your Shopify store's HTML where you want the form to appear. Sometimes, incomplete form display can happen if the embed code is cut off or if there are conflicts with Shopify's theme or scripts.

Here’s how to embed your form properly:

1. Copy the full embed code from your Jotform Publish tab.
2. Paste the embed code into the Shopify page's HTML editor where you want the form.
3. Save and preview your Shopify page to check the form display.

If the form still does not show completely, check if your Shopify theme or any apps are blocking iframe or script content, as that can cause incomplete loading.

Give it a try and let us know how it goes.

Let us know if you have any other questions.

Best regards,
Jotform Support

How do I check to see if iframe is blocked?

Hi tandsdesigns18,

Can you share with us a screen recording on how you setup the form on your Shopify store? You can use Loom or upload to Google Drive/Dropbox, then send us the link. Can you try embedding the form and check if the issue happens again? You can embed your form on your Shopify page in just a few easy steps. Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. In the menu on the left side of the page, click on Platforms.
3. Enter Shopify in the search bar and select it.
4. Then, click on the Copy Code button.

Now, you can paste the code in Shopify to add your form. Let me help you do it:

1. In your Shopify dashboard, click on Pages under the Online Store section in the menu on the left.

2. Under Pages, click on the page where you want to embed the form.

3. In the Content Editor, click the Show HTML icon (</>) on the right side of the toolbar and then, paste the code into the HTML box. 

4. Finally, click the Save button at the bottom right side of the page and that's it.

Your form is now embedded into your Shopify page:

You can also check out our guide about Adding a Form to Shopify Store for more information.

Give it a try and let us know if you need any other help.

I sent the screenshot. The issue is still happening.

Hi tandsdesigns18,

Looks like the screenshot didn’t come through on my end. Can you send it again? Our guide on How to Post Screenshots to Our Help Center shows you how to do that.

As soon as we hear back from you, we can work on getting you a solution for this.

Hi tandsdesigns18,

Can you try re-embedding your form on your Shopify store using IFrame method? Let me walk you through it:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. In the menu on the left side of the page, click on Embed.
3. Now, select the IFrame embed option you want to use, and click on Copy Code. Paste your code into your webpage's embed area, and that’s it.

Give it a try and reach out again if you have any other questions.

Where does the embed code go once I’m on my Shopify site?

Hi tandsdesigns18,

To embed your form in Shopify, you can add the code to the Online Store pages. You can add it alongside your other code in Shopify. Check out my colleague Jovito's answer above to see the steps to do it. You can check more of that in our guide about Embedding Your Form Into Shopify.

Let us know if there’s anything else we can help you with.

It’s still not working. The full form isn’t showing.

Hi Tandsdesigns18,

I've cleared your form caches; your forms are now refreshed. Can you clear your web-browser caches and then try again using Google Chrome's incognito mode? When I cloned your Custom T Shirt Order Form Template and embedded on my Shopify page, I could not replicate an issue. Can you try to embed using desktop version, and then check the embedded page in the Google Chrome's incognito mode? Let me share the results below:

Give it a try and let us know how it goes.

Hello. It’s still not showing the full form.

Hi tandsdesigns18,

Can you let us know what URL you embedded the form into? The initial link you sent is giving a 404 message.

A screen recording of the embed code you are using would help us see exactly what’s happening. You can use Loom or upload to Google Drive/Dropbox, then send us the link.

Once you get back to us, we can take the next step toward solving this.

T-s-boutique.com/pages/custom-t-shirt-form

Hi Tandsdesigns18,

I've cleared your form caches; your forms are now refreshed. Can you clear your web-browser caches and then try again using Google Chrome's incognito mode? Can you create a new page, then embed your form using the Shopify embed code? When I checked the embedded form URL you shared with us, I was only able to see the logo. Let me share the screencast below how I was able to embed the form on my Shopify page:

1. While you are in the Pages section in your Shopify account, click on the Add Page button from the top right corner of the page.
2.  In the Content Editor, click the Show HTML icon (</>) on the right side of the toolbar and to , paste the code into the HTML box. 
3. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
4. In the menu on the left side of the page, click on Platforms.
5. Enter Shopify in the search bar and select it. Then, click on the Copy Code button.
6. Paste the code into the Content Editor click the Save button at the bottom right side of the page and that's it.

Give it a try and let us know how it goes.

I’ve done those same steps several times, and the form is still not fully embedded. I can only see the logo when I go to the website.

Hello Tandsdesigns18,

Can you confirm if you were doing this from a desktop instead of the mobile browser? Also, mind making a quick screen recording showing how you were embedding it and what you’re seeing? Loom is an easy option, or you can upload to Google Drive or Dropbox.

After we hear back from you, we’ll know what’s going on and how to help.