Embed your form into your Shopify site

Embedding a form into your Shopify site is easy to do using Typeform’s embed code. Read on to learn how to use standard and full-screen embeds in Shopify.

Standard embeds (non-full screen)

1. Create the form you’d like to embed and click Publish to turn it live.

2. Go to the form’s Share panel. Go to the Embed in a web page section and choose the embed mode you prefer for your form. Here, you can use anything except the Full-page option. We’ll choose a Standard embed.

Click Start embedding to get the embed code.

3. A pop-up will appear, click the dropdown and select Shopify.

Click the Copy button to copy the embed code.

4. Log in to your Shopify site. From the left-hand menu, open your Online Store. Click Pages, then open the page where you’d like to embed your form by clicking on it.

Alternatively, you can click Add page in the upper right-hand corner to create a new page.

5. Click the Show HTML button within the page editor.

6. Paste in your embed code in the location where you’d like it to appear on the page.

7. Click Save.

8. The embedded form won’t appear in the page editor, but you can click View page to see how the form looks on your live site:

Here’s an example:

Nice work - your embedded form is now active on your Shopify site!

Full-screen embeds

This option requires you to edit your Shopify theme code. If you’re not comfortable editing this code, or are not a proficient user of Shopify’s Liquid template language, Typeform recommends that you have a developer colleague on hand before trying a full-screen embed. Note that the Typeform team cannot provide support for custom site code.

1. Create the form you’d like to embed and click Publish to turn it live.

2. Go to the form’s Share panel. Click Embed in a web page, then click the Full-page embed mode.

Click Start embedding to get the embed code.

3. A pop-up will appear, click the dropdown and select Shopify.

Click the Copy button to copy the embed code.

4. Log in to your Shopify site. From the left-hand menu, open your Online store, and then open Themes.

5. Open the drop-down menu next to Current theme and select Edit code.

6. On the code editing page, click Add a new template under Templates in the left-hand menu.

7. From the left drop-down menu, choose what template type you’d like to base the new template on. Here, we’ve chosen page. Choose whether you’d like to create a JSON or Liquid template type - we’ve chosen liquid, which is the language Shopify uses for its themes. Then, give the new template a name.

Click Create template once you’re done.

8. The template code will automatically load in the code editor. Paste in your Typeform embed code - here, we’ve done it between the page title and the page content. Click Save once you’re done.

9. In the left-hand menu, navigate to Pages under Online Store.

10. Click Add page in the upper right-hand corner.

11. Give the new page a name.

12. On the right-hand side of the page, click the drop-down menu under Theme template, and choose the page suffix that belongs to the template you created in steps 6-8.

13. Click Save.

14. Click View on your online store to view how the embed looks on your live Shopify site.

You can adjust the code on the template page, or the height and width parameters in the form embed code, to change the way the embedded form looks on the website. However, Typeform cannot recommend one-size-fits-all solutions for custom code, so it’s best to check with a developer colleague before editing your Shopify code.