How can I alter the color of the Shop Pay logo on product pages?

Store Design

Topic summary

Goal: change the default purple color of the Shop Pay logo/banner on product pages added by the Shop Pay Installments theme updater.

Recent actions:

  • Store URL was shared for review.
  • Proposed CSS in assets/theme.css: .shop-pay-logo { filter: grayscale(1) !important; } to desaturate the logo to gray.
  • Alternative when theme.css didn’t apply: wrap {{ form | payment_terms }} in a div with a custom class (e.g., .shop-pay-content) in product-template.liquid and style that class. Using filter: brightness(0) turned the logo solid black; grayscale(1) only makes it gray. Example: .shop-pay-content { float: left; margin-top: 15px; filter: brightness(0); }.

Notes:

  • CSS filter applies visual effects: grayscale removes color; brightness(0) renders black.
  • Whether styles take effect can depend on selector targeting and where the CSS is placed (global stylesheet vs. template-level wrapper).

Status: workable CSS approaches provided, but the original poster hasn’t confirmed resolution. Another participant requested help, so the discussion remains open. Code snippets are central to implementing the fix.

Summarized with AI on December 21. AI used: gpt-5.
1

How can you change the purple icon color of the “Shop Pay” logo that displays on the product pages?

I installed the “shop pay installments” automatic theme updater onto my site, which adds the “shop pay” banner on all product pages. I would like to keep the banner, but I really hate the way the purple looks.

Thanks

2

@ng8

Please share store URL!

Thanks!

3

https://shopadonysse.com/collections/clothing/products/vintage-mens-white-cotton-tee

Thank you!

4

@ng8

Please add the following code at the bottom of your assets/theme.css file.

.shop-pay-logo { filter: grayscale(1) !important;}

Thanks!

1 Like
5

The CSS ultimately works but not when added to the theme.css file. What worked for me was wrapping the {{ form | payment_terms }} code in a div. giving it a class and adding that class style to my product-template.liquid file. I used filter: brightness(0) to make it all black. Using grayscale does just that, turns everything gray. Here’s the style I used:

.shop-pay-content {
    float: left;
    margin-top: 15px;
    filter: brightness(0);
}

I used float: left so that my margin-top would work.

1 Like
6

Hello, is there anyway you can help me with this?