button label - change colour

Store Design

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.
1

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

Screenshot 2024-08-23 at 16.46.36.png
Screenshot 2024-08-23 at 16.46.36.png3048×1814 360 KB

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

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

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • 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.
3

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?

Screenshot 2024-08-23 at 17.23.09.png
Screenshot 2024-08-23 at 17.23.09.png2932×1692 304 KB

1 Like
4

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

5

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

1 Like
6

Glad to help you. Have a good day.