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

Store Design
, , ,

Topic summary

Goal: change the ‘Pay with PayPal’ button color on a product page (Shopify DAWN 15) from yellow to a light gray.

What was tried: custom CSS targeting .button and div[data-testid=“PayPalInContext-button”][role=“button”]. The style briefly applied but the button became “movable,” and the selector seemed invalid, so the button reverted to PayPal’s yellow.

Proposed solutions:

  • Edit theme.liquid and add custom code before (details not visible in the post; a screenshot shows a result, but the OP reports it didn’t work).
  • Add CSS in base.css targeting PayPal classes: .paypal-button.paypal-button-color-gold and .paypal-button-row.paypal-button-color-gold .menu-button with background-color set to a custom value. Initial reply had a typo (“back ground-color”); later corrected to “background-color.”

OP feedback: both initial attempts did not work. The responder asked if the corrected CSS (with background-color) was tested.

Context: a product link and before/after screenshots were provided to show expected vs. actual button color.

Status: unresolved/ongoing. Awaiting confirmation whether the corrected CSS works; correct selector/method for styling the PayPal button remains an open question.

Summarized with AI on December 25. AI used: gpt-5.
1

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
screen.png3786×1767 648 KB

And this is how it should look:

screen_1.png
screen_1.png3786×1767 599 KB

2

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 tag

RESULT:

Moeed_0-1719996842951.png
Moeed_0-1719996842951.png1547×731 202 KB

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

Best Regards,
Moeed

3

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
12.PNG1224×751 493 KB

4

Hi, thank you very much for your reply, but unfortunately the code didn’t work! :slightly_frowning_face:

1 Like
5

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

6

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

Thank you!

7

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

Thank you!

8

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?