Checkout link

<checkout-link> keeps its link pointed at the live cart’s checkout URL, so one click lands the shopper on Shopify’s hosted checkout with everything they added. <buy-now> is the skip-the-cart button for a single product.

<!-- Cart-level checkout: sends the whole cart to Shopify's checkout. -->
<div class="cart-foot">
  <div>Total: <show-cart-total></show-cart-total></div>
  <checkout-link><a class="checkout-btn" href="#">Checkout</a></checkout-link>
</div>

<!-- Contrast: buy-now skips the cart for ONE product; it lives on the PDP. -->
<storesynk-product handle="your-product-handle">
  <show-title></show-title>
  <show-price></show-price>
  <add-to-cart><button type="button">Add to cart</button></add-to-cart>
  <buy-now><button type="button">Buy now</button></buy-now>
</storesynk-product>

• <checkout-link> sets href on its child <a> to the cart’s checkoutUrl. With no <a>, the element itself navigates on click. When the shopper switches country via a Markets picker, checkout follows that market and currency.
• <buy-now> lives inside a <storesynk-product> and sends the buyer straight to a checkout permalink for the selected variant × quantity. No cart, no drawer confirmation.
• The checkout itself is Shopify-hosted. Logo, colors, fields, shipping, and payments are configured in your Shopify admin, not with Storesynk markup.

Options

Tag	Attribute	Type / default	What it does
checkout-link	-	-	No attributes. Child: typically an <a>; without one the element navigates on click.
buy-now	text-out-of-stock	string, ""	Label applied while the variant is sold out.
buy-now	text-unavailable	string, ""	Label applied when no variant is selectable.
buy-now	payment	string, ""	Checkout payment hint forwarded on the permalink. payment="shop-pay" sends the buyer into Shop Pay’s accelerated flow.

Styling

<checkout-link> sets no ss-* states. <buy-now> reflects the selected variant’s availability on itself:

buy-now[ss-out-of-stock] button,
buy-now[ss-unavailable] button { opacity: .5; cursor: not-allowed; }
buy-now[ss-loading] button { opacity: .4; cursor: wait; }

Gotchas

• Checkout dead-ends at a password page while browsing works: the store hasn’t launched. Remove the password under Online Store → Preferences. See cart troubleshooting.
• <checkout-link> needs a <storesynk-store> ancestor (SSK-101); <buy-now> also needs a <storesynk-product> (SSK-102).
• A permanently greyed <buy-now> means the selected variant isn’t purchasable. Customize the copy with text-out-of-stock and text-unavailable rather than forcing it enabled.

Related

• Cart drawer
• Add to cart and buy now
• Cart tag reference