Add to Cart Button Settings

Add to Cart Button Settings

Overview

Appify OPC 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, Appify OPC 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 Appify OPC.

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 Appify OPC 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. Appify OPC currently uses your store's default Shopify tax settings. Overview The tax settings section controls how taxes interact with your calculator pricing. By default, Appify OPC 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, ...

    • Custom JavaScript

      Overview Appify OPC 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 ...