Remove the Express Checkout buttons from first Checkout Page (PayPal, Apple Pay, Google Pay)

Highlighted
Shopify Staff
Shopify Staff
1102 107 267

This tutorial details how to remove the Express Checkout buttons from the first page of your checkout. When we say Express Checkout Buttons we are referring to the accelerated checkouts such as Apple Pay, Shop, Google Pay, and PayPal.

Checkout with Express Checkout buttons: 

27-58-fnixx-xn69x

 

Checkout without Express Checkout buttons:

27-52-xdiwh-2zf4q

 

 

 

Step one:

 We will add the Express Checkout button code to the cart file so that these buttons will appear on the cart page instead of the checkout:

 

  1. From your admin, go to Online store > Themes > Actions > Edit code.
  2. In the Sections folder, locate the cart-template.liquid file. If your theme doesn’t have a cart-template.liquid file, locate the cart.liquid file in the Templates folder instead.
  3. Find the following code cart.general.checkout
     
     

    08-31-i5pvq-safli.png

  4. Paste the following block of code on a new line underneath the code in step 3: 
    {% if additional_checkout_buttons %}
    <div class="additional-checkout-buttons">
      {{ content_for_additional_checkout_buttons }}
    </div>
    {% endif %}
     
  5. The cart file should now appear as follows: 08-58-ykuap-7lyay.png

  6. Click Save.

Step 2:

We will now hide the Express Checkout buttons on the cart page using CSS code:

 

  1. From your admin, go to Online store > Themes > Actions > Edit code.
  2. In the Assets folder, locate the theme.scss.liquid file.
  3. Paste the following CSS code at the very bottom of this file: 
    .additional-checkout-buttons {
      display: none !important;
    }​
  4. The CSS file should now appear as follows: 08-03-9sxwz-e570t.png

  5.  Click Save. 

Result: The Express Checkout buttons should no longer appear on the first stage of the checkout. If the buttons (Apple Pay, Google Pay, Shop Pay, or PayPal Express) are still present, a previous checkout session may still be active so clear your browser’s cookies and cache and begin a new session on your store. 

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

2 Likes
Highlighted
Excursionist
13 1 1

Hi @Bo ,

I followed the steps, both cart.liquid and theme.scss code, but didnt work yet...

not-working.png

Since your code isn't exactly like mine - maybe due to the theme I'm using (Brooklyn) or for other reason - I don't know if I placed it in the exactly place.

Can you help me?

Thank you 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1102 107 267

Hey there, @King-Kang 

 

That is unusual as this should work for you. Are you using a cart drawer as opposed to a cart page? As per the disclaimer at the top of this post, this customization is only possible when the store is not using a drawer cart. Go to Online Store > Customize > Theme Settings > Cart Page. From here change the cart from drawer to page. This should resolve the issue. It is not possible to hide these buttons if a theme is using a drawer cart. 

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes