Remove "Buy with PayPal"

[Elies216]

Hello,

I managed to remove the “add to cart” button from my product page by following this comment: https://community.shopify.com/c/shopify-discussions/remove-add-to-cart-button-but-keep-buy-it-now-bu...
I would now like to remove the “Buy with PayPal” button and modify the “More payment options” button to show only a “Buy it now” button, as on the attached screenshot.

I'm not familiar with coding and I'm using the Spotlight theme.

Thanks for your help.

[WalkYourStyle]

Can you please share your store's URL ?

[Elies216]

Yes: firova-shop.com

Thanks

[WalkYourStyle · Accepted solution]

Instructions

1. Go to 'Online Store' -> Themes -> Edit Code

2.  In the assets folder locate the file base.css

3. At the end of the file add this code

/* Start of Buy it now Button CSS */
.shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--branded.BUz42FHpSPncCPJ4Pr_f {
    display: none;
}
.shopify-payment-button .shopify-payment-button__more-options.BUz42FHpSPncCPJ4Pr_f {
    position: relative;
    background-color: black;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.5rem;
    min-height: calc(4.5rem + var(--buttons-border-width)* 2);
    letter-spacing: .1rem;
    line-height: calc(1 + .2 / var(--font-body-scale));
    transition: transform 0.15s ease-in;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

.shopify-payment-button .shopify-payment-button__more-options.BUz42FHpSPncCPJ4Pr_f::after {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    content: "Buy it now";
    left: 0;
    right: 0;
    z-index: 1;
    bottom: 0;
    top: 0;
    background-color: black;
    color: white;
    border-radius: 5px;
}

.shopify-payment-button .shopify-payment-button__more-options.BUz42FHpSPncCPJ4Pr_f:hover {
    transform: translateY(-0.25rem);
}

.shopify-payment-button .shopify-payment-button__more-options.BUz42FHpSPncCPJ4Pr_f:hover::after {
    box-shadow: 0 0 1px 0 black;
}

/* End of Buy it now button CSS */

[Sweans]

Hi @Elies216 ,

You can achieve the desired result from the theme customization section, follow these steps:

1.From your Shopify admin backend, select the customization button for your required theme file.

2.Click on "Homepage" at the top, and from the dropdown, select "Products." Then, select "Default product" (if that is the theme you are using for the products; if not, select the correct file).

3.In this example, we will explain the process for the default product. Now, click on "Buy Buttons" under the product information section and uncheck the checkbox for showing dynamic checkout buttons.

Refer to the screenshots for more detailed understanding.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[Sweans]

Hi @Elies216 ,

There is a correction in the last images the following will be the correct one.

Regards,
Sweans

[Elies216]

Hello, thank you for your help!
I tried the solution you suggested, but when I go to the site customization, it doesn't appear like when I go to the store preview, and the button appears as I'd like it to appear: there's only the “Buy it now” button. If I uncheck the “Show dynamic checkout buttons” option, no button appears.

[Sweans]

Hi @Elies216 ,

In Shopify there are two different kinds of dynamic checkout buttons:

1. Unbranded - These buttons display Buy it now text. When a customer clicks an unbranded button, they skip the cart and go to the Shopify Checkout.

2. Branded - These buttons include the logo for a third-party accelerated checkout method. When a customer clicks a branded button, they complete their payment with that accelerated checkout method.

So since you simply added a CSS code to hide the add to cart button the buy now button is coming as part of the dynamic checkout that's why it's getting removed.

The buy with PayPal button is a branded button and it depends on the Payment you have set in Shopify Payments. Shopify forces to show these buttons as part of dynamic checkout.

There are 2 ways to solve this.

1. Is to remove the payment type from the Shopify payments if you are not using them.

2. Is to add custom code to display the buy it now button not through the dynamic button.
This requires coding experience since the customer is need to be redirected to checkout without the cart. If you need help in-depth you can DM the store details to me.

If you need further assistance, feel free to reach out!

Regards,
Sweans