Hi,
I tried everything, but nothing seems to work. I want to change my logo, just for the password page. I have a dark password page so I want a white version of my logo on there instead of the black version I have on my other pages. Is there any way someone can do it for me?
Store url: 2d04fe-2.myshopify.com
Let me know if I need to send anything else.
Hello PureMental,
I understand you want to change the logo on just the password page of your Shopify store without adding CSS code. Here’s an alternative approach:
Access Your Theme’s Code:
Locate the Password Page Template:
Update the Logo in the Password Template:
Save Your Changes:
- Save the changes to the password.liquid file.
Hi @PureMental ,
I have checked your website, but it still in protect.
Can you kindly share your the password with us?
We will check it and suggest you a solution if possible.
@PureMental Thanks for posting here. For it you need to customise your password page or edite the password template
Perfect bro, but that’s the other problem. I dont know where to put it. Cause I see like the favicon url part but not the main logo section. I can’t insert a screenshot, I dont know why it doesnt accept PNG’s. Do you know where to go from here?
The problem is on just the password page. Or do you need access to my actual shopify account?
The problem is on just the password page.
I want to checked this issue in your website:
I can’t access without password.
FYI,
The password is ´Shopify´
Hi @PureMental ,
Sr about misunderstanding your requirrement, if you want to change my logo, just for the password page.
Follow my instructions:
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file base.css. And add this code snippet to the end of the file.
.password-header {
background: white !important;
}
.modal__toggle-open.password-link.link.underlined-link {
color: black !important;
}
In this step, you change the background of class wrap your logo to white.
After that, you change the color of text “Enter using password” to black to avoid clashing with the background color you’ve set.
And, you absolutely can change other colors as you want. In my example, I chose black and white ^^
Step 3: Save your code and reload this page.
=>> The result:
I hope these instructions will help you. If they are helpful, please give us to likes and mark as the solution.
Have a nice day sir!
No, I mean just the logo not the entire banner. Is that possible?
Hi @PureMental ,
I have checked your image logo, it is black:
So with your this request, you can change the background of the logo or completely replace it with a new logo (which has been changed to a white version on the password page).
In my opinion, you should only change the background of the logo to make its content more visible.
This way, there is no need to make extensive changes, only a small CSS edit is needed, and it won’t affect other pages.
In this Step 2: Search for the file base.css. And add this code snippet to the end of the file.
.password-header img {
background: white;
}
And the result will be:
We hope my suggestions will solved your issue.
If it is helpful, can you kindly give us many likes and mark the solution for us?
This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.
Thank you for your time. Its still not what I hoped it would be, now I just removed the logo entirely which is also fine. Thanks again and Ill give you a like and solution.
It’s my pleasure support you @PureMental ,
Thanks for give us like and mark solution, we’re happy to see that our suggestion helped a little bit.
This is greatly motivate us to contribute to our community.
Have a nice day, sir! ^^
Can you please help me ? I want my mobile site to have the same exact look as my desktop site, my website is richeboystudios.com
Hi @Humn12
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file theme.css. Add the following CSS snippet
@media screen and(max-width: 750px) {
.header__inline-menu{
display: block !important;
grid-area: unset !important;
}
header-drawer {
opacity: 0 !important;
}
.list-menu--inline {
flex-wrap: nowrap !important;
max-width: 100px !important;
}
}
Result
If it helps you, please like and mark it as the solution.
Best Regards
Yes ! Thank you so much, How can i get it centered under the logo?
Hi @Humn12 ,
We’re happy to see that our suggestion helped you.
I have checked your website, the inline-menu was centered under the logo as below image:
Can you kindly give us likes and mark as solution?
This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.
Thanks in advance.
Yes of course ! Also I mean centered on mobile, its kinda off center, on mobile i would like it to be centered under the logo on mobile.
