Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
DAWN THEME - Does anyone know how to change the "buy with shop pay" button color and text?
Solved! Go to the solution
This is an accepted solution.
Hello @dd58,
For your information, the “Shop pay” button on the product page is rendered through Shopify SDK so it's not possible to change the color or text of that button.
Let us know if you need any further help with the Shopify store.
Regards,
CedCommerce
This is an accepted solution.
Hello @dd58,
For your information, the “Shop pay” button on the product page is rendered through Shopify SDK so it's not possible to change the color or text of that button.
Let us know if you need any further help with the Shopify store.
Regards,
CedCommerce
Very disappointing answer, and not a solution at all 😞
Please ask the Shopify IT team to consider changing that ASAP, to ideally auto-match OUR own brand's AddtoCart button, or at least change the button to a WHITE background, with a purple border and purple text. It's so bold it literally distracts from the products themselves. (The way ApplePay displays is at least black and doens't distract the eye. It's not half as domineering as the purple.)
ahh got it. Would be great if that was able to be a branded color. Maybe in the future they'll implement that feature.
Unfortunately it will never be in their best interest to allow us to change the button, as branding colors are given high importance by corporations like Shopify. That being said, although there are a few obstacles that Shopify places in our way, it's certainly possible to tweak the button with some advanced CSS understanding.
Obstacle 1: The Shopify SDK renders the button with hashed, randomized class names (e.g. ".kqsiVA9Jf8LJAbxw8Bau"). This prevents us from targeting the button with class selectors, since these classes change on every page load.
Solution: Target the button according to its "role" attribute. This attribute is a web browser standard that can't be changed.
div[role="button"] {
background: var(--colorBtnPrimary);
}
Obstacle 2: The button's style rules use the !important flag, which prevents them from being overridden.
Solution: Use the !important flag in your overriding rule, and ensure that your rule has a higher specificity so that it "cascades" over the original style rule. In my case, I added a parent element's class name to the selector.
.payment-buttons div[role="button"] {
background: var(--colorBtnPrimary) !important;
}
Obstacle 3: The hover state of the button uses a ":not()" pseudoclass, which gives it even higher specificity than our first overriding rule.
Solution: Add another level of specificity to the hover state selector. I personally opted to use my own ":not()" with a unique class name.
.payment-buttons div[role="button"] {
background: var(--colorBtnPrimary) !important;
}
.payment-buttons div[role="button"]:hover:not(.a-chance-this-button-is-staying-purple) {
background: var(--colorBtnPrimaryLight) !important;
}
Depending on page structure, these specific rules may not work on every site. I hope this at least gives you an idea of some techniques you can use to overcome these obstacles and get your shop's branding just right!
Thank you @BFWebTeam! In exploring these techniques myself, I'm not seeing the change after putting my tweaks in base.css. Is that the right file for these changes?
.payment-buttons div[role="button"] {
background: rgba(90,49,244, 0.32) !important;
}
.payment-buttons div[role="button"]:hover:not(.a-chance-this-button-is-staying-purple) {
background: rgba(90,49,244, 0.22) !important;
}
Thanks again!
I have a feeling that's to do with the button being in a shadow root which can be tricky to target (sometimes not at all), so I don't think you can just target the classes or selectors as usual in your stylesheet.
Here's a bit of a definition of what the shadow root is:
"The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree. You can retrieve a reference to an element's shadow root using its Element. shadowRoot property, provided it was created using Element."
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025