Accelerated checkout

To display additional checkout buttons in your theme, you'll use the following Liquid objects:

• 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 parent container that hosts a button for each payment provider that offers an off-site checkout.

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: 1. Check whether the store has any payment providers enabled that offer an off-site checkout using the additional_checkout_buttons object. 2. If additional_checkout_buttons is true, show the payment provider buttons on the cart page using the content_for_additional_checkout_buttons object.

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.

By default, the accelerated checkout buttons are presented horizontally and left-aligned. If there's not enough space for all the buttons, then they are presented vertically. However, you can change both alignments using CSS.

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.

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.