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.
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.

    

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.
5. Paste the code snippet.
6. Click Save.

    

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.
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.
6. Paste the code snippet (please find pictures above)
7. Click Save.

    

You can also link your custom calculator to Shopify checkout. That way your users preferences and calculations can be added to the cart straight from your product page.

NOTE: This applies only to the Shopify Calculator Builder App.

Benefits of Integrating a Custom Interactive Calculator to Shopify Shops:

• Informed Decisions: Customers see real-time cost implications based on product choices or customizations.
• Reduced Cart Abandonment: Transparent pricing minimizes surprises and boosts checkout confidence.
• Enhanced User Experience: Interactive tools keep users engaged, leading to longer site visits.
• Custom Orders Simplified: Clear price breakdowns for tailor-made products streamline order processing.
• Trust Building: Transparent calculations foster trust, positioning your brand as open and customer-centric.
• Increased Conversions: Empowered with clarity, more users are likely to finalize their purchases.