Re: How do I make a transparent header for password page Dawn theme?

Solved

How do I make a transparent header for password page Dawn theme?

lonelyboy
New Member
4 0 0

I was able to make the header transparent for the home page of my website. I want to be able to do the same with the password page as well (mobile and desktop). I want the image to be behind the transparent header. I can't find this solve anywhere. Any help?

Accepted Solution (1)

GemPages
Shopify Partner
5625 1262 1252

This is an accepted solution.

Hello @lonelyboy

It's GemPages support team and glad to support you today.

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1675762086020.png

 

2. Open your password.liquid file, paste the below code before </head>

<style>
#shopify-section-main-password-header .password-header{
    position: absolute;
    background: transparent;
    z-index: 99;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
</style>

 

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5625 1262 1252

Hello @lonelyboy

 

Password page have not header

GemPages_0-1675737488452.png

Can you give me your page URL( with pass if your store password is enabled) so I can check it and maybe give you a solution? 

Or you can try add custom code make the header transparent for hompage to below </head> on file password.liquid

<style>
    /*your CSS code*/
  </style>

GemPages_2-1675737850495.png

 

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
lonelyboy
New Member
4 0 0

Website: lonelyboycollctns.com

Password: tortai

 

Hope you will see what I'm talking about.

GemPages
Shopify Partner
5625 1262 1252

This is an accepted solution.

Hello @lonelyboy

It's GemPages support team and glad to support you today.

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1675762086020.png

 

2. Open your password.liquid file, paste the below code before </head>

<style>
#shopify-section-main-password-header .password-header{
    position: absolute;
    background: transparent;
    z-index: 99;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
</style>

 

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
lonelyboy
New Member
4 0 0

Thank you so much!! This worked perfectly.

lonelyboy
New Member
4 0 0

Can you help. I found an issue with sizing when you go into the enter password section. Any way to make this transparent as well? Or size the black box correctly with the text? Issues with mobile and desktop.

MRamzan
Shopify Partner
339 3 35

You can add this transparent header in any page:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112