Tutorial
How to Add a Mortgage Calculator to Shopify
Add a working mortgage calculator to any Shopify page in under 3 minutes. The widget loads inside an iframe and updates results as users type.
Before you start
Shopify has no free plan for stores. Basic Shopify ($39/month) and all higher plans support the Custom Liquid code editor and iframes. Shopify Blog posts and Pages both accept HTML content.
Step-by-step
- 1
Open Shopify admin and the target page
Log in at admin.shopify.com. From the left menu, click Online Store > Pages (or Blog Posts). Click the page you want to edit, or click Add Page / Add Blog Post to create a new one.
- 2
Switch to HTML view
In the content editor, look for the Show HTML button (usually a "<>" icon in the toolbar). Click it. The editor now shows the raw HTML of the page.
- 3
Paste the iframe in the content
Place your cursor where the calculator should appear. Paste the embed code below. Do not wrap it in extra <p> tags — Shopify auto-adds those, which can break the iframe. If the iframe appears inside <p> tags after saving, remove them in HTML view.
- 4
Save and preview
Click Save in the top-right. Then click the View Page link (or open the page URL directly). Confirm the calculator renders and the input fields accept values.
- 5
Test on mobile and other pages
Open the page on your phone. Shopify themes auto-fit content width, so the calculator should be full-width. If the bottom is cut off, return to HTML view and change height=900 to height=1100.
The embed code
Copy this exactly. It works on Shopify and every other supported platform.
<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="900" style="border:0;border-radius:12px;max-width:900px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>Sidebar or narrow layout
For a sidebar placement inside a Shopify theme, wrap the iframe in a div with style="max-width:400px". Increase height to 1100 to accommodate stacked layout.
<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="1100" style="border:0;border-radius:12px;max-width:400px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>Frequently asked questions
Does the calculator work on Shopify free trial?
The trial period supports the same code editor as paid plans. Once the trial ends and you downgrade to Pause and Build ($14/month), pages still render but the storefront is not public. Any active Shopify plan ($39/month or higher) works fully.
Will the calculator conflict with my Shopify theme?
No. The iframe is isolated. Themes cannot style iframe content from outside, and the calculator cannot leak CSS or JavaScript into the theme. No visual conflicts are possible.
Can I add the calculator to a product page?
Product pages are edited through the theme editor, not the content editor. Go to Online Store > Themes > Edit Code, then modify the product template (usually product-template.liquid or main-product.liquid) and add the iframe where you want it.
Does the calculator work with Shopify 2.0 themes?
Yes. Shopify 2.0 themes (Dawn, Refresh, Craft, etc.) support Custom Liquid sections and HTML content blocks. The iframe works in both legacy Liquid and new JSON templates.
Is there a mobile-only version I should use?
No. The same iframe is responsive. If mobile renders poorly (rare), set the parent container width to 100% and height to 1100 on mobile only, using Shopify theme breakpoints.
Can I remove the attribution footer?
No. The "Powered by CalcPier" link must remain visible. Shopify cannot override iframe content, and cropping the widget violates the terms.