Merchants can enable payment providers that offer personalized checkout methods, which can make the checkout process faster and easier for customers. Examples are Shop Pay, PayPal, Apple Pay, and Google Pay. Shopify provides these methods as fully compliant, branded accelerated checkout buttons that can be displayed on the storefront or the first step of checkout.
Accelerated checkout buttons are supported in the checkout by default. However, you can also choose to include the buttons on storefront product and cart pages.
## 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.
Consider including accelerated checkout buttons near [the checkout input of your cart form](/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](/docs/api/liquid/filters/payment_button):
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script type="text/plain" data-language="liquid">
{% form 'product', product %}
<!-- form content -->
<input type="submit" value="Add to cart">
{{ form | payment_button }}
{% endform %}
</script>
</div>
</p>
### 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`](/docs/api/liquid/objects/additional_checkout_buttons) object
1. If it returns `true`, then display the buttons using the [`content_for_additional_checkout_buttons`](/docs/api/liquid/objects/content_for_additional_checkout_buttons) object. Else, nothing will be displayed
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script type="text/plain" data-language="liquid">
{% if additional_checkout_buttons %}
{{ content_for_additional_checkout_buttons }}
{% endif %}
</script>
</div>
</p>
> Note:
> You can't render accelerated checkout buttons through AJAX requests, including those through the [Section Rendering API](/docs/api/ajax/section-rendering). The buttons are added by JavaScript included by Shopify through the [`content_for_header` object](/docs/api/liquid/objects/content_for_header), which only runs on the initial page load.
## 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). This means that any styling or event tracking that targets the HTML structure of these buttons will not work. Please see the [accelerated checkout upgrade guide](/docs/storefronts/themes/pricing-payments/accelerated-checkout/upgrade-accelerated-checkout) to learn how to migrate your legacy customizations to the below supported methods to ensure your themes continue to work without issue.
### 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](/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.
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="title" data-value="Example usage"></script>
<script type="text/plain" data-language="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;
}
</script>
</div>
</p>
### 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.
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script type="text/plain" data-language="liquid">
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons--vertical">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
</script>
</div>
</p>