Checkout Button

Sends the customer to Shopify's secure checkout for the current cart, carrying UTM attribution along.

Last updated

Checkout Button icon

How to use

  1. Place this component in the cart overlay or cart page, typically below the subtotal.

  2. Connect the button design via ⦿ Design.

What happens on click

Clicking sends the customer to Shopify's own hosted checkout for their cart, with your UTM parameters carried along. Butter never builds checkout itself, so every enabled payment method works and payment details stay on Shopify's secure servers.

The button needs a populated cart to work — there's nothing to check out until something is in the cart.

Currency and discounts carry over

Checkout currency follows whichever Market is active for the customer, so pricing stays consistent between your site and Shopify checkout. Any discount codes or automatic discounts already applied to the cart carry through to checkout as well.

Why this button doesn't fire begin_checkout

This component intentionally does not fire a Google Analytics begin_checkout event on click. That event is left to the Shopify Google + YouTube app, which fires it when the checkout page itself loads — firing it here too would double-count checkout starts in your GA4 reports.

Checkout language carries over

Checkout runs in the customer's Framer locale as long as its language code matches one Shopify supports — no separate translation needed for checkout itself. See Set up Shopify Markets and localization to set your checkout language and enable languages in Shopify.

Questions? Join our Slack community