Need help with Password Page Customization Header using Taste theme

Store Design
1

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!

2 Likes
2

Hi @AaronS89291 ,

Foladun here from the Customer Account Deluxe App team. :waving_hand:

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 tag:
{% if template == 'password' %}
 
{% 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:

    DeluxeFoladun_0-1731474172390.png
    DeluxeFoladun_0-1731474172390.png300×271 8.15 KB

  3. Change the Desktop logo position to Middle center for the logo to be centered:

    DeluxeFoladun_1-1731474189501.png
    DeluxeFoladun_1-1731474189501.png296×310 14.9 KB

Let me know if you need any further assistance!

Best regards,
Foladun | Customer Account Deluxe

3

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:


    {{ 'logo-image' | asset_url | img_tag: 'Logo' }}

​

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

4

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?

1 Like
5

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

6

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

7

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?

1 Like
8

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

9

The header is now white

10

@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

11

Yes thank you - pw is twentytwentyfour

12

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

Best regards,
Foladun | Customer Account Deluxe

13

pepprbeauty.com.au

1 Like
14

@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

15

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.

1 Like
16

@AaronS89291 Almost there! :grinning_face_with_smiling_eyes:

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

17

Thank you, that worked!!! :grinning_face:

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.

1 Like
18

@AaronS89291
I’m glad it worked! :blush: 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