Updating color of integrated PayPal button in Product pages

Retired Boards Appdev Store Design
,
1

Hi, following a chat with the support team, advised to post here and hope to find a solution :-).

I have the button on the product page, “Buy with PayPal.” It has a color that makes the text invisible and I wanted to change the text and PayPal logo within that button color to white so that it can be seen. How can I do it?

Screenshot: https://imgur.com/a/YJnKQVx

Thank you!

2

To change the color of the text and PayPal logo within the “Buy with PayPal” button on your product page, you can use CSS to modify the button’s styles. Here’s how you can do it:

  1. Identify the button’s class or ID: Inspect the “Buy with PayPal” button element on your product page using your browser’s developer tools. Look for a unique class or ID assigned to the button element. For example, it might be something like .buy-with-paypal-button or #buy-with-paypal-button.

  2. Add custom CSS: Once you have identified the class or ID of the button element, you can add custom CSS to target and modify its styles. Open your theme’s CSS file (usually named something like theme.scss.liquid or styles.scss.liquid) and add the following CSS code:

.buy-with-paypal-button {
  color: white; /* Change the text color to white */
}

.buy-with-paypal-button svg {
  fill: white; /* Change the PayPal logo color to white */
}
3

Thanks! the changes has been done in Theme,CSS file