Add Financial Calculators to Shopify
Shopify powers 10% of all websites
Embed financial calculators in your Shopify store to help customers make informed purchase decisions. Perfect for stores selling financial products, insurance, or real estate services.
Step-by-Step Installation Guide
Follow these steps to add NexTool calculators to your Shopify site. Most users are done in under 2 minutes.
Open Theme Editor
From your Shopify admin, go to Online Store > Themes > Customize. Navigate to the page where you want to add the calculator.
Add a Custom Liquid Section
Click "Add section" and select "Custom Liquid". This lets you embed raw HTML/iframe code into your Shopify pages.
<class="code-tag">div class=class="code-string">"nextool-calculator" style=class="code-string">"max-width: 800px; margin: 0 auto;">
<class="code-tag">iframe
src=class="code-string">"https:class="code-commentclass="code-string">">//getnextool.com/embed/mortgage-calculator"
width=class="code-string">"100%"
height=class="code-string">"450"
frameborder=class="code-string">"0"
style=class="code-string">"border: none; border-radius: 8px;"
title=class="code-string">"Mortgage Calculator"
loading=class="code-string">"lazy"
></class="code-tag">iframe>
</class="code-tag">div>Add to Product Pages (Optional)
To add a calculator to product pages, edit your product template. Add a Custom Liquid block within the product information section.
{% comment %}
Add to sections/main-product.liquid or via Theme Editor
{% endcomment %}
<class="code-tag">div class=class="code-string">"product-calculator">
<class="code-tag">h3>Calculate Your Savings</class="code-tag">h3>
<class="code-tag">iframe
src=class="code-string">"https:class="code-commentclass="code-string">">//getnextool.com/embed/savings-calculator"
width=class="code-string">"100%"
height=class="code-string">"400"
frameborder=class="code-string">"0"
title=class="code-string">"Savings Calculator"
loading=class="code-string">"lazy"
></class="code-tag">iframe>
</class="code-tag">div>Create a Dedicated Calculator Page
Go to Online Store > Pages > Add page. Switch to HTML mode and paste the embed code. This creates a standalone calculator resource page.
<class="code-tag">div style=class="code-string">"max-width: 900px; margin: 2rem auto; padding: 0 1rem;">
<class="code-tag">h1>Free Financial Calculators</class="code-tag">h1>
<class="code-tag">p>Use our tools to make smarter financial decisions.</class="code-tag">p>
<class="code-tag">h2>Mortgage Calculator</class="code-tag">h2>
<class="code-tag">iframe
src=class="code-string">"https:class="code-commentclass="code-string">">//getnextool.com/embed/mortgage-calculator"
width=class="code-string">"100%" height=class="code-string">"450"
frameborder=class="code-string">"0" title=class="code-string">"Mortgage Calculator"
loading=class="code-string">"lazy"
></class="code-tag">iframe>
<class="code-tag">h2>Loan Calculator</class="code-tag">h2>
<class="code-tag">iframe
src=class="code-string">"https:class="code-commentclass="code-string">">//getnextool.com/embed/loan-calculator"
width=class="code-string">"100%" height=class="code-string">"450"
frameborder=class="code-string">"0" title=class="code-string">"Loan Calculator"
loading=class="code-string">"lazy"
></class="code-tag">iframe>
</class="code-tag">div>Add to Shopify Blog Posts
When writing a blog post, switch to HTML mode in the rich text editor and paste the iframe embed code directly into your article content.
Live Preview
This is how a NexTool calculator will look on your Shopify site.
<iframe
src="https://nextool.dev/embed/mortgage-calculator"
width="100%"
height="450"
frameborder="0"
title="Mortgage Calculator"
></iframe>Customization Options
Tailor the calculator to match your Shopify site.
Size
Set custom width and height. Default is 100% width, 450px height. The calculator is fully responsive.
Theme
Choose light or dark theme to match your site. Paid tiers support custom brand colors.
Tools
Choose from 326+ calculators: mortgage, BMI, salary, loan, tax, investment, retirement, and more.
Pricing
Get started for free. Upgrade as you grow.
Frequently Asked Questions
Common questions about using NexTool calculators with Shopify.
Do I need to install a Shopify app?
No. NexTool calculators work via a simple iframe embed that you paste into Custom Liquid sections. There is no app to install, no monthly Shopify app fee, and no permissions to grant.
Will it work with my Shopify theme?
Yes. The iframe embed is fully responsive and works with every Shopify theme — Dawn, Debut, Brooklyn, Prestige, and all custom themes. It adapts to your container width automatically.
Can I add calculators to product pages?
Yes. You can add calculators to product pages using Custom Liquid blocks within your product template. This is perfect for showing savings calculators, ROI estimators, or financing options alongside products.
Does it affect my Shopify store speed?
No. The calculator loads asynchronously in a sandboxed iframe and does not affect your store's loading speed or Shopify speed score.
Ready to Add Calculators to Shopify?
Start with our free tier — no credit card required. Upgrade anytime for more calculators and white-label branding.