How to Embed a Widget on Shift4Shop

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>

• Shift4Shop admin access. You need store owner or administrator access to edit pages, templates, and global site settings.
• A Shift4Shop plan that supports HTML editing. The free End-to-End plan includes full template editing. Ensure your plan supports custom code editing for template page methods.

Method 1: Page Content Editor (WYSIWYG)

Easiest — no code required

Shift4Shop's built-in page editor lets you add HTML content to any CMS page or extra page. This is the fastest way to embed a widget on a specific page.

1. 1

   Open the page editor

   In the Shift4Shop admin, go to Content > Site Content. Create a new page or click Edit on an existing one.

2. 2

   Switch to HTML source view

   In the WYSIWYG editor, click the "Source" or "</>" button to switch to raw HTML editing mode.

3. 3

   Paste your embed code

   Paste the Embeddy iframe embed code at the position where you want the widget to appear in the page content.

4. 4

   Save and preview

   Click Save and visit the page on your storefront to verify the widget renders correctly.

Method 2: Edit Template Pages

Intermediate — requires HTML knowledge

Shift4Shop uses HTML template files that control the layout of each page type. By editing these files, you can embed widgets on specific page types (home, product, category, etc.) across your entire store.

1. 1

   Open the File Editor

   Go to Settings > Design > Themes & Styles and click "File Editor" (or use the built-in Core Template Editor).

2. 2

   Select the template page

   Common template pages include home.html (homepage), product.html (product pages), frame.html (global wrapper), and page.html (content pages).

3. 3

   Add the embed code

   Place your iframe code at the desired location in the template:

<!-- Embeddy Widget -->
<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 and verify

   Click Save. Visit the corresponding page type on your storefront to confirm the widget appears.

Method 3: Global Header or Footer Script

Advanced — appears on all pages

Shift4Shop allows you to add custom HTML to the global header or footer, which appears on every page. This is useful for site-wide widgets or scripts that conditionally show a widget based on the current page URL.

1. 1

   Open Global Settings

   In the admin, go to Settings > General > Store Settings, or navigate to Marketing > SEO Tools > Header/Footer HTML.

2. 2

   Add your embed code to the footer

   Paste your Embeddy iframe embed code (wrapped in a container div) into the "Global Footer" or "Additional Script (Footer)" section:

<!-- Embeddy Widget (site-wide) -->
<div id="embeddy-global-widget" style="max-width: 800px; margin: 2rem auto; display: none;">
  <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>
<script>
  // Show widget only on specific pages
  if (window.location.pathname === '/' || window.location.pathname.includes('/product/')) {
    document.getElementById('embeddy-global-widget').style.display = 'block';
  }
</script>

3. 3

   Save and verify

   Click Save. Visit your store to confirm the widget appears on the intended pages.

Embedding on Product Pages

Product pages are a great place for interactive Embeddy widgets. Common use cases:

• Size guides — help shoppers find the right fit before purchasing
• Product configurators — let customers customize options visually
• Compatibility checkers — verify parts or accessories fit together
• Savings calculators — demonstrate value for premium items

Edit the product.html template (Method 2) to add widgets to all product pages. For individual products, use the product description editor (Method 1 approach) to embed the widget code in a specific product's description.

Troubleshooting

Frequently Asked Questions