Add to Cart Button Settings

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 work — or if you need custom behavior after an item is added — the Theme sub-tab gives you manual controls. You find these settings in Calculator Editor → Placement & Styling → Theme sub-tab.

Steps

Overriding the Add to Cart button selector

  1. In the Theme sub-tab, find the Add to Cart Button Selector field.
  2. The default selector is button[type="submit"][name="add"], which works for most Shopify themes.
  3. If your theme uses a different button structure (custom themes, headless setups), enter the correct CSS selector that targets your Add to Cart button.
  4. Test on your storefront to confirm the button works correctly with Calculator AI.

Adding an after-add-to-cart script

  1. Below the selector, find the After Add to Cart Script field.
  2. Enter JavaScript that should run after an item is successfully added to the cart. A common use case is opening the cart drawer if it doesn't open automatically.

Details

Setting Default Description
Add to Cart Button Selector button[type="submit"][name="add"] CSS selector used to identify the Add to Cart button on your product page.
After Add to Cart Script (empty) JavaScript that runs after a successful add-to-cart action.

Examples

  • Custom theme selector — Your theme uses <button class="btn-add-cart" type="button"> instead of the standard submit button. You change the selector to .btn-add-cart so Calculator AI can identify it.
  • Open cart drawer — After adding to cart, your theme's cart drawer doesn't open. You add a short script like document.querySelector('.cart-drawer-toggle').click(); to trigger it.

    • Related Articles

    • Option Basic Settings

      Overview When you expand an option in Calculator Editor → Options & Pricing, the Basic settings tab is where you set its label, key, type, and most type-specific behavior (formats, limits, default values, and display content). This reference lists ...

    • Option Advanced Settings

      Overview Beyond the basic label, key, and required settings, each option has advanced settings that control how it looks and behaves. Some settings are shared across most option types; others are specific to a particular type. Open any option in the ...

    • Tax Settings

      Tax configuration is coming soon. Calculator AI currently uses your store's default Shopify tax settings. Overview The tax settings section controls how taxes interact with your calculator pricing. By default, Calculator AI uses your Shopify store's ...

    • Working with Options

      Overview Options are the building blocks of your calculator. Each option represents a field, choice, or display element that appears in the calculator on your storefront. This article covers how to manage options — adding, reordering, duplicating, ...

    • Visibility Rules

      Overview Visibility rules let you dynamically control whether an option is shown, hidden, required, or restricted based on what the customer has selected or entered elsewhere in the calculator. They make your calculator interactive and context-aware ...