English
Start free

Platform guide: Shopify

How to add a mortgage calculator to Shopify

Selling homes, builder inventory or real-estate services on Shopify? The calculator drops into a section like any other block.

Free plan, no card. Paid plans include a 14-day trial.

To add a mortgage calculator to Shopify, open the theme editor, add a Custom Liquid section to the template where it should appear, and paste the snippet from your PrequalFunnel Embed tab. For a standalone page, you can paste it into the page editor's HTML view instead. Save, view the live store and send a test lead.

Key takeaways

  • Custom Liquid section is the most reliable place for the snippet.
  • A page's HTML view also works, but some editors strip scripts on save.
  • No Shopify app is needed; nothing is installed in your store.
  • Check the live store, not just the theme editor preview.

Custom Liquid section or page HTML: which should you use?

Both work as of October 2026. A Custom Liquid section is more predictable; page HTML is quicker for a single page.

Custom Liquid section (theme editor)

  • Added in the theme editor to any template that supports sections
  • Keeps the script exactly as pasted
  • Can be reused on every page that uses the template
  • Easy to move up or down the page

Page editor HTML view

  • Paste straight into one page's content
  • Quick for a single calculator page
  • The rich-text editor may rewrite or strip the script when you switch views
  • Check the page after every edit

How do you embed the calculator with a Custom Liquid section?

Menu names describe the Shopify admin as of October 2026.

  1. Copy the snippet

    In your PrequalFunnel dashboard, open the calculator's Embed tab, choose Inline and copy the snippet.

  2. Open the theme editor

    In the Shopify admin, go to your online store's themes and customize the current theme. Switch to the template, such as a page template, where the calculator belongs.

  3. Add a Custom Liquid section

    Add a section and choose Custom Liquid. Paste the full snippet into its Liquid code field.

  4. Position and save

    Drag the section where you want it, save the theme, and assign the template to the page if you created a new one.

  5. Check the live store

    Open the live page in a private window, run a calculation and submit a test lead.

What do you paste into Custom Liquid?

The snippet is plain HTML, which Liquid outputs unchanged. Copy the exact snippet from the Embed tab in your dashboard; it is the source of truth.

embed.html
<!-- Home loan calculator, inline -->
<div data-prequal="home-loan" data-key="ak_…" data-mode="inline" data-lang="en"></div>
<script src="https://app.prequalfunnel.com/embed.js" async></script>

What goes wrong on Shopify, and how do you fix it?

Most issues come from the page editor or the template.

Script removed from page content

The rich-text editor rewrote the HTML. Move the snippet into a Custom Liquid section instead.

Section not available

Some older themes don't support sections on every template. Use a page template that does, or the page HTML view.

Calculator on the wrong pages

A section added to a shared template shows on every page using it. Create a dedicated page template for the calculator.

Store password page

While the store is password-protected, test from the theme preview or after unlocking; logged-out visitors can't reach the page.

05

How do you send a test lead from Shopify?

Open the live page in a private window with ?utm_source=test on the URL. Run a realistic calculation, open the lead form and submit it with your own name and email.

Check that the contact appears in your built-in CRM with every input and result, the page URL and the test source, and that the alert email arrives. The calculator's lead form is separate from Shopify's customer accounts and checkout, so the lead won't appear in Shopify's customer list; it lives in PrequalFunnel and, on Producer or Brokerage, goes on by webhook to HighLevel, Zapier or Make.

Add a note to the test contact so it doesn't skew your reporting.

FAQ · 8 questions

Questions loan officers ask

Do I need a Shopify app for the calculator?

No. You paste a snippet into your theme or page. Nothing is installed in your store and there is no app to keep updated.

Will calculator leads show up as Shopify customers?

No. Leads are saved in PrequalFunnel's CRM with the numbers attached. Send them elsewhere by webhook on Producer or Brokerage.

Why did my script disappear from the page content?

Shopify's rich-text page editor can rewrite HTML when you switch views. Use a Custom Liquid section, which keeps the snippet as pasted.

Can I add a floating calculator button to the whole store?

Yes. Place the Floating bubble snippet in a section or block that appears on every page, such as the footer, so it loads once per page.

Will my Shopify theme styles change the calculator?

Not in inline mode. The calculator is style-isolated. Set your colors, fonts and radius in PrequalFunnel.

Can I put the calculator on a product page?

Yes, by adding a Custom Liquid section to the product template. Keep the page compliant: your NMLS ID and Equal Housing Opportunity statement should be visible wherever you advertise loans.

Does it slow my store down?

The loader script is small and loads asynchronously, so it doesn't block the rest of the page from rendering.

Can I show the calculator in Spanish?

Yes. Choose Spanish when you copy the snippet or set data-lang to es. See multilingual calculators.

PrequalFunnel

Your next borrower is already on your site.

Give them the numbers they came for, and get the lead with those numbers attached.

Free forever on Originator. Upgrade when you want webhooks and your own brand. 14-day free trial on monthly and yearly. Cancel before it ends and you pay nothing.