Add to cart and buy now

<add-to-cart> writes the selected variant (times the chosen quantity) to the cart. <buy-now> sends the shopper straight to checkout for the same variant. Both swap their labels automatically when the variant is sold out or unresolvable.

<storesynk-product handle="example-product">
  <add-to-cart text-out-of-stock="Sold out" text-unavailable="Unavailable">
    <button type="button">Add to cart</button>
  </add-to-cart>

  <buy-now text-out-of-stock="Sold out" text-unavailable="Unavailable">
    <button type="button" class="buy-now-btn">Buy it now</button>
  </buy-now>

  <product-link>
    <a href="#">View full details →</a>
  </product-link>
</storesynk-product>

• Nest a native <button>. It stays the focusable control, and the element projects state and the text-* labels onto it. A bare <add-to-cart>Add to cart</add-to-cart> also works, but a real button is better.
• add-to-cart includes the selected selling plan if the page has the subscription widget. On a successful add it emits sf:add-to-cart, which opens a cart drawer on the page.
• product-link stamps href="/products/{handle}" on its child <a>. On a multi-page site each handle needs a real page at that route.

Options

Tag	Attribute	Default	What it does
add-to-cart / buy-now	text-out-of-stock	""	Label applied while the selected variant is sold out.
add-to-cart / buy-now	text-unavailable	""	Label applied when no variant matches the chosen options.
buy-now	payment	""	Payment hint forwarded on the checkout permalink. payment="shop-pay" opens Shop Pay’s accelerated flow.
product-link	path	"products"	Base path segment before the handle in the generated href.

Styling

The engine sets ss-loading on the wrapper while the add is in flight, and ss-out-of-stock or ss-unavailable when the selection cannot be purchased.

add-to-cart button { width: 100%; background: #1a1a1a; color: #fff; padding: 16px; border: 0; border-radius: 8px; cursor: pointer; }
add-to-cart[ss-loading] button { opacity: .4; cursor: wait; }
add-to-cart[ss-out-of-stock] button,
add-to-cart[ss-unavailable] button { background: #999; cursor: not-allowed; }

Gotchas

• A click that does nothing means the cart runtime never booted: the button sits outside <storesynk-store> or <storesynk-product>, or the store credentials are wrong. See cart troubleshooting.
• A permanently greyed-out button reflects reality: the variant is sold out, or no variant matched the options. See options and variants.
• On a password-protected store, browsing and the cart work but checkout dead-ends at the password wall. See setup.

Related

• Actions reference
• Quantity
• Checkout link