keyboard_arrow_left Back to Knowledge Base

Adding your calculator to a Shopify shop

You can build a custom calculator and add it to your Shopify store in two ways - using calconic.com or installing the Calculator Builder by Calconic app from the Shopify App Store. Please note that calculators created using the Calculator Builder by Calconic app won't be accessible on your Calconic.com account and vice versa. These are two separate systems, although they look and feel the same.

To add your calculator you'll need to retrieve your calculator’s code snippet and paste it to the preferred product of your Shopify store. Follow the instruction below to find out how to do that:

STEP 1 | Retrieve your calculator's code snippet:

  1. Sign in to your CALCONIC account or open the Calculator Builder by Calconic on the Shopify Admin.
  2. Click My Calculators on the left side menu.
  3. Choose the calculator you want to embed to your Shopify website. If you haven’t built a calculator yet, follow our step-by-step tutorial entitled how to create your first interactive calculator to find out how
  4. Make sure that the calculator is activated. If not, click on the Inactive label to activate it.
  5. Click the Embed calculator button.
  6. (Optional) Click the Whitelist Your Website and + New Website button and add your website address to whitelist it. Click here to learn more about what whitelisting is and why it might be important for you. Please note, this step is not available in the Calculator Builder by Calconic app. Whiteliste the address of your website
  7. Click HTML if you want your calculator to appear directly on the product page, or click Lightbox if you want to embed it as a pop-up (lightbox).
  8. Copy the calculator’s code snippet. Retrieve your calculator’s code snippet

     

STEP 2 | Option 1 | Embed the code snippet to the product page:

  1. Sign in to your Shopify account.
  2. Click Products from the Shopify menu.
  3. Select the product where you want to add your calculator.
  4. Click the <> icon at the top-right corner of the product content editor. Click the <> icon
  5. Paste the code snippet.
  6. Click Save. Paste the code snippet

     

STEP 2 | Option 2 | Embed the snippet code to the page:

  1. Sign in to your Shopify account.
  2. Click Online Store from Shopify menu.
  3. Click Pages. Click Pages
  4. Select the page where you want to add your calculator.
  5. Click the <> icon at the top-right corner of the product content editor. Click the <> icon
  6. Paste the code snippet (please find pictures above)
  7. Click Save. Paste the code snippet

     

STEP 2 | Option 3 | Embed the snippet code to the liquid file:

Please note, if you embed your calculator to a liquid file, your calculator will appear on each of your product pages.

  1. Sign in to your Shopify account.
  2. Click Online Store from the Shopify menu.
  3. Click Themes. Click Themes
  4. Click the Three dots button to extend the drop-down menu.
  5. Click Edit Code from the drop-down menu.
  6. Scroll down the list of liquid files until you find the product-template.liquid file and click it.
  7. We recommend pasting your code snippet right after the checkout form (after the Add to Cart button). Usually, this form ends with the {% endform %} tag. Find this tag and paste your code snippet right below it. Paste your code snippet to Shopify liquide file
  8. Click Save.

You can also link your custom calculator to Shopify checkout. That way your users prefferences and calculations can be added to the cart straight from your product page. Note. This applies only to the calculators that are embedded into your product page on your e-shop.

Benefits of Integrating a Custom Interactive Calculator to Shopify Shops:

Build calculator for free!