button label - change colour

Topic summary

A user needed to change the color of a button on their product pages from yellow to grey (hex code #D8D8D8) with black font.

Initial Solution Attempt:

  • Add CSS code to the base.css or theme.css file targeting the .shopify-payment-button__button class
  • Code included background color and font color specifications

Issue Encountered:

  • The first solution turned the background grey instead of just the button, likely due to previous yellow customizations

Final Resolution:

  • A second code snippet was provided to be added before the </head> tag in the theme.liquid file
  • This alternative approach successfully resolved the issue

Status: Resolved. The user confirmed the solution works correctly.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

Hi there,

On my product pages, I would like to change the colour from yellow to grey - colour code: D8D8D8 - with black font

Anyone help on how to do this?

Many thanks in advance - screen shot attached

https://vibehome.co.uk/products/swan-nordic-kitchen-grey-kettle-and-toaster-set

1 Like
  • Here is the solution for you @vibehome
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.shopify-payment-button__button {
     background: #D8D8D8 !important;
    color: black !important;
}
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

Hi there, I’ve put the code in but it has made the back ground grey?

It maybe because I did change this to yellow a while ago?

1 Like

Can you try add this code before tag in file theme.liquid @vibehome

Awesome thank you. works a treat! greatly appreciated :slightly_smiling_face:

1 Like

Glad to help you. Have a good day.