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:

1. In the Sections folder, click cart-template.liquid. If your theme doesn’t have a cart-template.liquid, then click cart.liquid in the Templates folder.

2. Find the following code and delete it:

   Copy

      {% if additional_checkout_buttons %}
        <div class="additional-checkout-buttons">
          {{ content_for_additional_checkout_buttons }}
        </div>
      {% endif %}

3. 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 file:

[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>