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

Technical Q&A

Topic summary

Attempts to restyle the Shop Pay express checkout button in the Dawn theme.

  • Constraint: The button is injected by the Shopify SDK, and an initial answer states its color and text cannot be changed via theme settings.
  • Feedback: Multiple merchants want branding control (e.g., match Add to Cart or use a white variant), noting the default purple is visually dominant compared to Apple Pay’s black.

Workarounds proposed:

  • Use advanced CSS to override styles despite obstacles:
    • Hashed, randomized classes: target via the element’s role attribute instead of classes.
    • Built‑in !important rules: override with higher‑specificity selectors and your own !important.
    • Hover specificity (using :not()): further increase specificity (e.g., add your own :not()).

Limitations and current hurdle:

  • A follow‑up reports the CSS in base.css doesn’t apply; another participant explains the button likely renders inside a Shadow DOM (shadow root), which isolates styles, often preventing theme CSS from affecting it. An illustrative image of the shadow root is referenced.

Status:

  • No confirmed, reliable method to change the button’s color/text across stores.
  • Feature request implied to Shopify; discussion remains unresolved.
Summarized with AI on December 15. AI used: gpt-5.
5

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!

3 Likes