This button has two states: default state and loading state. These two states are achieved by creating a custom button with two required elements:

​
Button Setup

Add the following custom attribute to your Webflow element: 
looop=checkout

​
Text Block

This would be your button text and the default state of the button. This text block needs to have the following custom attribute: 
"looop"="checkoutText"

​
Loader

This would be the loading state of your button (triggered when users click the checkout button). In the background, looop will communicate with Shopify to create a checkout with the user’s current cart items and their quantity. This loader can be any Webflow element with the following custom attribute: 
"looop"="checkoutLoader"
We recommend that you don’t use Webflow’s native button or div block to create this button. We recommend using Webflow Custom element to create this button.