Add a calculator to Shopify
Shopify has a Custom Liquid section that accepts plain HTML, which is enough for a widget. That means no app from the App Store and no recurring charge for something that is one script tag.
Step by step
- 1
Copy the snippet
Choose the widget and set the colours to match your theme before copying.
- 2
Open the theme editor
From the admin, go to Online Store, then Themes, then Customize. Navigate to the page or template where the calculator should appear.
- 3
Add a Custom Liquid section
Click Add section, choose Custom Liquid, and drag it to the right position. Paste the snippet into the box. Liquid passes plain HTML through untouched, so the code works as it is.
- 4
Save and check the storefront
Save, then open the live page. A shipping or finance calculator often works best directly under the product description rather than at the bottom of the page.
What you are pasting
Every widget is the same two lines. A div marking the spot, and a script that fills it. The builder on each widget page writes the attributes for you.
<div class="cc-mortgage-calculator"
data-theme="light"
data-accent="#0e7490"></div>
<script src="https://calculatorcastle.com/embed/mortgage.js" async></script>The class decides which calculator appears. The data attributes are optional, and anything you leave out falls back to a sensible default. Change data-accent to your brand colour and the calculator picks it up for buttons, highlights and the result panel.
Speed, and what it does to your SEO
The script is around 12 KB, roughly 4.5 KB compressed over the wire, and it loads with the async attribute so it never blocks the page from rendering. There are no libraries behind it, no web fonts and no images, which is why it stays that small.
It will not move your Core Web Vitals in a way you can measure. The calculator renders into a div that already occupies its space, so nothing shifts on the page as it arrives and your Cumulative Layout Shift is untouched. Because the script is async, Largest Contentful Paint is decided by your own content rather than by the widget.
For search, a calculator is the kind of thing that keeps someone on the page and gives them a reason to come back, which is worth more than the small amount of script it costs. The calculator itself is not indexed as your content, since it renders in a shadow root, so it will not compete with your writing or create duplicate text.
Pick a calculator
Each has a builder for the colours and options, and gives you the snippet to paste into Shopify.
When it goes wrong
Should I use an app instead?
Only if you need the calculation tied to your product data, such as live shipping rates for a specific cart. For a standalone calculator, an app is a monthly charge for something a Custom Liquid section does for nothing.
The section is not offered on this template
Custom Liquid is available on Online Store 2.0 themes. On an older theme, edit the template file directly under Themes, then Edit code, and paste the snippet where you want it.
It looks wrong against my theme
Set data-accent to your brand colour and data-theme to dark if your storefront is dark. The widget inherits nothing from the theme stylesheet, so it will not pick your fonts up on its own.