Change Font Color on Password Protected Page

Solved
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

Success.

Shopify Expert
110 20 41

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/

2 Likes
Shopify Staff
Shopify Staff
398 73 147

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.

1 Like
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
Shopify Expert
110 20 41

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. 

1 Like
Tourist
7 0 0

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

0 Likes