Q: Adding a calculator to Product Pages

Important Notes: This operation may take up to 2 minutes, please allow sufficient time for this to be completed. If you add a calculator to a product that already has a calculator, the previously embedded calculator will be removed. <hr /> If you are new to the app, we recommend going through the basic tutorials starting with 5 Minute Tutorial! to understand how the app functions. Unlike earlier when you had to add a script to a product description, the Custom Price Calculator app now allows you to add the calculator to multiple product pages simultaneously from the app itself. Once you have created your calculator, you go into the "Products to Apply" field in the Calculator Configuration section. <ul> <li>Admin: It will redirect you to the Shopify product page where you can edit your product. Store: Where you can preview and test it in your store. </li> </ul> <a href="https://downloads.intercomcdn.com/i/o/o3e0nmas/1412243853/61c7bfdcd52eab0fdb0cf7f6369a/Once+you+have+created+your+calculator%2C+you+go+into+the+_Products+to+Apply_+field+in+the+Calculator+Configuration+section_.png?expires=1746222300&signature=09e6ee70795a3c28b4d4e04771f765b870d6e13028ac1fa939fd68761b91a44f&req=dSQmFMt6nolaWvMW1HO4zcVpPy5TXDJivuWgoFA9hAOsa%2FCK1D9hSPrgGXTT%0AXgy7%0A"><img src="https://storage.crisp.chat/users/helpdesk/website/-/e/e/1/5/ee15bd19d05d7000/0a9a80da-85dd-4e8b-beb3-262a63_4em2rd.png" alt="" /></a> **This is a list that will show you all the "ACTIVE" products in your product settings. You ca

Question 1

Creating a Formula

Accepted Answer

The formula is the price that the customer will see on the product page and will be calculated dynamically and displayed live as their input changes.

In the formula section, you will need to define the formula based on the defined inputs in the elements.

Supported Mathematical Functions:
The formula accepts: +, -, *, /
Do things in parentheses first: ()
ceil(label name) =>Rounds a number up to the nearest integer
floor(label name) =>Rounds a number down to the nearest integer
sqrt(label name) => Calculates the square root of the input
Use the label names to build the formula.

Number input:

If you are using the range feature, you can return the range value by inserting the "labelname", or the actual value inserted by the customer by inserting "label name[actualvalue]"

Data lookup:
To add the matched value to your formula all you have to do is insert the element's "label name". You can also use any of the two inputs inserted by your customer to your formula by doing the following: "ELEMENT LABEL [INPUT 1 NAME]"

Example:
Dropdown labeled Color with options named Blue and Red. I want the price for each to be the options value * 100

Formula: Color * 100

If I want to add a base cost of $30 I would change the formula to: Color * 100+30

NOTE: Each element has to have a unique label name.

Question 2

How to Enable the Custom Price Calculator App on Your Shopify Theme

Accepted Answer

Step 1: Install the Custom Price Calculator App

First, install the Apippa-Custom Price Calculator app from the Shopify App Store. Once installed, navigate to your Shopify Admin Panel.

Step 2: Open the App

In the Shopify Admin Panel, go to the Apps section.
Find the Custom Price Calculator app in the list and click on it to open.

Step 3: Enable the App for Your Theme

Upon opening the app, a banner will appear prompting you to enable it for your theme.
Click the Enable button on the banner.
A new tab will open, directing you to the Shopify Theme Customization page.

[![](https://storage.crisp.chat/user

Question 3

Adding a calculator to Product Pages

Accepted Answer

Important Notes: 

This operation may take up to 2 minutes, please allow sufficient time for this to be completed. If you add a calculator to a product that already has a calculator, the previously embedded calculator will be removed.

If you are new to the app, we recommend going through the basic tutorials starting with 5 Minute Tutorial! to understand how the app functions.

Unlike earlier when you had to add a script to a product description, the Custom Price Calculator app now allows you to add the calculator to multiple product pages simultaneously from the app itself.

Once you have created your calculator, you go into the "Products to Apply" field in the Calculator Configuration section.

Admin: It will redirect you to the Shopify product page where you can edit your product. Store: Where you can preview and test it in your store.

**This is a list that will show you all the "ACTIVE" products in your product settings. You ca

Question 4

How the calculator works with Variants

Accepted Answer

For the app to work, every time a customer adds a custom product from the calculator to their cart, it will create a new variant under that product.

Please note: Our app will not work with default Shopify variants, which is sometimes the reason for slow-add-to-cart. We can offer your options through our app by using a dropdown or image selector element.

As Shopify sets a limit to how many variants a specific product can have (100 variants) we go through all the variants every 2 hours and delete them to make sure you don't surpass that number. However, this may cause the products lying in the cart to disappear after two hours. Due to this, customers are not able to complete the checkout if they have abandoned the cart for more than two hours.

Abandoned Cart Issue and Variant Deletion Settings

To keep the products in the cart for a longer duration, you can go to configuration settings and switch on the toggle that keeps the variants active until the limit of 100 variants is breached, irrespective of the time duration.

For e.g., if the customer returns to the abandoned cart even after 24 hours and the variant limit of 100 has not been reached yet, then the customer would be able to checkout the product.

[](https://downloads.intercomcdn.com/i/o/o3e0nmas/1234413629/6cadc3cc93a1f27096876d3136cc/image.png?expires=17462223

Question 5

Settings Overview

Accepted Answer

Here you can review the Variant Deletion Setting, Out of Range error message, Thousand Separator settings, and Faster Checkout Configuration.

Variant Deletion Setting

Please refer to this article for more information

Out of Range error message

You can customize the message displayed to customers when they enter a number outside the range you've set in the Number Input element.

Thousand Separator Settings

You can configure the thousand separator setting to format large numbers with commas or periods, making them easier to read for your customer

Question 6

Add to cart not working

Accepted Answer

There are three main reasons we see the Add to Cart button may not be working on your product page after embedding the calculator:

Additional variants on the product page
Shopify variants being connected to metafields
Shopify theme having unusual code

The great thing is - we are usually able to resolve this by:

First, try removing any variant on the Shopify product.

If the calculator still not adding to the cart then there will be some customization needed. Please email us at [email protected] with the URL to the product page and we will try to resolve this for you.

Resolving the "An error occurred during the request: error" Issue

Sometimes you will encounter this error.

If you encounter the error message "An error occurred during the request: error", it typically indicates an issue with meta fields being connected to your variants.

B

Frequently Read Articles

Browse All Categories