Change Font Color on Password Protected Page

Solved
Highlighted
New Member
4 0 0

I'm using Debut on my Basic Shopify account. I have added a new background on the password protected page that is white. The default text on the password page is white. This causes the text to be unreadable. How do I change the font color?

0 Likes
Highlighted
Shopify Expert
115 22 45

This is an accepted solution.

At the top of your layout/password.liquid file right above

</head>

 

Add this code:

  <style>
    h1, h2, h3, p, li, label, span, small {color: #000;}
  </style>

Change #000 to whatever hex color you want. Here's a link if you need help finding a hex color: https://htmlcolorcodes.com/

Highlighted
Shopify Staff
Shopify Staff
393 72 179

Hey, there!

 

Jason here from Shopify Support.

 

The answer @Eric_K_offers is brilliant. Since you're using themes made by Shopify, you can also edit the font color right from the theme editor.

 

You can do so by Shopify admin > Online Store > Themes > Customize. In the theme editor, select Password page on the top. On the left-hand side menu, click on Theme settings then Colors.

27_19-ufa23-h6v61

In the Color section, the font color you want to edit is at the Body text.

27_21-tq6k5-icgyr

Once finished editing, don't forget to go to the top-right corner and click on Save.

 

If there’s anything else I can help you out with, please don’t hesitate to reply back and I’d be happy to help out!

 

All the best,
Jason

 

 

Jason | Social Care @ Shopify
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it Accept as Solution to help others locate the answer!
Your Like and Accept as Solution are much appreciated!
To learn more visit the Shopify Help Center, or the Shopify Blog.

Highlighted
New Member
4 0 0

Is there a way to add a transparent background to the text? I'd like it to make a little easier to read. The white background is busy. The black text is still difficult to read. 

 

You're the best. Thank you so much for the help!

0 Likes
Highlighted
Shopify Expert
115 22 45

Probably the best way to do this would be to take the original image and modify it in graphics software like Photoshop or GIMP. You just need to set a white layer on top at 60-70% opacity and it should create more contrast. 

Highlighted
Tourist
7 0 1

Thank you!!!!!!!!!!!!!!!!!!!

0 Likes
Highlighted
Tourist
4 1 0

Hi - I added this code, but it only changed the top part of the text. Do you know how to change the other bits of the text? They would need to go from white to black.

0 Likes
Highlighted
Shopify Expert
115 22 45

Hey Sarah. If you can send me a link to your site, I can take a look.

0 Likes
Highlighted
Excursionist
29 0 8

I have a similar question. I figured out how to change the font color on my password page but when a customer submits their email, the font color is not what I want. Right now it's showing a green color but I want the pink that I use throughout the website. Is there a way to fix this?

0 Likes
Highlighted
New Member
1 0 0

I am having the same trouble as the original user where the body text is not changing to black. Can you help?

0 Likes