Quick-Add Button
Adds a product's default variant to the cart directly from a product card without visiting the PDP.
What it does
AP_QuickAddButton adds a product's default (first) variant to the cart directly from a product card — no PDP visit required. It fetches variant data on mount and handles the full add-to-cart flow.
How to set it up
Place this component on product cards in your catalog. Set the Product ID to the Shopify product ID (numeric or GID). Connect button designs for the Ready and Out of Stock states. The component fetches product data automatically on mount.
Key behaviours
- Fetches the first available variant using the Shopify Storefront API on mount.
- Shows the Out of Stock design when availableForSale is false.
- Supports a configurable quantity (default 1).
- Optionally opens the cart drawer after adding to cart.
- Passes selectedOptions to the cart so CartItemsDisplay can show clean variant labels.