Quick Add Button

A one-tap add-to-cart (or Buy Now) button for browsing surfaces that adds the first available variant.

Last updated

August 14, 2026

How to use

Place the component on a product card, carousel, or anywhere with product context.
Connect ⛁ Butter Data to the product's Butter Data CMS field.
Connect the Button design (the "Quick Add" state) — and optionally an ⦿ Out of Stock design; if you don't connect one, the component hides itself entirely when the product is unavailable.
Choose Type — Add to Cart or Buy Now.
Choose the On Click action for what happens after a successful add.
Optionally set Max and Limit by — only needed if this page has no quantity selector; otherwise leave Max at 0.

Which variant it adds

Quick Add doesn't have its own variant picker. It adds whichever variant is selected in a Variant Selector mapped to the same product — the two share the page's selected-variant state by Product ID. If there's no such selector on the page, it falls back to the product's first available variant. That makes it a smart default for collection cards (first available variant) and a selection-aware add when paired with a selector (e.g. a quick-view with size/color pickers).

Add to Cart or Buy Now

Type chooses the click behavior: Add to Cart adds the variant and applies the On Click action below; Buy Now routes straight to Shopify checkout with that variant, the same as the Purchase Button's Buy Now path.

What happens after a successful add

On Click decides what happens once the add succeeds, defaulting to Cart:

`On Click`	What happens
Cart	Opens the full Cart Overlay — the same cart-open event the Purchase Button's Trigger Cart Event fires.
Mini Cart	Opens the Mini Cart overlay instead of the full cart.
None	Adds silently — the customer stays right where they are.

Quick Add Button vs. Purchase Button

Quick Add is deliberately minimal — just an Available design and an optional Out of Stock design, with no Select Variant, Loading, or Limit Reached states, no out-of-stock notify action, and it doesn't fire view_item. It isn't a replacement for the Purchase Button as a product page's primary buy control. Use it on collection cards, carousels, and quick-views, or as a secondary/cross-sell add on a product page — keep the Purchase Button as the PDP's main add-to-cart.