Change Shop Pay Logo Color on Product Page

Shopify Discussion

Topic summary

Goal: change the purple Shop Pay logo on the product page to black.

  • Context: The logo is an SVG (Scalable Vector Graphics). The poster attempted to recolor it via CSS in main.css using selectors like “shop-pay-logo svg” and “svg.shop-pay-logo” with fill: rgb(0 0 0); but it had no effect. The fill property sets shape color in SVGs.

  • Suggestion: Another participant advised applying a CSS filter to the element (img.shop-pay-logo { filter: invert(1); }) to invert colors as a quick fix, and noted that editing the SVG directly might be necessary if CSS fails.

  • Outcome: The invert filter did not work. The original poster believes modifying the SVG file itself is likely required to achieve a black logo.

  • Status: Unresolved/ongoing. No confirmed solution; the practical next step suggested is direct SVG editing. A screenshot illustrates the purple logo beneath the product details.

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

Hi All,

On the product page, I’m trying to change the purple logo below to black.

fishman1_0-1729721964346.png

It’s an SVG which I think I can change via CSS in the main.css file. I’ve tried a few variations (below) with no success.

shop-pay-logo svg {
fill: rgb(0 0 0);
}

svg.shop-pay-logo {
fill: rgb(0 0 0);
}

Any other suggestions?

Thanks in advance!

1 Like
2

You can try targeting the SVG directly by using this CSS snippet in your main.css:

img.shop-pay-logo {
filter: invert(1);
}

This will invert the colors, which should effectively make the purple logo black. If that doesn’t work, you might need to edit the SVG file itself to change the fill color.

3

Thanks, unfortunately still unsuccessful. I think you’re right about changing the file itself.