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

[Shopify]

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: 

Checkout without Express Checkout buttons:

Disclaimer:

Editing checkout pages is not possible since the checkout pages are secured and its code is not made accessible. Allowing access to the checkout page's code proved to compromise the integrity of the checkout putting both merchants and customers at risk and so it will remain unavailable. The following tutorial is a workaround to hide these buttons by adding code in the cart template and CSS files.

Note: 

 If you're using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren't supported.

If you're using a paid theme, then your theme was made by a third-party developer and Shopify's Support team can't help you with it. If you need help customizing a paid theme, then consider hiring a Shopify Expert. Similar to free themes, some kinds of customizations aren't supported because of limitations associated with the theme or Shopify admin.

Important: 

This method will only work if customers are checking out from the cart page directly (having the cart drawer or cart modal enabled, or checking out via external links will not guarantee this method to work).

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. 

   

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: 

    

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: 

    

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.