Purchase Button

The primary Add to Cart / Buy Now control, with built-in availability, variant, out-of-stock, and limit states.

Last updated

August 14, 2026

How to use

Place directly on your product page or inside a product card.
Connect the ⛁ Butter Data variable to the CMS.
Connect each button state to Loading, Limit Reached, Out of Stock, Select variant, and Available.
Turn on Buy Now to send the customer straight to checkout instead of adding to cart, choose On Click for what happens after a successful add, and set If Out of Stock for what the button does when the product is unavailable.
Optionally set Max and Limit by — only needed if this page has no quantity selector; otherwise leave Max at 0. See below.

Button states

Exactly one state renders at a time, in this priority order:

State	When it shows
Loading	The button is still checking stock and the current selection — appears only after a short delay, so it won't flash on a fast load.
Limit Reached	The cart already holds all available inventory for that variant — or as much of it as a per-order `Max` allows, if one's set on a quantity component for this product.
Out of Stock	The selected variant has 0 available inventory. Continue-selling products stay on Available instead.
Select Variant	A multi-variant product with no variant selected yet — only shows when your Variant Selector has Auto-Select 1st turned off.
Available	Purchasable — label reads "Add to cart" or "Buy now" depending on the `Buy Now` toggle.

Each state ships as its own pre-connected design.

Purchase Button has its own Max and Limit by controls too — the most of this item allowed in the cart, and whether that cap is per variant or pooled across the whole product. If a quantity component elsewhere on the page already sets these, leave Purchase Button's Max at 0 and it inherits that limit automatically. Set them directly only when the page has no quantity selector at all. Keep Max and Limit by identical everywhere you set them for this product: a different fixed number on two components means whichever updates last wins, and a mismatched Limit by means the two controls enforce separate, unrelated caps instead of one shared one. See Set maximum quantity limits for the full walkthrough.

Add to Cart vs. Buy Now

Use the Buy Now property control to switch the Available state's behavior:

	`Add to Cart`	`Buy Now`
What happens on click	Adds the item to the customer's existing cart.	Creates a new cart with just this item and sends the customer straight to checkout.
Existing cart items	Kept — this item is added alongside them.	Ignored — checkout only includes this item.
After a successful add	Runs your `On Click` action (see below).	Redirects straight to Shopify checkout.
Framer Preview	Works.	Not supported — shows an info toast instead.

What happens after a successful add

Choose the On Click property control (hidden when Buy Now is on):

`Option`	What it does
Trigger Cart Event	Fires the Cart Trigger's open event — connect this to your Cart overlay containing the full cart. See Cart Overlay for how to build one.
Trigger Mini Cart Event	Reveals a `Post-Add` event handler control — wire it to open your Mini Cart overlay. See Mini Cart for how to build one and the difference from a full cart.
No Trigger	Adds silently and stays on the page — pairs well with the Toast component for a simple "Added to cart" confirmation instead.

Mini Cart vs. Cart Overlay

Both are overlays you design yourself — the Purchase Button only fires the event that opens one.

	Cart Overlay	Mini Cart
What it is	Your full cart — line items, quantities, subtotal, checkout.	A lighter confirmation overlay showing just what was added.
Opened by	The Cart Trigger's open event — `Trigger Cart Event` fires that same event.	The Purchase Button's own `Post-Add` event handler (appears once `On Click` is set to Trigger Mini Cart Event).
What goes inside	Cart List — every line item.	Mini Cart List — just the line(s) from the add that just happened, including any cross-sells.
Typical extras	Discount input, incentive bar, checkout button.	Confirmation copy, upsells, related items, a compact total.

Back-in-stock sign-ups

Turn on the ⦿ Out of Stock action control and set it to Notify.
A Notify event handler appears on the component — wire it to open a Get Notified overlay.
Inside the overlay, place a form connected to your notification service (e.g. Klaviyo), so customers can opt in for back-in-stock alerts.
When a customer clicks the Out of Stock button, the Notify event fires (isolated from cart and mini-cart triggers) and the overlay opens.

Note: The Notify event is independent — enabling it doesn't change what Add to Cart or Buy Now do while the item is available. See Back-in-stock Notifications for a complete walkthrough of the full flow with Klaviyo integration.

Analytics

Google Analytics

The Purchase Button fires these GA4 events:

Event	When it fires
`view_item`	On mount, if `Fire view_item` is on. Keep this on for the one primary button per product page; turn it off on reused card/grid instances so view counts aren't inflated. See Google Analytics setup for configuration.
`add_to_cart`	Every time an add succeeds, regardless of the `Fire view_item` setting. Fires on both Add to Cart and Buy Now.

Meta Pixel

The Purchase Button fires these Meta Pixel events:

Event	When it fires
`ViewContent`	On mount, if `Fire view_item` is on (same condition as GA4). See Meta Pixel setup for configuration.
`AddToCart`	Every time an add succeeds. Fires on both Add to Cart and Buy Now.

Framer Analytics

Optionally set Tracking to record add-to-cart clicks in Framer Analytics. Framer will report all clicks to this button under that ID. This is independent of GA4 and Meta Pixel — use it to track button interactions directly in Framer's analytics dashboard. See Framer Analytics setup for more.

Note: begin_checkout is deliberately not fired from this component — the Shopify app fires it at checkout to avoid double-counting across GA4, Meta Pixel, and Framer Analytics.