Add to Cart Button Settings

Add to Cart Button Settings

Overview

Appify CPO 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 CPO 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 CPO.

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 CPO 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 ...

    • Set up Abandoned Checkout and Cart Emails

      Overview Shopify’s default abandoned checkout button usually points at a checkout or cart permalink. That can drop Appify CPO options. This article adds: The customer’s visible options under each product, when the editor can print line-item ...

    • Layer Settings

      Overview Select a layer in the Layer stack, then use the Layer settings panel on the right of Calculator Editor → Personalization. Sections appear or hide based on layer type (text, image, static overlay, multi-select). Setting names below match the ...

    • Edit options from the cart

      Overview Edit options lets a customer open the published calculator from the cart, change options or the design, and update that line. New calculators have this on. Turn it off (or on for an older calculator) under Calculator Editor → Optional ...

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