Change 'buy with shop pay' button colour

Store Design
, ,

Topic summary

A store owner wants to customize the Shop Pay button to match brand guidelines—specifically changing the background to #FFAB00 and making the text/icon black. They also want to remove the “more payment options” text below the button.

Key findings:

  • The Shop Pay button uses a closed Shadow DOM, making it impossible to style via CSS or JavaScript
  • Shopify intentionally locks this design for security and consistency across stores
  • Multiple users confirmed the button cannot be customized

Partial solution achieved:

  • The “more payment options” link can be hidden using:
more-payment-options-link {
  display: none;
}

Conflicting advice:
Some users suggested targeting .gravity-button with CSS, but the original poster confirmed this approach didn’t work, even with !important. The consensus is that the main button styling is locked and cannot be modified.

The discussion is resolved with the understanding that only the secondary text can be hidden, not the button itself styled.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I understand that this is an element that’s probably being injected by shopify itself - and that it’s part of the shopify pay’s branding, however it goes against our brand guidelines and it’s important for me to keep a unified colour scheme. I’ve tried injecting some js but to no avail. Can someone help me change the button’s background colour to #FFAB00, whilst also changing the text and the shop pay svg icon to black?

If possible, as a plus, i’d also like to remove the ‘more payment options’ text right below the shop pay button.

Here is an example product page

https://gamestore.mt/products/donkey-kong-bananza-nintendo-switch-2-pre-order

2 Likes
2
  1. You can’t style the Shop Pay button or remove the text—Shopify locks it to keep it secure.

  • The Shop Pay button is built using a locked design (called a closed Shadow DOM).

  • That means we can’t change how it looks—no colors, no fonts, nothing.

  • Shopify does this on purpose to keep the button consistent and secure across all stores.

  1. Hide the more payment options button
more-payment-options-link {
  display: none;
}
3

Hello @R3dn0ze
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.gravity-button {
background-color: #FFAB00;
}

result

22.png
22.png874×449 264 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi @R3dn0ze

This is built-in shopify button, which cannot be changed by adding CSS code.

5

Hi @R3dn0ze

Please open the file base.css, then add the following CSS code:

.gravity-button{
    background-color: #FFAB00;
}

more-payment-options-link{
    display: none;
}

Save the file and check the result.

Please let me know if it works as expected!

Best regards

6

Thank you for your reply, the more-payment-options-link code worked, however, the colour change for the main button didn’t work.

I’ve also added !important to both codes, but to no avail on .gravity-button

7

Thank you for this, better to know that i can’t :slightly_smiling_face: Appreciated