Accelerated checkout

Merchants can enable payment providers that offer an off-site checkout, like Apple Pay or Google Pay, which can make the checkout process faster and easier for customers. Accelerated checkout buttons can show in the cart, or on the first step of checkout, to allow customers to use one of these off-site checkouts.

You can determine whether a shop has any payment providers enabled that offer an off-site checkout, and show their associated buttons on the cart page, with the following Liquid objects:

Object Description
additional_checkout_buttons Returns true if any of the shop's enabled payment providers offer an off-site checkout, and false if not.
content_for_additional_checkout_buttons Outputs HTML for a button from each payment provider that offers an off-site checkout.

For example:

Accelerated checkout buttons at checkout

Accelerated checkout buttons can only show in the cart or checkout, not both. Because of this, if you want to show the buttons at checkout, then you need to ensure that the code for showing them is not included in the cart.

Align the buttons with CSS

By default, the buttons are presented horizontally, within the limits of their container, and left-aligned. However, you can change both alignments using CSS.

Horizontal alignment

The button container has an attribute of data-shopify-buttoncontainer and the display: flex style applied. This means that you can target the container with the data attribute as a selector, and you have the following options for setting the justify-content style to control the horizontal alignment of the buttons:

Option Description
flex-start To align the buttons to the left.
center To align the buttons in the center.
flex-end To align the buttons to the right.

For example:

Vertical alignment

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

For example: