Purple Shop Pay Button on Products Page is Pixelated

Store Design

Topic summary

Main issue: A merchant’s Shopify “Shop Pay” (purple) button turned pixelated after a standard theme save. The change was not caused by password protection or earlier custom CSS for policy/blog background colors.

Proposed fix: A contributor advised adding a simple CSS rule (placed in theme.liquid or base.css) to make the button’s span background transparent.

Outcome: The merchant confirmed the CSS fix resolved the pixelation.

Follow‑up request: The merchant then asked how to vertically center text over an image (screenshot provided). The helper requested the store URL to investigate before advising on alignment.

Status: Original pixelation issue resolved. New alignment question remains open pending review of the provided URL.

Notes: Multiple screenshots illustrate the pixelated button and the text-over-image alignment concern. No code snippets beyond the brief CSS guidance were shared as a finalized solution for the second issue.

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

Hello there,

I hope whoever is reading this is doing well. I’m building my Shopify store and last night, the purple shop button became pixelated and I don’t understand how this happened and I haven’t been able to find out how to fix it.

I thought it was because I made my site password protected, but that wasn’t it. I did add custom code twice, to change the color of my policies background and to change the color of my blog background. Additionally, the purple shop button didnt change after I added those codes. It changed when I made a regular save within my theme.

Can someone help? playrenouned.com

Screenshot 2024-04-24 at 11.56.25 PM.png
Screenshot 2024-04-24 at 11.56.25 PM.png1260×724 43.2 KB

2

@turtlelionowl

please add below code into your theme.liquid file or in the asset files, base.css file hoepfully it will help you.

.focus-none span {
	background: transparent !important;
}

2024-04-25 11_27_26-Window.png
2024-04-25 11_27_26-Window.png1285×611 120 KB

1 Like
3

Thank you so much!! It worked, appreciate it.

1 Like
4

no problem feel free to reach out if you have any need help or having issue.

1 Like
5

Do you have a way to center this text to the middle of the photo?

Screenshot 2024-04-26 at 6.43.51 AM.png
Screenshot 2024-04-26 at 6.43.51 AM.png2476×1516 333 KB

6

can you please share the url?