Skip to main content
The Checkout button block is the primary call-to-action in the cart footer that takes shoppers to checkout, giving them a clear, prominent path from the cart to checkout. It’s a required block.

​
Behavior

  • The button resolves a localized, market-correct checkout URL, so shoppers land in the right market’s checkout. If that can’t be resolved, it falls back to the standard /checkout link.
  • With Go to cart page instead of checkout enabled, the button links to /cart instead.
  • Clicking navigates via JavaScript so a theme’s own cart handling can’t intercept it, while still respecting new-tab intents (Cmd/Ctrl-click, middle-click).
  • The click emits the SDK checkout event, which you can subscribe to.

​
Settings

​
Placement and limits

  • Region: bottom.
  • Maximum: 1 per cart state.
  • State: filled cart only.
  • Locked and added by default. The Checkout button can’t be removed or hidden, only repositioned within the footer.

​
Custom template

Supports a custom template from its Code tab, which replaces this block’s built-in markup with your JSX. These are the props it receives.
A custom checkout button loses checkout tracking. The built-in button attaches a click handler that emits the SDK checkout event and records the conversion for cart analytics. That handler is not passed to custom templates, so navigating via href alone skips both.If you need the event, emit it yourself from an onClick before navigation. Attribution reporting still can’t be recovered this way, so prefer restyling the built-in button with design settings or custom CSS unless you truly need different markup.
Render href as-is rather than defaulting it. An <a> with no href is inert, which is the correct behavior in the editor.

​
Design

Style this block with its Design section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank. What are design settings? Learn more here: Design settings.