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

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 Docs

• Custom JavaScript
• Adding Theme Blocks
• Checkout Pricing