Custom JavaScript

Custom JavaScript

Overview

Calculator AI allows you to add custom JavaScript to your calculator for advanced use cases that go beyond built-in configuration. You can run code when the calculator first loads (global scripts) or when a specific option's value changes (option scripts). This is useful for integrating with third-party tools, implementing custom validation, or adding dynamic behavior. You configure scripts in Calculator Editor → Placement & Styling → JavaScript sub-tab.

Steps

  1. Navigate to the JavaScript sub-tab inside Placement & Styling.
  2. To add a global script (runs once when the calculator loads), click Edit next to the global script section and write your code in the editor. Use global scripts for setup tasks like initializing third-party libraries or registering event listeners.
  3. To add an option script (runs every time a specific option's value changes), find the option in the list below the global script and click Edit. Use option scripts for reactive behavior like calling external APIs or updating UI based on a selection.
  4. Save your changes and test in the live preview or on your storefront.

Test custom scripts thoroughly before publishing — errors can break the calculator experience for customers.

Details

Script Type Trigger Use Case
Global script Calculator loads on the page Initialize libraries, set up listeners, run one-time logic
Option script Attached option's value changes React to user input, call APIs, update UI dynamically

Examples

  • Third-party analytics — You add a global script that sends a tracking event to Google Analytics whenever the calculator loads, so you can measure how many customers interact with it.
  • Dynamic option validation — You attach an option script to a "Width" number input that shows a warning message when the value exceeds your maximum manufacturing size, giving customers immediate feedback.

    • Related Articles

    • Custom SKU Rules

      Overview Custom SKU rules let you automatically generate a unique SKU (Stock Keeping Unit) for every product configuration a customer creates. The SKU is built from fragments — short codes assigned to each option value — combined according to a ...

    • Show Custom Options on Order Confirmation Emails

      Overview When customers fill out Calculator AI options on a product page, their selections are saved with the order. By default, Shopify's order confirmation email does not display these custom selections. You can update the email template so ...

    • Show Custom Options on Packing Slips

      Overview When a customer places an order with Calculator AI options, their selections are saved with the order. By default, Shopify's packing slip template does not include these custom selections. You can update the packing slip template so your ...

    • Add to Cart Button Settings

      Overview Calculator AI works with your theme's Add to Cart button to include the calculated price and customer selections when an item is added to the cart. In most themes, Calculator AI detects the button automatically. If auto-detection doesn't ...

    • Show Custom Options on New Order Notification Emails (Staff)

      Overview When a customer places an order with Calculator AI options, their selections are saved with the order. By default, the staff notification email that Shopify sends to you and your team does not include these custom selections. You can update ...