Question 1

Slow  or No "Add to Cart" Issue

Accepted Answer

While the Customer Price Calculator works smoothly and fast in most of the stores, a few stores may experience a SLOW or NO "Add to Cart" issue when adding a custom product to the cart, something similar to the image below

Slow Add-to-Cart

Custom Price Calculator has been developed to support all the Shopify themes, however, due to differences in theme setup / code the app may demonstrate slow behavior on add to cart.

There is no need to worry as we have got your back! We can easily solve this for you, especially for all the popular themes on Shopify. All you need to do is send us an email (support@custompricecalculator.com) or chat with our agent using our chat support.

We know this can be an inconvenience, and we apologize but this is a quick fix that our technical team can implement for no charge.

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

Thank you for your patience.

Question 2

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

This is a dropdown menu that will show you all the "ACTIVE" products in your product settings. You can choose all the products to which you want to apply the calculator.

You can select multiple products from the list in one go. Once you are done selecting, all the products will show up in the "Products to Apply" field.

You can also remove the products where you no longer require the calculator by clicking on the "cross" sign appearing within each product bar shown in green color in the image below.

![](https://storage.crisp.chat/users/helpdesk/website/258e289b987c100

Question 4

Why is my calculator not showing up on my product page?

Accepted Answer

Each theme on Shopify behaves a bit differently as the code base is not the same. If you followed the steps to embed the calculator on your page and it still isn't showing up, there are some common steps you can take to try to resolve this:

${color}[#03025a](Go to your Shopify admin panel
Click Online Store

** Click Customize**

${color}[#03025e](In the bottom left corner click Theme Actions and then Edit Code)

${color}[#03025e](Find the theme.liquid file (TIP: you can use the search function to find this easily, it is usually on the top section of the theme code)

${color}[#03025e](Paste the following code snippet above the tag and then click save)

[]()

${color}[#850000](_**After the above steps are completed, you can go back to your page and hard refresh it (ctrl+shift+R) and it

Question 5

Styling (Hiding Objects / Elements from your Product Page)

Accepted Answer

${color}[#000219](** Styling:**

)Using our styling section you can:

Select the colors of the calculator so it matches your store's design
Select if you want the edges of the calculator to be rounded or squared
Insert any custom text that will be displayed to your customers after they add an item to the cart (Example: "Allow a moment while we build your custom product")
Display a progress bar for file uploads and insert the custom text that will be displayed to customers while loading the file.

Basic Styling:

Custom CSS Styling:

In our Custom CSS styling section, you can:

Hide anything from the product pages where your calculator is (for example: quantity button, headers, etc). To learn more, see below.
Customize the calculator's code completely by using your own custom CSS. To do this you may want to reach out to a developer to help you with this.

Hiding objects/elements from your product page:

Go to the product page you see the object you want to hide using the CHROME browser. In this example, I will hide the QUANTITY object.
Right-click on the object you want to hide and then click "Inspect"

Once the right console opens, go over all the text blocks until the object you want to hide is completely highlighted, like in the below photo. Right-click on t

Question 6

Common CSS Updates

Accepted Answer

| Using these snippets you can update the look and feel of the calculator using our advanced styling section. Learn more about CSS styling Here

Adding a header above all calculators: ``

calculator::before {

Q: Common CSS Updates

<p>| <strong>Using these snippets you can update the look and feel of the calculator using our advanced styling section. Learn more about CSS styling Here</strong></p> <ol> <li><strong>Adding a header above all calculators:</strong> ``</li> </ol> <h1 id="calculatorbefore">calculator::before {</h1> <pre><code>content: "Custom Price Heading"; font-weight: bold; font-size: 24px; text-align: center; display: block; clear: both; background: white; line-height: 40px; color: green; </code></pre> <h2 id="">}``</h2> <ol start="2"> <li><strong>Controlling the swatch sizes:</strong></li> </ol> <p>``.swatch-picker .swatch-label {</p> <pre><code> height: 80px !important; width: 80px !important; </code></pre> <p>} .swatch-picker .swatch-label input { height: 80px !important; width: 80px !important; }``</p> <hr /> <ol start="3"> <li><strong>Controlling the background and text color in the dropdown element:</strong></li> </ol> <p>``#calculator .element select { background-color: green !important; color: #fff;</p> <h2 id="-1">}``</h2> <ol start="4"> <li><strong>Removing the arrows othe n image selector:</strong></li> </ol> <p><code>/* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }</code></p> <p><code>/* Firefox */ input[type=number] { -moz-appearance: textfield; }</code></p> <p>|| We do this for merchants with a small fee. <a href="https://support.custompricecalculator.com/en/#">Chat us now!</a></p>

content: "Custom Price Heading";


font-weight: bold;
font-size: 24px;
text-align: center;
display: block;
clear: both;
background: white;
line-height: 40px;
color: green;

}``

Controlling the swatch sizes:

``.swatch-picker .swatch-label {

    height: 80px !important;
    width: 80px !important;

} .swatch-picker .swatch-label input { height: 80px !important; width: 80px !important; }``

Controlling the background and text color in the dropdown element:

``#calculator .element select { background-color: green !important; color: #fff;

}``

Removing the arrows othe n image selector:

/* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Firefox */ input[type=number] { -moz-appearance: textfield; }

|| We do this for merchants with a small fee. Chat us now!

Featured & Frequently Read Articles

Browse All Categories