Setting Up

• 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 integerPopular

• 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. 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 nowPopular

• Styling (Hiding Objects / Elements from your Product Page)

  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 loadingSome readers

• Common CSS Updates

  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 .sSome readers

• Using 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 - "shopifyproductprice" instead of the constant value (price) in the formula. The variable - "shopifyproductprice" would automatically detect the default price set by you for each product.Few readers

• Adding custom inputs to packing slips

  On your Shopify admin panel, go to Settings Scroll down and click on Shipping and Delivery Click on the Edit button in the Packing Slip Template Click on the Edit button in the Packing Slip Template (https://storage.crisp.chat/users/helpdesk/website/258e289b987cFew readers

• Embedding a Calculator on a product page

  Once you click save calculator, the snippet to add to your product will be available. Go to "My Calculators" Click on Actions Click on the eye icon Copy that snippet Go to the product page you waFew readers

• Building a Calculator

  On the side navigation click “Create New” Make sure you are on the Elements tab Select which Element 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. Once you buildFew readers

• How to use Metafield in the formula of a calculator?

  The custom price calculator gives a powerful feature to use the Shopify metafields in your pricing formula within the Custom Price Calculator. Let us explain by an example of a tile store. A tile store would want to create a calculator that takes length and width from the customer and calculates the total area (Square Feet or Square Metre), 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 store sells tileFew readers

• Adding Custom Javascript

  The feature allows you to improve your store with different JavaScript tools. It simplifies the use of JavaScript components and sets you free from tiresome code editing. When it comes to improving your Shopify product page, this tool simplifies adding features. Online visitor tracking, alerts, and prompt messages, calendars, interaction sound foFew readers

Working with elements

• Data Lookup

  You can also use the inputs as values in the formula and not only the matched value. Step 1: Add the element Drag and drop the lookup element to your calculator canvas. Step 2: Update the properties Each Data Lookup element has two numbeFew readers

• Area (sqm, sqft) based discounts through data lookup element

  To understand how data lookup works, please refer to our help article on the Data Lookup element. Step 1: Add number input element Drag and drop 2 number input elements to your calculator canvas. Change the label to length and width.Few readers

• Element Types

  Dropdown: Displays a list of options in a dropdown menu. You assign a value to each option to be used in the formula. Tutorial: Number input: Allows your customers to enter a numerical value to be used in the formula. You can use the exact input in the formula or you can set different vaFew readers

• Quantity Discount with Number Input

  Example: The most common use case of the above feature is Quantity Discounts. You can let the user enter the desired quantity and calculate thFew readers

• Conditional Display

  Just follow these steps: After having at least one of the qualified elements (dropdown, image selector or checkbox) on your calculator, add any additional element you want. Turn on "Conditional Display" Insert what value you want to uFew readers

• Implementing Quantity Field (Price per item and Total price)

  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" (https://storage.crisp.chat/users/helpdesk/website/258e289Few readers

• Image Selector Element

  How to use: Drag the Image Selector element to your canvas 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 calculFew readers

• Size limitations of File Upload

  Few readers

How it works

• What is Custom Price Calculator

  Few readers

• High 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 herFew readers