Does anyone know how to change the "buy with shop pay" button color and text?

[dd58]

DAWN THEME - Does anyone know how to change the "buy with shop pay" button color and text?

[Cedcommerce · 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

[ConRed]

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.)

[dd58]

ahh got it. Would be great if that was able to be a branded color. Maybe in the future they'll implement that feature.

[BFWebTeam]

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!

[fbroz]

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!