Checkout Button
Opens the Shopify checkout URL when clicked and automatically disables itself when the cart is empty.
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
- Design your checkout button in Framer.
- Connect your designed button to the Button slot of AP_CheckoutButton.
- 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.