Change Color of Shop Pay Button - Debut Theme

kailasachse
Shopify Partner
85 0 32

Hey There,

I'm looking to change the purple color of the "Buy with Shop Pay" button.

Any thoughts on how to do this?

Screen Shot 2020-07-16 at 8.05.39 PM.png

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
Replies 11 (11)

oscprofessional
Shopify Partner
15830 2369 3071

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
kailasachse
Shopify Partner
85 0 32

Sure, the site is: https://animalcrackers.clothing/

Password: AnimalCrackers2020

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
oscprofessional
Shopify Partner
15830 2369 3071

Hello ksachse,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

button.shopify-payment-button__button.shopify-payment-button__button--unbranded._2ogcW-Q9I-rgsSkNbRiJzA._2EiMjnumZ6FVtlC7RViKtj._2-dUletcCZ2ZL1aaH0GXxT {
    background-color: red;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
kailasachse
Shopify Partner
85 0 32

Thank you.

That did not work, maybe I missed something?

Screen Shot 2020-07-16 at 9.12.49 PM.png

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
kailasachse
Shopify Partner
85 0 32

Nevermind, that worked!

I ended up replacing the red color code for #A8A197

Thank you so much.

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
kailasachse
Shopify Partner
85 0 32

Update (again:) It looks like this solution did not actually work across all browsers.

Any thoughts on an additional solution?

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
Harold2nd
Visitor
1 0 0

We tried this code and it didn't work and then when we took it out it completely changed the template causing us to revert back to our old one.  Has that happened to anyone else?

Harold

kailasachse
Shopify Partner
85 0 32
It’s possible that something else was accidentally removed on top of the new code.
Either way, it’s always recommended to make a duplicate copy of your existing template before testing out new codes.
Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
HomeDecorDonna
Tourist
5 0 1

Hi,

 

Thank you for this. It works bu only for computers.  When you view it on mobile, it is still purple 😞  Do you know how to fix it please?

 

Thanks in advance.

sachahcas
Explorer
54 3 5

Maybe a little off-topic @HomeDecorDonna and @kailasachse but I have been looking into this and it turns out 90% of our US customers pay through Shopify-Pay as opposed to some of the other gateways like PayPal or ApplePay.

Maybe these customers associate PURPLE with their payment gateway and changing this lowers your conversion rate? I am going to keep a close eye on our conversion rate and the percentage of payments that goes through Shopify vs. the others for sure...

If it ain't broke, don't fix it
kailasachse
Shopify Partner
85 0 32

That's an important question! Color plays a big role in UX, and I bet changing this button has influenced checkouts.

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.