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

Highlighted
Shopify Staff
Shopify Staff
1321 128 338

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

7 Likes
Highlighted
Excursionist
36 2 6

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 

1 Like
Highlighted
Shopify Staff
Shopify Staff
1321 128 338

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

1 Like
Highlighted
Excursionist
36 2 6

Hi, @Bo 

That's a pity, it was so close to be perfect. 

I really need to consider, because it's important for me to have the least steps and pages as possible.

I will subscribe to this topic, maybe in the near future, you find out a way that also works for the checkout through the cart drawer.

Thank you

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1321 128 338

Hi again!


As you have the cart drawer enabled, I recommend adding the following code snippet underneath the cart.general.checkout code in the ajax-cart-template.liquid file instead:

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

 

Example:

This may work for you but it is not guaranteed as typically, you do need to be using a cart page to disable the buttons. Let me know how this goes for you.

 

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

1 Like
Highlighted
Excursionist
36 2 6

You are my hero @Bo 

It worked!

One thing more, the code I added previously (in the theme.scss.liquid and in the cart.liquid) should I erase it? Or it also should be there?

Thank you again! 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1321 128 338

No worries at all, King-Kang! I would recommend keeping all the code you have entered, the snippet in the theme.scss is essential and the code added to the cart.liquid will work if you choose to switch from drawer to page and will have no impact on your theme otherwise. 

 

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

1 Like
Highlighted
Excursionist
16 0 4

Hi,

Followed this as it works on desktop but is still showing on mobile. Anything further I can add?

Thank you

0 Likes
Highlighted
Excursionist
16 0 4

Hi Bo,

I figured out that this wasn’t to do with mobile but to do with draft orders created by an app. It looks like If draft orders are created for up sales, bundles etc then this won’t work and the accelerated checkouts will show.

Am I right?  Is there anything else I can try please? 

thanks 

0 Likes
Highlighted
New Member
1 0 1

Hi Bo,

I have followed the instructions above and cleared my cache & browsing history related to both home and connected accounts. It's showing it worked on computer, but on chrome browser Android I'm still seeing the buttons on the cart page. I've tried in incognito window as well, still showing in cart. Using debut theme www.jaspergofetch.com

1 Like