How to embed an iframe in Shopify

Steps

1. 1

   Step 1: Click Edit theme

   In your Shopify admin, go to Online Store. Find your theme, then click Edit theme.

2. 2

   Step 2: Select the template

   Use the Home page drop-down menu to select the template of the page that gets the frame.

3. 3

   Step 3: Click Add section and select Custom Liquid

   Type "Custom Liquid" in the Search sections field. For a block, hover over a section, click Add block, and search the same way.

4. 4

   Step 4: Paste the iframe code

   Paste the code into the code field of the section or block. The field takes HTML and a limited set of Liquid.

5. 5

   Step 5: Click Save

   If you edit the published theme, the change is live after you save.

Limits

• A Custom Liquid section or block shows only in themes that offer it.

• The code field holds 50 KB or less, and Shopify closes unclosed HTML tags when you save.

• Custom Liquid cannot use some Liquid objects and tags, such as section, javascript and schema.

• Page and blog post content is limited to 64 KB, and the rich text editor can change HTML when it corrects the format.

Troubleshooting

The frame is blank

The page sends X-Frame-Options or a CSP frame-ancestors rule. Test the URL to see which header blocks it.

Blank iframe, no error →

"Refused to connect"

The site does not allow other sites to frame it. Only the site owner can change that header.

"Refused to connect": cause and fix →

The frame is too small on phones

A fixed width in the iframe code does not shrink. Set the width to 100% and give the frame a height or an aspect ratio.

Make an iframe responsive →

Related