Accelerated checkout
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 so customers can choose between the regular checkout and an accelerated checkout option.
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:
On cart, you can display all of the accelerated buttons that your store has enabled.
- Check whether your store has any accelerated checkout buttons enabled using the
additional_checkout_buttonsobject - If it returns
true, then display the buttons using thecontent_for_additional_checkout_buttonsobject. Else, nothing will be displayed
You can't render accelerated checkout buttons through AJAX requests, including those through the Section Rendering API. The buttons are added by JavaScript included by Shopify through the content_for_header object, which only runs on the initial page load.
You can customize the accelerated checkout buttons on product and cart pages to match your theme.
The accelerated checkout buttons hide their HTML in a custom element with a closed 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 to learn how to migrate your legacy customizations to the below supported methods to ensure your themes continue to work without issue.
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. | 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. | 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. | 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. | 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
Anchor to Additional alignment propertiesAdditional 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.
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.