> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uselooop.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout Button

> The "checkout button," as it self explains, redirects the user to checkout.

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

<Frame>
  <img src="https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/checkoutbutton.webp?fit=max&auto=format&n=WJpokBS_R24FjARc&q=85&s=88de075943a6c3e54e7f48c555d89f96" width="476" height="86" data-path="images/checkoutbutton.webp" />
</Frame>

## Button Setup

Add the following custom attribute to your Webflow element:

```html theme={null}
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:

```html theme={null}
"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:

```html theme={null}
"looop"="checkoutLoader"
```

<Note>
  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.
</Note>