Embedding your calculator on a Shopify website

Learn how to embed a calculator on your Shopify website

Embedding your calculator using Shopify’s WYSIWYG editor

  1. Copy this script to your clipboard.
HTML
<script src="http://scripts.convertcalculator.com/shortcode.js" async="true"></script>
  1. Go to your Shopify store’s dashboard. Navigate to “Online Store” in the left sidebar, then click “Themes”, and within the themes dashboard, click on “Customize” next to the theme you’re using.
  2. In the Theme editor top bar, click the “···” icon, and click “Edit code”. Then navigate to the theme.liquid file.
  3. Just above the end of the “head” code, indicated by </head>, paste in the script you just copied, and press “Save”.
  4. Navigate to the ConvertCalculator app, and open your calculator
  5. Go to Share → Embed, and copy your Calculator ID.
  6. Go back to the Shopify dashboard, and underneath “Online store”, click “Pages” and select the page you want to add your calculator to. In the page Content, add the code below, and replace calculator-id-here with the ID you just copied.
[convertcalculator id="calculator-id-here" type="framed"]
  1. Save the changes, and preview your page

No luck?

Are you having trouble embedding a calculator on your website? Don't hesitate to contact us by sending a chat message (via the bubble in the bottom right corner).

Related articles

Learn more about shopify in one of the following articles