Need help with Password Page Customization Header using Taste theme

[AaronS89291]

Hi, Im looking for help to customize the password page using the Taste theme:

- Transparent Header (full page is 1 image)

- Logo is centered

None of the codes on shopify community have worked for me thus far.

Thanks in advance! 

[Deluxe-Foladun]

Hi @AaronS89291,

Foladun here from the Customer Account Deluxe App team. 👋

To customise your password page with a transparent header, please follow these steps:

1. Go to Online Store > Themes.
2. Click on the three dots next to your theme and select Edit Code from the options.
3. In the left-hand sidebar, search for theme.liquid, open it and add the following code right before the </head> tag:

{% if template == 'password' %}
 <style>
  .sticky-header.header-wrapper {
      background: none;
  }
 </style>
{% endif %}

This will make the header transparent.

To center the logo:

1. Go to Online Store and click on Customize.
2. In the theme editor, open the Header section:
   
3. Change the Desktop logo position to Middle center for the logo to be centered:
   

Let me know if you need any further assistance!

Best regards,
Foladun | Customer Account Deluxe

[AaronS89291]

Hi there, the transparent header didn't work. I've tried this code a couple of different ways and nothing has worked yet. Can you recommend another way?

[Deluxe-Foladun]

Hi @AaronS89291,

Let's try this updated approach. The process remains the same, but the code and file you'll edit have changed:

1. Go to Online Store > Themes.
2. Click on the three dots next to your theme and select Edit Code.
3. In the left-hand sidebar, search for section.password.css and open it.
   Add the following code at the end:

#shopify-section-main-password-header > div {
    background: none;
    position: absolute;
    width: 100%;
}

Let me know if this resolves the issue!

Best regards,
Foladun | Customer Account Deluxe

[AaronS89291]

Hi,

That almost worked - it gets rid of my entire header instead of making it transparent so then the logo and passkey box disappears which I don't want.  Can you adjust the code please?

[Deluxe-Foladun]

Hi @AaronS89291,

try replacing it with just this:

#shopify-section-main-password-header > div {
    background: none;
}

Let me know if this works.

Best regards,
Foladun | Customer Account Deluxe

[AaronS89291]

The header is now white

[Deluxe-Foladun]

@AaronS89291 

I see. Can you share a link to the password page? It'll help me provide a better solution since it's a bit tricky to figure it out without seeing the code.

Best regards,
Foladun | Customer Account Deluxe

[AaronS89291]

Yes thank you - pw is twentytwentyfour

[Deluxe-Foladun]

@AaronS89291
Thanks for the password! What's the link though?

Best regards,
Foladun | Customer Account Deluxe

[AaronS89291]

pepprbeauty.com.au

[Deluxe-Foladun]

@AaronS89291 

Ok - try this, always at the end of  section.password.css:

#shopify-section-main-password-header > div {
    background: none;
    position: absolute;
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;
}

 
Best regards,
Foladun | Customer Account Deluxe

[AaronS89291]

SO close! The logo is still there but now the logo and text are overlapping and there is a white banner beneath the background image and above the footer.

[Deluxe-Foladun · Accepted solution]

@AaronS89291 Almost there! 😄

Try replacing the previous code I provided with the following:

#shopify-section-main-password-header > div {
    background: none;
    position: absolute;
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;
}

.password-header {
    padding-top: 0;
    color: white;
}
.modal__toggle-open.password-link.link.underlined-link {
    color: white;
}
.modal__content {
    height: fit-content;
}

.email-signup-banner__box.banner__box.newsletter.newsletter__wrapper {
    padding-top: 236px;
}
html.js.full-height {
    height: 100vh;
}
.password-main>section:only-child {
    height: 100%;
    display: block;
    max-height: unset;
    box-sizing: border-box;
    max-height: 100%;
}
.banner {
  height: 100%;
}

@media screen and (min-width:1024px){
 .email-signup-banner__box.banner__box.newsletter.newsletter__wrapper {
    padding-top: 42px;
}
}

Best regards,
Foladun | Customer Account Deluxe

[AaronS89291]

Thank you, that worked!!! 😀

I see now the footer looks quite big since the header is transparent now. Is there a way to make the footer shorter and also hide 'powered by shopify'? I still want my instagram logo/link there though.

[Deluxe-Foladun]

@AaronS89291 
I'm glad it worked! 😊 And I saw that you already found a solution for the footer.

Feel free to reach out if you need anything!

Cheers,
Foladun | Customer Account Deluxe

[akshay_bhatt]

Hi @AaronS89291 ,

To customize the Taste theme's password page with a transparent header, full-page background, and centered logo:

1. Edit Code:

   • Go to Online Store > Themes > Edit Code.
   • Open password.liquid and password.css .
   • Add css: 

body#password {
    background: url('{{ "your-background-image.jpg" | asset_url }}') no-repeat center center;
    background-size: cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.site-header { background: transparent !important; position: absolute; width: 100%; }
.site-header__logo { text-align: center; width: 100%; }
​

Logo HTML (Optional): Center logo HTML in password.liquid:

<div class="site-header__logo">
    {{ 'logo-image' | asset_url | img_tag: 'Logo' }}
</div>
​

replace your-background-image.jpg with your image filename. save and preview

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

[AaronS89291]

Hi, thanks. Where do I post this code? And I cannot locate password.css - I only have section.password.css or password.liquid