• Implementing accelerated checkout buttons in your theme
  • Customize the accelerated checkout buttons

Accelerated checkout

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

Anchor link to section titled "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 so customers can choose between the regular checkout and an accelerated checkout option.

Implement accelerated checkout buttons on product pages

Anchor link to section titled "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:

Implement accelerated checkout buttons on cart

Anchor link to section titled "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 object
  2. If it returns true, then display the buttons using the content_for_additional_checkout_buttons object. Else, nothing will be displayed

Note

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.

Customize the accelerated checkout buttons

Anchor link to section titled "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. This means that any styling or event tracking that targets the existing HTML structure of these buttons will break. 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.

Accelerated checkout button CSS custom properties

Anchor link to section titled "Accelerated checkout button CSS custom properties"

Note

These CSS custom properties are currently only available to development stores on Checkout Extensibility. Please refer to the upgrade guide for more information on when these properties will become generally available.

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.

Additional alignment properties

Anchor link to section titled "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

Anchor link to section titled "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.

On this page

  • Implementing accelerated checkout buttons in your theme
  • Customize the accelerated checkout buttons