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 Calculator Builder by Calconic app from Shopify App Store. However, please note that calculators created on Calculator Builder by Calconic app won't be accessible on your Calonic.com account and vice versus. These are two different systems, although they look and feel the same.

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

 

Step 1 | Retrieve a code snippet of your calculator:

  1. Sign in to your CALCONIC account or open Calculator Builder by Calconic on Shopify Admin.
  2. Click My Calculators at the left side menu.
  3. Choose a calculator you want to embed to your Shopify website. If you don't have any calculator built yet, learn how to create your first interactive calculator by following our step-by-step tutorial.
  4. Make sure that the calculator is activated. If not, click on Inactive label to activate it.
  5. Click Embed button.
  6. Click +New Website button and add the address of your website.
  7. Click Next.
  8. Click Standard if you want want your calculator to appear directly on the product page, or click Lightbox if you want to embed it as a pop-up (lightbox).
  9. Copy a code snippet of the calculator.

 

Step 2 | Embed the snippet code to the product page:

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

     

    OR

Step 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.
  4. Select the page where you want to add your calculator.
  5. Click <> icon at the top-right corner of the product content editor.
  6. Paste the code snippet (please find pictures above)
  7. Click Save.

 

NOTE: The code snippet can be also embedded to a Liquid file of your Shopify Theme. Then you wouldn't need to embed your calculator to every single product page. If you want to embed your calculator this way, contact us via support@calconic.com and we'll gladly help you.