Add more checkout buttons to the cart page
You can use the additional_checkout_buttons
Liquid tag to display offsite gateway buttons and accelerated checkout buttons, such as Apple Pay or Google Pay, on your cart page.
The buttons can appear on either your cart page or your checkout page, but not both. This means that if you use the tag on your cart page, the buttons won't appear on your checkout page.
Show checkout buttons on a cart page
To show additional checkout buttons on the cart, copy the following code and paste it in cart.liquid
wherever you want the buttons to appear:
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
Show checkout buttons on the checkout page
If you want the additional checkout buttons to show up on the checkout page, then you'll have to remove the buttons from your cart page.
To remove the additional checkout buttons from your cart page:
In the Sections folder, click
cart-template.liquid
. If your theme doesn’t have acart-template.liquid
, then clickcart.liquid
in the Templates folder.Find the following code and delete it:
{% if additional_checkout_buttons %} <div class="additional-checkout-buttons"> {{ content_for_additional_checkout_buttons }} </div> {% endif %}
Click Save to save your changes to the file.
The additional checkout buttons now appear on the checkout page instead of the cart page.
## Align the checkout buttons with additional CSS
To align the checkout buttons, add the following code into the theme.scss.liquid
file.
The name of the stylesheet can vary for different themes, so if you cannot find theme.scss.liquid
, then look for one of the following:
style.scss.liquid
styles.scss.liquid
theme.css.liquid
timber.scss.liquid
[data-shopify-buttoncontainer] {
justify-content: flex-end;
}
Use flex-end
, center
, or flex-start
for right, center, or left alignment, respectively. You can limit the outer container’s width by targeting the class additional-checkout-buttons
.
Buttons are presented horizontally if they fit the available space given their min-width
. Otherwise, they're presented vertically. If you want the buttons to be presented vertically, then add the additional-checkout-buttons--vertical
CSS class:
<div class="additional-checkout-buttons additional-checkout-buttons--vertical">
{{ content_for_additional_checkout_buttons }}
</div>