Text in password page is not showing

Store Design
,

Topic summary

A user reports that text on their password page is invisible, likely because it’s black text on a black background.

Problem identified:

  • Text and form elements are not visible on the store’s password page
  • Issue appears to be a color contrast problem

Solutions offered:
Multiple community members provided CSS code fixes targeting different elements:

  1. Modal content fix - Add CSS to base.css to make modal background transparent and adjust input field styling

  2. Form input styling - Modify theme.liquid file by adding CSS within <style> tags to set:

    • Password form inputs to white background (#ffff)
    • Password button and text elements to white color (#ffff)

  3. General approach - Locate the theme’s CSS file (typically theme.scss or styles.css.liquid) and add color overrides

Note: Some code snippets in the thread appear corrupted or reversed, but the core solution involves adding !important CSS rules to force proper text and background colors on password page elements.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

The text in my password page is not showing. I am guessing the text is black as the background and that is why it is not showing.

When I click here

Captura de pantalla 2024-06-18 a la(s) 7.38.46 p.m..png
Captura de pantalla 2024-06-18 a la(s) 7.38.46 p.m..png714×444 219 KB

This is what is showing

Captura de pantalla 2024-06-18 a la(s) 7.39.20 p.m..png
Captura de pantalla 2024-06-18 a la(s) 7.39.20 p.m..png726×1504 214 Bytes

2

Hi @priscychavez ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

body.password .modal__content {
    background-image: url(/cdn/shop/files/Portada_desktop_54.png?v=1718692316) !important;
}
body.password .modal__content .field__input {
    background-color: transparent !important;
}
3

Hi @priscychavez ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSCommerceHDL_0-1718762392064.png
BSSCommerceHDL_0-1718762392064.png1902×899 133 KB

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

BSSCommerceHDL_1-1718762413639.png
BSSCommerceHDL_1-1718762413639.png1919×873 121 KB

.password-form input {
    background-color: #ffff !important;
}

button.password-button {
    color: black !important;
    background-color: #ffff !important;
}

button.modal__close-button.link svg, 
small.password__footer-text, 
small.password__footer-text a,
.password-modal__content-heading
{
    color: #ffff !important;
}

Here is result:

BSSCommerceHDL_2-1718762566083.png
BSSCommerceHDL_2-1718762566083.png1917×907 15.6 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
4

I can Help or you can try this

  • In the theme code editor, find the CSS file (usually under Assets and named something like theme.scss.liquid or styles.css.liquid).
  • I can Help out
  • Add the following CSS code at the end of the file
  • .password-page {color: #FFFFFF; /white/}