1. Help
  2. Advanced
  3. Sharing, embedding & notifications
  4. Embed your typeform into your Shopify site

Embed your typeform into your Shopify site

Embedding a typeform 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 typeform you’d like to embed and click Publish to turn it live.

shopify1.png

2. Go to the typeform’s Share panel. Scroll 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.

shopify2.png

3. Click Get the code to get the embed code.

shopify3.png

4. Click Copy code.

shopify4.png

5. 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 typeform by clicking on it.

shopify5.png

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

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

shopify6.png

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

shopify7.png

8. Click Save.

shopify8.png

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

shopify9.png

Here’s an example:

shopify10.png

Nice work - your embedded typeform 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 typeform you’d like to embed and click Publish to turn it live.

shopify1.png

2. Go to the typeform’s Share panel. Scroll to the Embed in a web page section and click the Full-page embed mode.

shopify11.png

3. Click Get the code to get the embed code.

shopify12.png

4. Click Copy code.

shopify13.png

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

shopify14.png

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

shopify15.png

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

shopify16.png

8. 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.

shopify17.png

Click Create template once you’re done.

9. 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.

shopify18.png

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

shopify19.png

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

shopify20.png

12. Give the new page a name.

shopify21.png

13. 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.

shopify22.png

14. Click Save.

shopify23.png

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

shopify24.png

You can adjust the code on the template page, or the height and width parameters in the typeform embed code, to change the way the embedded typeform 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.

Tap into our community knowledge

Find Answers
Contact Support