Checkout Button

What it does

AP_CheckoutButton opens the Shopify checkout URL when clicked. It automatically disables itself when the cart is empty, fading to 50% opacity so users can clearly see that checkout is unavailable.

How to set it up

1. Design your checkout button in Framer.
2. Connect your designed button to the Button slot of AP_CheckoutButton.
3. Place AP_CheckoutButton inside your cart drawer's footer so it appears consistently wherever the cart is shown.

Key behaviours

• Automatically reads checkoutUrl from the cart store.
• When the cart is empty, the button is disabled, set to 50% opacity, and becomes non-clickable.
• Can optionally open the Shopify checkout URL in a new browser tab.
• Shows a helpful canvas message if no button component is connected to the Button slot.

What it does

• AP_CheckoutButton sends shoppers directly to the live Shopify checkout when clicked.
• It automatically reads the current checkout URL from the cart, so it always points to the correct, up‑to‑date checkout.
• If the cart is empty, the button disables itself so it can’t be clicked when there’s nothing to purchase.