How to Remove the Blue ShopPay Button from Your Product Page

A Step-by-Step Guide to Streamline Your Product Pages and Improve Customer Focus

The blue ShopPay button is a convenient feature for many shoppers, but for some businesses, it can be distracting and may even disrupt the customer journey on your product pages. If you feel that the bold ShopPay button is pulling attention away from your “Add to Cart” button or causing confusion, you might want to remove it. I did and had a .75% jump in ATC and a .25% jump in my convesrions. But, with anything, test and see what works best for you.

This guide walks you through why removing the button could benefit your conversion rates and how to remove it step-by-step. I have a video walk through in the group.

Why Remove the ShopPay Button?

1. Keeps the Focus on Your Sales Funnel: Customers may click the ShopPay button expecting to go directly to checkout, bypassing upsell opportunities or other steps in your funnel.

2. Avoids Visual Distraction: The bold, blue ShopPay button can overpower your page design, pulling attention away from your main CTA (e.g., "Add to Cart" or "Buy Now").

3. Simplifies the Customer Experience: A cleaner, more cohesive design helps customers focus on completing their purchase without unnecessary distractions. BEFORE YOU MAKE ANY CHANGES TO YOUR THEME CREATE A BACKUP

Step-by-Step: How to Remove the ShopPay Button

Step 1: Access Your Shopify Admin

Log into your Shopify account and navigate to the Admin Dashboard.

Step 2: Go to Your Themes

1. In the left-hand sidebar, click Online Store.

2. Under “Themes,” find your active theme and click Customize.

Step 3: Edit Theme Settings

1. Click on Theme Settings in the bottom-left corner of the customization panel.

2. Look for a tab labeled Checkout Settings, Third-Party Payment Options or navigate to your Product Page (this varies depending on your theme).

Step 4: Disable ShopPay

1. Locate the option for ShopPay Button Visibility. It may also be called Dynamic Checkout

2. Toggle it Off to remove the button from your product pages.

Step 5: Save Your Changes

Once you’ve disabled the ShopPay button, make sure to click Save in the top-right corner of the customization panel.

Alternative Method: Adjust Code Manually

If your theme doesn’t provide a direct option to disable ShopPay in the settings, you can remove it by editing your theme code.

Step 1: Open Theme Code

1. Go to Online Store > Themes in the Shopify Admin.

2. Click the drop-down menu next to your active theme and select Edit Code.

Step 2: Find the Button Code

1. In the code editor, look for the file associated with your product page (usually product-template.liquid or product.liquid).

2. Search for a line of code related to ShopPay or “accelerated checkout buttons.”

Step 3: Remove or Comment Out Code

1. Delete or comment out the line of code referencing ShopPay. For example:

   liquid

   Copy code

   <!-- Remove ShopPay Button --> {% if shopify_payment_button %} {{ shopify_payment_button }} {% endif %}

2. Save your changes and preview your product pages to ensure the button is no longer visible.

Testing and Fine-Tuning

After removing the ShopPay button, test your product pages thoroughly to ensure everything functions smoothly. Make sure:

• Your "Add to Cart" and other buttons work as expected.

• The checkout process is still accessible and user-friendly.

• Your product page design looks clean and cohesive without the button.

  
  

Streamline for Success

Removing the blue ShopPay button isn’t about eliminating convenience; it’s about creating a focused and seamless shopping experience for your customers. By simplifying your product page design and keeping the attention on your primary CTA, you can potentially improve conversion rates and ensure customers follow the purchase journey you’ve designed.

For more Shopify tips and tricks, stay tuned to our blog!