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!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024