Embedding in Shopify

Standard embed (page editor)

This is the easiest path — works on every Shopify plan.

1. Open your Shopify admin → Online Store → Pages.
2. Click the page where you want the calculator (or Add page).
3. In the editor toolbar, click the < > (Show HTML) icon. The editor switches to raw HTML mode.
4. Paste the iframe code from Dashboard → Embed where you want the calculator.
5. Click Save.

The < > toggle is the critical step — without it, the Shopify rich-text editor escapes the iframe tags and you'll see the raw <iframe ...> markup on the live page instead of the calculator.

Embed via Custom Liquid (Online Store 2.0)

If you want the calculator inside an existing template (not on a standalone page), use the Custom Liquid section block:

1. Online Store → Themes → Customize on your active theme.
2. Navigate to the template where the calculator should appear (Home, Product, a specific Page).
3. Click Add section → choose Custom Liquid.
4. Paste the iframe code into the Liquid code field.
5. Click Save.

Embed via theme code (advanced)

For full control — for example, dropping the calculator inside a specific section file:

1. Online Store → Themes → click the ⋯ menu on your active theme → Edit code.
2. Open the template or section file where the calculator should render (e.g. templates/page.calculators.liquid, or a file under sections/).
3. Paste the iframe code where you want the calculator.
4. Click Save.

Floating widget

The floating widget needs to be added to your theme's layout file so it appears on every page:

1. Online Store → Themes → ⋯ → Edit code.
2. Under Layout, open theme.liquid.
3. Paste the floating widget code (from the floating widget guide) just before the closing </body> tag.
4. Click Save.

Common Shopify issues

"The page is showing the raw <iframe> HTML instead of the calculator"

You skipped the < > (Show HTML) toggle in the page editor. Shopify's rich-text mode escapes HTML tags. Open the page, click the HTML toggle, and re-paste the embed code.

"The iframe shows but is the wrong height"

Shopify themes sometimes strip the inline <script> block that handles auto-resize. Two options:

1. Set a generous fixed height in the iframe code (e.g. height="1200") so it doesn't clip with results expanded.
2. Move the auto-height <script> block into theme.liquid (just before </body>) so it loads once site-wide and applies to every CalcWidgets iframe.

"I want the calculator on /collections/all or a similar built-in page"

Built-in collection pages aren't directly editable in the Pages section. Two options:

1. Create a new dedicated page (e.g. /pages/calculators) and embed there.
2. Use the Customize theme editor and add a Custom Liquid block to the collection template (Online Store 2.0 themes).

"The script tag is being removed"

Some Shopify themes (especially older 1.0 themes) sanitise inline scripts in page content. If the auto-resize script is being stripped:

• Move the script to theme.liquid site-wide (see the "wrong height" fix above).
• Or use a fixed-height iframe — drop the script and set height="1200" directly on the <iframe> tag.