Creating a 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. 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 integePopularAdding 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. 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 apPopularData Lookup
This element allows your customers to enter two inputs and based on those inputs the calculator will look up the value from a table and use it in a formula. You can also use the inputs as values in the formula and not only the matched value. This video provides a step-by-step guide to the process. Step 1: Add the element Click + Add element, then select Data Lookup from the modal. The element will be added to your calcSome readersStyling (Hiding Objects / Elements from your Product Page)
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. 
We made this help article because Shopify doesn't show the total price on the product page as it only shows once the item is in the cart. Here, we will help you implement the price per item on the product page to avoid confusion. To implement a quantity field in a calculator, just use a number input element from the list of elements In the properties of the number input element, just enable the toggle called "Use as Quantity" , then display the number of tile boxes based on the area and the total price based on the number of tile boxes. Let us assume that the tile storeSome readersUsing Weights for Shipping
Normally, custom products don't have predefined weights. Therefore, merchants cannot use the weights in Shopify product settings while using the Custom Price Calculator app. To enable merchants to use the Shipping feature in Shopify, the Custom Price Calculator allows you to calculate the weight of your products through a formula just like the price. Let us explain by an example of a Rug Store selling rugs of different sizes As shown in the image below, we will add threFew readersConditional Display
The conditional display allows you to show a specific element only if a condition is met. If you have a dropdown, image selector, or checkbox on your calculator you can display additional elements based on what option is selected in those elements. Just follow these steps: After having at least one of the qualified elements (dropdown, image selector, radio button or checkbox) on your calculator, add any additional element you want. Turn on "Conditional Display" Insert what value yFew readersUsing default Shopify price in formula - Single calculator for similar products with different price
If you have a store with multiple products following the same pricing logic but with different default/base prices then you don't have to create a unique calculator for each product. You can use the same calculator with a variable - "shopify_product_price" instead of the constant value (price) in the formula. The variable - "shopify_product_price" would automatically detect the default price set by you for each product. *Please note, when you implement it and view it in the preview mode withinFew readersCommon CSS Updates
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 { 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:Few readersArea (sqm, sqft) based discounts through data lookup element
This will allow customers to calculate area-based discounts through the data lookup element. To understand how data lookup works, please refer to our help article on the Data Lookup element. Step 1: Add the number input element Click + Add element and select Number Input from the modal. Repeat to add a second Number Input element. Change the labels to Length and Width.  we are investigating a way to use a different upload service. We will keep you updated on what we find out here!Few readersHow to Use the Photo Editor Element
Implementing the photo editor is as simple as using our file upload feature. This new tool allows customers to edit their images with ease. Click + Add element, then select Photo Editor from the modal. Click the edit icon on the Photo Editor card to open its properties panel and make the necessary edits.  to products. Key Benefits Flexibility: Easily add and charge for custom options. Upselling Opportunities: Increase revenue by offering optional services or upgrades. Customer-Friendly: Provide an intuitive shopping experience tailored to individual needs. Purpose of the Example Demonstrates how to add and charge for optional add-ons. ExamFew readersAdding Custom Inputs to Packing Slips
Here you can learn how to add the custom information your customer input into any printouts (e.g. pick or pack lists) On your Shopify admin panel, go to Settings Scroll down and click on Shipping and Delivery [](https://custom-price-calculator-e3ae6d1359d7.intercom-attachments-1.com/i/o/777817123/68b539ba1464f734b94c6c7f/image_ftz054.png?expires=1746222300&signature=4Few readersImage Selector Element
Using our Image Selector element you can allow your customers to select any image from a swatch or dropdown selection. If you want the image of the selected option will even be displayed as the main photo on the product page on the calculator is embedded on. How to use: Name => The option that will be displayed when hovering over the swatch or as an option in the dropdown Value => The value that will be used in the formula when calculating the product price Image => Upload the selFew readersHigh Level Definitions
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. 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. Learn more about our element types by clicking hFew readersWhat is Custom Price Calculator
Few readers