Change Color of Shop Pay Button - Debut Theme

Store Design
1

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
Screen Shot 2020-07-16 at 8.05.39 PM.png2260×1564 212 KB

2

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

3

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

Password: AnimalCrackers2020

4

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;
}
1 Like
5

Thank you.

That did not work, maybe I missed something?

Screen Shot 2020-07-16 at 9.12.49 PM.png
Screen Shot 2020-07-16 at 9.12.49 PM.png1752×1534 392 KB

6

Nevermind, that worked!

I ended up replacing the red color code for #A8A197

Thank you so much.

7

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

Any thoughts on an additional solution?

8

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

9

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.

10

Hi,

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

Thanks in advance.

11

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…

1 Like
12

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

13

Hi Oscprofessional,

Given that we run a luxury high-end store, it’s crucial for us to maintain a sophisticated aesthetic, so the current purple on the page is completely unacceptable. We’ve had customers describe it as “horrific” and “tacky.” After spending several hours searching for a solution, we finally managed to resolve the issue by adding the following CSS code to the “Product Page” CSS block:

css

div.shopify-cleanslate div[role="button"][data-testid="ShopifyPay-button"] {
    background-color: #2E2E2E !important;
    color: #FFFFFF !important;
    border: none !important;
}
div.shopify-cleanslate div[role="button"][data-testid="ShopifyPay-button"]:hover {
    background-color: #3B3B3B !important;
}

I hope this helps. Unfortunately, the 500-character limit restricts us from implementing more sophisticated hover effects.

1 Like
14

It worked! Thank you!