How to Change the Color of the 'Pay with PayPal' Button on the Product Page (DAWN 15)

How to Change the Color of the 'Pay with PayPal' Button on the Product Page (DAWN 15)

DRAWandCARE
Pathfinder
128 0 18

Hello, everyone!

I'm using the DAWN 15 theme for my website, and in order to make the "Pay with PayPal" button light gray, I added the following code to the CSS in the "Product Info" section:

 

 

.button {
  background: #121212 !important;
  border-color: #ec682c;
  color: #ffffff !important;
  font-weight: normal;
}
div[data-testid="PayPalInContext-button"][role="button"] {
  background: #f3f3f3 !important;
  border: 1.5px solid #f3f3f3 !important;
  color: #121212 !important;
}

 

 

However, now it seems that the button has become movable, and the system considers "PayPalInContext-button" to be incorrect for the code to work, and the button has therefore turned yellow again.

 

Can anyone help? Thank you in advance!

 

One of the pages from my website: Handmade Custom Watercolor Cat Portrait – DRAWandCARE

 

screen.png

 

And this is how it should look:

 

screen_1.png

 

Replies 7 (7)

Moeed
Shopify Partner
4373 1128 1386

Hey @DRAWandCARE 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.paypal-button.paypal-button-shape-sharp {
    background: lightgray !important;
}
</style>

RESULT:

Moeed_0-1719996842951.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
DRAWandCARE
Pathfinder
128 0 18

Hi, thank you very much for your reply, but unfortunately it didn't work!(

DRAWandCARE
Pathfinder
128 0 18

Is there any other way to solve this? Sorry for bothering you...

Thank you!

Spac-es
Shopify Partner
389 112 135

Add this code in your base.css file:

 

.paypal-button.paypal-button-color-gold, .paypal-button-row.paypal-button-color-gold .menu-button {
  background-color: #fff5dd !important;
}

 

Change the color to whichever you want!

 

Result:12.PNG

 

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
DRAWandCARE
Pathfinder
128 0 18

Hi, thank you very much for your reply, but unfortunately the code didn't work! 🙁

DRAWandCARE
Pathfinder
128 0 18

Sorry for bothering you, but... Is there any other way to solve this?

Thank you!

Spac-es
Shopify Partner
389 112 135

At the time of responding to you, I forgot to add "color" to the background, so I decided to edit my response. I'm not sure if you saw the updated code (background-color) - have you tried that code and it didn't work?

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!