Add more checkout buttons to the cart page

You can use the additional_checkout_buttons Liquid tag to display offsite gateway buttons, such as PayPal Express Checkout, 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.

Note

If you've specified that customer Accounts are required in your checkout settings, then the additional_checkout_buttons Liquid tag will be disabled, and you won't be able to show additional checkout buttons anywhere on your store. This would let a customer check out without signing in.

Show checkout buttons on a cart page

To show additional checkout buttons on your cart page (at /cart) copy and paste this code in cart.liquid wherever you would like the buttons to appear:

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

Show checkout buttons in a cart drawer, popup, or sidebar

Additional checkout buttons are rendered when the page is initially loaded. If your theme loads these buttons dynamically, such as in an Ajax cart using JavaScript, you will need to re-initialize the buttons each time the cart is rendered. By adding a few lines of JavaScript to your Ajax cart script, you can make sure that the additional checkout buttons are initialized each time the cart appears.

The method to initialize the buttons differs based on your theme. First, figure out what type of theme you have:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click Assets to open the theme's assets folder, then choose one of the following options based on what you see:

If your theme has an ajaxify.js file:

If the Assets folder in your theme's code contains a file called ajaxify.js or ajaxify.js.liquid, you'll need to reinitialize the buttons in that file:

  1. Click ajaxify.js or ajaxify.js.liquid to open it in the code editor.

  2. Find the adjustCartCallback function declaration. The line should look like this:

    adjustCartCallback = function (cart) {
    
  3. Copy the following JavaScript:

    if (window.Shopify && Shopify.StorefrontExpressButtons) {
      Shopify.StorefrontExpressButtons.initialize();
    }
    
  4. Paste the code just before the closing parentheses of the function just before adjustCartCallback:

    Add cart button init to ajaxify shaded

    You can adjust the spacing of the pasted code if you want to:

    Cart button init pasted in ajaxify
  5. Click Save to save your changes to the JavaScript file.

Your additional cart buttons should now initialize every time your Ajax cart opens.

If your theme has an ajax-cart.js file:

If the Assets folder in your theme's code contains a file called ajax-cart.js or ajax-cart.js.liquid, you'll need to reinitialize the buttons in that file:

  1. Click ajax-cart.js or ajax-cart.liquid to open it in the code editor.

  2. Find the adjustCart function declaration. The line should contain this code:

    adjustCart = function() {
    
  3. Copy the following JavaScript:

    if (window.Shopify && Shopify.StorefrontExpressButtons) {
      Shopify.StorefrontExpressButtons.initialize();
    }
    
  4. Paste the code just before the closing parentheses of the function just before adjustCart:

    Add cart button init to ajax cart shaded

    You can adjust the spacing of the pasted code if you want to:

    Cart button init pasted in ajax cart
  5. Click Save to save your changes to the JavaScript file.

Your additional cart buttons should now initialize every time your Ajax cart opens.

If your theme has neither of those files:

The script below will re-initialize the additional checkout buttons and should be included in whatever callbacks your JavaScript functions are using:

if (window.Shopify && Shopify.StorefrontExpressButtons) {
  Shopify.StorefrontExpressButtons.initialize();
}

Work with your theme developer or designer to add the script, or add the script yourself if you know how to find where your cart is initialized.

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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. In the Assets folder, click cart.liquid to open it in the code editor.

  4. Find the following code and delete it:

    {% if additional_checkout_buttons %}
      <div class="additional-checkout-buttons">
        {{ content_for_additional_checkout_buttons }}
      </div>
    {% endif %}
    
  5. Click Save to save your changes to the file.

The additional checkout buttons now appear on the checkout page instead of the cart page.

Note

If you're not using "PayPal Express Checkout" as your PayPal payment method, you won't have the extra PayPal checkout button.

Want to discuss this page?

Visit the Shopify Community