How to Embed a Widget on Shopify

Prerequisites

Before you start, have the following ready:

• Your Embeddy embed code. Log in at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code:

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

• Shopify admin access. You need Owner or Staff access with the Online Store permission to edit themes.
• An Online Store 2.0 theme (for Method 1 and Method 3). OS 2.0 themes include Dawn, Sense, Craft, and most modern Shopify themes. Older themes may not support Custom Liquid sections.

Method 1: Theme Editor — Custom Liquid

Easiest — no code required

The Shopify Theme Editor is the visual customizer built into every Shopify store. On OS 2.0 themes, you can add a Custom Liquid section anywhere on a page and paste your embed code directly — no code editor required.

1. 1

   Open the Theme Editor

   In your Shopify admin, go to Online Store > Themes, then click "Customize" next to your active theme.

2. 2

   Navigate to the right page

   Use the page selector at the top of the editor to navigate to the page or template where you want the widget (e.g., Home, a specific page, or a product template).

3. 3

   Add a section

   In the left panel, click "Add section" at the position where you want the widget to appear. In the section browser that opens, select "Custom Liquid". If you do not see Custom Liquid, your theme may not support OS 2.0 — use Method 2 instead.

4. 4

   Paste your embed code

   The Custom Liquid section will appear in the left panel with a text area labeled "Liquid code". Paste your Embeddy iframe embed code there.

5. 5

   Save

   Click "Save" in the top-right corner of the Theme Editor. The live preview on the right should update immediately to show your widget.

Method 2: Edit Theme Files Directly

Intermediate — requires basic Liquid knowledge

If you want to hard-code the widget into a specific template (e.g., every product page, or a custom page template), you can edit the theme's Liquid files directly. This approach works on all Shopify themes, including older ones that do not support OS 2.0 sections.

1. 1

   Open the code editor

   Go to Online Store > Themes, click the three-dot menu next to your theme, and select "Edit code".

2. 2

   Open the target template

   Under the Templates folder in the left panel, open the file you want to modify. Common files are page.liquid (for standard pages) or product.liquid (for product pages).

3. 3

   Paste the embed code

   Place the iframe inside a wrapper div at the desired location in the template. Here is an example for a product page:

{% comment %} Embeddy Widget {% endcomment %}
<div class="embeddy-widget-wrapper" style="max-width: 800px; margin: 2rem auto;">
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    width="100%"
    height="500"
    frameborder="0"
    style="border: none; border-radius: 8px;"
    loading="lazy"
    title="Interactive Widget"
  ></iframe>
</div>

4. 4

   Save the file

   Click "Save" in the top-right. Visit the corresponding page on your live store to confirm the widget appears.

Method 3: Reusable Custom Liquid Section

Advanced — merchant-configurable via Theme Editor

For the most flexible setup, create a reusable Liquid section file. Merchants can then add this section to any page via the Theme Editor and configure the embed code there — without touching any code after initial setup. This is ideal for agencies or store owners who want to swap widget IDs from the Theme Editor UI.

1. 1

   Open the code editor

   Go to Online Store > Themes > Edit code.

2. 2

   Create a new section file

   In the left panel, find the Sections folder and click "Add a new section". Name it embeddy-widget. Shopify will create a file at sections/embeddy-widget.liquid.

3. 3

   Paste the section code

   Replace the file contents with the following. The schema block creates a configurable setting that merchants can fill in from the Theme Editor.

{% comment %}
  sections/embeddy-widget.liquid
  Reusable Embeddy widget section — configurable via Theme Editor
{% endcomment %}

<div class="embeddy-section" style="max-width: 900px; margin: 2rem auto; padding: 0 1rem;">
  {% if section.settings.embed_code != blank %}
    {{ section.settings.embed_code }}
  {% else %}
    <p style="color: #999; text-align: center; padding: 2rem;">
      Add your Embeddy embed code in the Theme Editor to display your widget here.
    </p>
  {% endif %}
</div>

{% schema %}
{
  "name": "Embeddy Widget",
  "tag": "section",
  "class": "embeddy-widget-section",
  "settings": [
    {
      "type": "html",
      "id": "embed_code",
      "label": "Embeddy Embed Code",
      "info": "Paste your Embeddy iframe embed code from embeddy.ai/dashboard"
    }
  ],
  "presets": [
    {
      "name": "Embeddy Widget",
      "category": "Custom content"
    }
  ]
}
{% endschema %}

4. 4

   Save the file

   Click "Save". The section is now available in the Theme Editor.

5. 5

   Add the section via the Theme Editor

   Go to Online Store > Themes > Customize. Click "Add section" and you will now see "Embeddy Widget" listed under Custom content. Add it, then paste your embed code into the "Embeddy Embed Code" field in the left panel.

Embedding on Product Pages

Product pages are one of the most powerful places to embed an Embeddy widget. Common use cases include:

• Size calculators — help shoppers find the right size before purchasing
• Compatibility checkers — ensure accessories or parts work together
• Product configurators — let customers customize color, engraving, or options
• ROI or savings calculators — demonstrate value for high-ticket items

To embed on every product page, use Method 2 (edit product.liquid) or Method 3 (add the custom section to the Product template in the Theme Editor).

To embed on only specific products, create a separate page template (e.g., product.with-widget.liquid) and assign that template to specific products from the product editor sidebar.

Troubleshooting

Frequently Asked Questions