Linking calculator results with Shopify checkout

Calconic calculators can link the final results with the “Add to cart” button in your Shopify store. It allows your customers to add your products to the cart with the custom price based on your formula and their inputs.

Want to see it in action? Our Calconic Demo Store showcases how linking calculator results with Shopify checkout works.

By following the instructions below you’ll find out how to output calculated results into the Shopify checkout.

1. Login to your Shopify account.
2. Click Apps.
3. Click the Calculator Builder by Calconic app.
4. Click My Calculators and select the calculator you are building.
5. Click the Gear icon on the left side.
6. Click Shopify Checkout Settings.
7. Enable Shopify Checkout Settings.
8. Enter Shopify Checkout Price Reference (formula element’s reference number that will output the final result/price).
9. Select the products the integration should take effect in.
10. Click Save.

Incorporating the product price into the calculation

As soon as you enable Shopify Checkout Settings, your formula element will enable SHOPIFY_PRODUCT_PRICE as one of the available values. This reference represents the price of the Shopify product the calculator is assigned to: You can use SHOPIFY_PRODUCT_PRICE reference in your formula the same way you use element references:

Removing variations for custom-priced products

Because of Shopify’s architecture, when a product has a custom price, a variation is automatically created in order to add the item to the cart. By default, this variation becomes visible on the website. This not only looks unpolished but can also confuse customers, which is why it’s best to remove it.

So how can you remove product variations?

1. Login to your Shopify account, then go to Online Store → Themes → Customize.
2. Click on Home page, select Products, then click Create template.
3. Create a new template based on the Default product.
4. Select the newly created template, go to Product information, find the Variant picker, click on the eye icon to hide it, and save your changes.
5. Next step is to assign this template to the required product. Go to Products, select the product where you need to remove the variations.
6. In Theme template, assign the newly created template and save the changes.

7. Reload your store’s website page and check if the variations have been successfully hidden.