Add a calculator to a Shopify site
The code is two lines of HTML. Where it goes: the HTML view of a page's content. The calculator is free, with no account, no script and no ads.
The steps
- In the Shopify admin, open the page where the calculator should appear.
- In the content editor, click the button that shows the HTML. Shopify labels it Show HTML or Edit code.
- Paste the code where the calculator should sit, after any existing content if you want it at the bottom.
- Click Save, then view the page on your store.
These steps are as Shopify: Rich text editor gave them on . We read them; we have not tested them on every plan. If a menu has moved since, that page is the authority.
What stops it working
Shopify's help describes this for embed code in general and does not mention frames by name. If your theme has a Custom Liquid section, the code can go there instead; a section in the header or footer shows on every page of the store.
- Nothing appears. The plan or the editor has removed the frame. That is the first thing to check, above.
- It is cut off. The code asks for 820 pixels of height. Raise the number, or accept that the calculator scrolls inside its box.
- The credit is missing. The second line of the code is the credit link. Paste both lines.
The code, for the mortgage calculator
<iframe src="https://plainnumber.com/embed/finance/mortgage" title="Mortgage payment calculator" width="100%" height="820" loading="lazy" style="border:0;max-width:100%"></iframe>
<p>Calculator by <a href="https://plainnumber.com/finance/mortgage" target="_blank" rel="noopener">Plain Number</a></p>