---
title: Accelerated checkout
description: Learn how to include accelerated checkout buttons in your theme.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/themes/pricing-payments/accelerated-checkout
  md: >-
    https://shopify.dev/docs/storefronts/themes/pricing-payments/accelerated-checkout.md
api_name: liquid
---

# Accelerated checkout

***

## Implementing accelerated checkout buttons in your theme

You can add accelerated checkout buttons anywhere in your theme. For example, you could add the buttons to your cart or product template, to a section inside of the template, or in a cart drawer.

If you're using the [Section Rendering API](https://shopify.dev/docs/api/ajax/section-rendering), it re-renders the accelerated checkout buttons if the section it appears in is requested (for example, in a cart drawer). The accelerated checkout buttons render more slowly on their first request, but load more quickly on subsequent requests after the JavaScript library is downloaded and the web components are registered.

Consider including accelerated checkout buttons near [the checkout input of your cart form](https://shopify.dev/docs/storefronts/themes/architecture/templates/cart#proceed-to-checkout) so customers can choose between the regular checkout and an accelerated checkout option.

### Implement accelerated checkout buttons on product pages

On product pages, Shopify dynamically recommends a single button to help customers quickly buy the product that they're viewing. To include this accelerated checkout button, add the `payment_button` Liquid [HTML filter](https://shopify.dev/docs/api/liquid/filters/payment_button):

```liquid
{% form 'product', product %}
  <!-- form content -->


  <input type="submit" value="Add to cart" />
  {{ form | payment_button }}
{% endform %}
```

### Implement accelerated checkout buttons on cart

On cart, you can display all of the accelerated buttons that your store has enabled.

1. Check whether your store has any accelerated checkout buttons enabled using the [`additional_checkout_buttons`](https://shopify.dev/docs/api/liquid/objects/additional_checkout_buttons) object
2. If it returns `true`, then display the buttons using the [`content_for_additional_checkout_buttons`](https://shopify.dev/docs/api/liquid/objects/content_for_additional_checkout_buttons) object. Else, nothing will be displayed

```liquid
{% if additional_checkout_buttons %}
  {{ content_for_additional_checkout_buttons }}
{% endif %}
```

***

## Customize the accelerated checkout buttons

You can customize the accelerated checkout buttons on product and cart pages to match your theme.

**Caution:**

The accelerated checkout buttons hide their HTML in a custom element with a closed [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). Any styling or event tracking that targets the HTML structure of these buttons won't work. Style the buttons with the CSS custom properties below, and track buyer behavior with the elements listed in [Track clicks on accelerated checkout buttons](#track-clicks-on-accelerated-checkout-buttons).

### Accelerated checkout button CSS custom properties

The following table presents CSS custom properties and what they define in the accelerated checkout UI:

| CSS custom properties | Description | Default |
| - | - | - |
| `--shopify-accelerated-checkout-button-block-size` | The height of the individual rendered wallet button. The minimum supported height is `25px`, and the maximum supported height is `55px`. | `44px` on product pages, `42px` on cart in the vertical layout stack. |
| `--shopify-accelerated-checkout-button-inline-size` | (Cart only) The height of the individual rendered wallet buttons when in the horizontal row layout. The minimum supported height is `25px`, and the maximum supported height is `55px`. For more information on the horizontal and vertical layouts only on cart pages, see [Additional alignment properties](https://shopify.dev/docs/storefronts/themes/pricing-payments/accelerated-checkout#additional-alignment-properties). | `54px` |
| `--shopify-accelerated-checkout-button-border-radius` | The corner radius of the rendered wallet buttons. | `0px` on product pages, `4px` on cart. |
| `--shopify-accelerated-checkout-button-box-shadow` | The drop shadow cast by the rendered wallet buttons. | `none` |
| `--shopify-accelerated-checkout-skeleton-background-color` | The background color of the loading skeleton that appears before the buttons are able to render. | `#dedede` |
| `--shopify-accelerated-checkout-skeleton-animation-opacity-start` | The initial opacity in the animation on the loading skeleton, which fades from the start value, to the end value, and back again. Accepts any valid value for [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity). | `1` |
| `--shopify-accelerated-checkout-skeleton-animation-opacity-end` | The opacity transitioned to in the animation on the loading skeleton, which fades from the start value, to the end value, and back again. Accepts any valid value for [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity). | `0.5` |
| `--shopify-accelerated-checkout-skeleton-animation-duration` | How long the opacity transition takes to complete (from start, to end, and back to start). | `4s` |
| `--shopify-accelerated-checkout-skeleton-animation-timing-function` | The timing-function for the opacity animation on the skeleton. | `ease` |
| `--shopify-accelerated-checkout-inline-alignment` | (Cart only) The positioning of the wallet buttons within the container element when in the horizontal row layout. Accepts any valid value for [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#values). | `start` |
| `--shopify-accelerated-checkout-row-gap` | (Cart only) The vertical spacing between the rendered wallets buttons in the vertical stack layout. | `8px` |

We recommend applying these CSS custom properties on the `shopify-accelerated-checkout` and `shopify-accelerated-checkout-cart` element selectors, which are the two custom elements used to render accelerated checkout buttons.

## Example usage

```css
shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-block-size: 44px;
  --shopify-accelerated-checkout-button-border-radius: 0px;
  --shopify-accelerated-checkout-button-box-shadow: none;
  --shopify-accelerated-checkout-skeleton-background-color: #dedede;
  --shopify-accelerated-checkout-skeleton-animation-opacity-start: 1;
  --shopify-accelerated-checkout-skeleton-animation-opacity-end: 0.5;
  --shopify-accelerated-checkout-skeleton-animation-duration: 4s;
  --shopify-accelerated-checkout-skeleton-animation-timing-function: ease;
}


shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 42px;
  --shopify-accelerated-checkout-button-inline-size: 54px;
  --shopify-accelerated-checkout-button-border-radius: 4px;
  --shopify-accelerated-checkout-button-box-shadow: none;
  --shopify-accelerated-checkout-inline-alignment: flex-start;
  --shopify-accelerated-checkout-row-gap: 8px;
  --shopify-accelerated-checkout-skeleton-background-color: #dedede;
  --shopify-accelerated-checkout-skeleton-animation-opacity-start: 1;
  --shopify-accelerated-checkout-skeleton-animation-opacity-end: 0.5;
  --shopify-accelerated-checkout-skeleton-animation-duration: 4s;
  --shopify-accelerated-checkout-skeleton-animation-timing-function: ease;
}
```

### Additional alignment properties

By default on cart pages, the accelerated checkout buttons are presented horizontally and left-aligned. If there's not enough space for all the buttons to be displayed side-by-side, then they are presented vertically. When the buttons are displayed vertically, they take on the full width of their container.

#### Present buttons vertically

To present the buttons vertically by default, you can add the class `additional-checkout-buttons--vertical` to the container that you put the `content_for_additional_checkout_buttons` object in.

```liquid
{% if additional_checkout_buttons %}
  <div className="additional-checkout-buttons--vertical">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}
```

***

## Track clicks on accelerated checkout buttons

Don't depend on the markup inside the buttons to track usage. The accelerated checkout buttons render inside a custom element with a closed [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), so only [composed events](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) cross the shadow boundary. To track clicks, listen to the following elements:

* **Shop Pay**: `<shop-pay-wallet-button>`
* **Amazon Pay**: `<shopify-amazon-pay-button>`
* **Apple Pay**: `<shopify-apple-pay-button>`
* **Google Pay**: `<shopify-google-pay-button>`
* **PayPal**: `<shopify-paypal-button>`

***