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:
||Outputs HTML for a button from each payment provider that offers an off-site checkout.|
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.
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:
||To align the buttons to the left.|
||To align the buttons in the center.|
||To align the buttons to the right.|
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.