Instructions

The Custom Price Calculator app allows you to collect input from your customers and dynamically calculate the product price and display it live on the product page as the inputs change.

Everything that you need to know to use our Custom Price Calculator effectively

High level definitions

  1. Calculator: Each calculator can be embedded to a product page and needs to be configured. There is no limit to the amount of calculators you can build but you can only embed one calculator per product.


  1. Elements: These are the building blocks that when put together will be the calculator. These elements allow you to display and collect data from your customer and will be displayed on the products page once you embed your calculator.


  1. Formula: The formula is essentially how the final price of the product is calculated and displayed to the customer. The inputs from the formula will usually come from the elements you select to configure your calculator.

Making a new Calculator

  1. On the side navigation click “Create New”

  2. Make sure you are on the Elements tab

  3. Select which element [link to elements section] you want to use and drag it to the canvas. You can add multiple elements to the same calculator and reposition them or delete them as needed. Once you selected your element you need to click "Properties" to edit the options and labels.

  4. Once you build your calculator you will need to calculate the checkout price using the formula.

  5. You can also select a Minimum Product Price to display in case the calculation of the inputs doesn’t reach a price that is profitable for you to sell your product for. For example, if the formula value is $30, but your minimum product price is set to $40, we will display $40 as the product price. If your formula value is $41, we will display $41 as the product price.

  6. Give your calculator a name

  7. Click Save and Generate Code

    • If the formula inserted isn’t valid (meaning the formula is set up using invalid inputs) you will see an error message. To proceed you will need to fix your formula.

Adding Calculator to Product Page

Once you click save and get code you will be provided with a snippet to add to your product. Copy that snippet and go to the product page you want to add the calculator to. On the top right side of the text input box where you put product description click on the "<>" and then paste the snippet at the bottom of the text.

Click save and go to your product page to test it works.

Editing a Calculator

  1. On the side navigation click "My Calculators"

  2. Click "View / Edit" on the app you want to edit

  3. You can edit any element by clicking on it and going to properties. You can also edit your formula, minimum price or calculator's name.

  4. Click Save and Generate Code

    1. If the formula inserted isn’t valid (meaning the formula is set up using invalid inputs) you will see an error message. To proceed you will need to fix your formula.

Types of Elements

  1. Dropdown:

Allow your customers to create different options to choose from based on a predefined drop down list. You can assign a value to each drop down option that will later be used in your formula to calculate the product price.

Label:

Label the element so you can use it in your formula. This will also be displayed on the calculator when embedded on the products page.

Options:

  • Insert the options that will be displayed to your customers in the drop down

  • Select the value of each option that you can later use in your formula to calculate the price of the product


  1. Number Input

Allow your customers to input different number options that you can use in your formula to calculate in your product price

Label:

Label the element so you can use it in your formula. This will also be displayed on the calculator when embedded on the products page.


  1. Text Block

Use this to display additional text as needed to make sure your customers have all the information needed to make a purchase decision.

Creating the Formula

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.

The formula accepts: +, -, *, /

Use the label names to build the formula.

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

Variants

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. As Shopify only allow 100 variants at a time for each product, our app will automatically delete any variant over 1 day old to make sure you don't hit your limit and your customers will be able to continue to use your calculator.