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 on the storefront, or the first step of checkout, to allow customers to use one of these off-site checkouts.
Accelerated checkout buttons are supported in the checkout by default. However, you can also choose to include the buttons in the storefront.
In this tutorial, you'll learn how to support accelerated checkout buttons on the storefront.
To display additional checkout buttons in your theme, you'll use the following Liquid objects:
additional_checkout_buttons
- Returnstrue
if any of the shop's enabled payment providers offer an off-site checkout, andfalse
if not.content_for_additional_checkout_buttons
- Outputs HTML for a parent container that hosts a button for each payment provider that offers an off-site checkout.
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. You might want to add accelerated checkout buttons to your cart template, 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.
Your code should do the following:
- Check whether the store has any payment providers enabled that offer an off-site checkout using the
additional_checkout_buttons
object. - If
additional_checkout_buttons
is true, show the payment provider buttons on the cart page using thecontent_for_additional_checkout_buttons
object.
Accelerated checkout buttons at checkout
Anchor link to section titled "Accelerated checkout buttons at checkout"Accelerated checkout buttons can be presented to customers on both your storefront and your checkout.
However, if your store has checkout.liquid
enabled, then accelerated checkout buttons are only presented to customers in the storefront or checkout, not both. For example, if you add the accelerated checkout buttons to the cart template and the customer visits the cart before checkout, then the buttons won't display to the customer again in checkout. If you want accelerated checkout buttons to appear in checkout, then you need to remove them anywhere they appear in your storefront.
Align checkout buttons
Anchor link to section titled "Align checkout buttons"By default, the accelerated checkout buttons are presented horizontally, within the limits of their container, and left-aligned. However, you can change both alignments using CSS.
Horizontal alignment
Anchor link to section titled "Horizontal alignment"The button container has an attribute of data-shopify-buttoncontainer
and the display: flex
style applied. You can target the container with the data attribute as a selector. To control the alignment of the buttons, you can apply one of the following options to the justify-content
style:
flex-start
: Align the buttons to the left.center
: Align the buttons in the center.flex-end
: Align the buttons to the right.
Vertical alignment
Anchor link to section titled "Vertical alignment"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.