Add to cart

Quantity stepper and primary button that write to the cart; disabled when sold out.

Product

Pack defaults

With content

In context

Source

import { AddToCart } from "demo-webshop/components";

const props = {
  "slug": "",
  "name": "Product",
  "price": 0,
  "currency": "USD",
  "src": "",
  "availability": "in-stock",
  "maxQuantity": 10
};
<AddToCart {...props} />

Live CSS

Injected into the previews above. Add to cart

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */