Change logo on just the password page

Solved

Change logo on just the password page

PureMental
Excursionist
12 0 3

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. 
Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Hi @PureMental , 

I have checked your image logo, it is black: 

BSSCommerceB2B_2-1718474558955.png

 

 

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: 

BSSCommerceB2B_0-1718474067291.png

 

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. 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 21 (21)

Richmondair
Tourist
7 2 1

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:

  1. Access Your Theme's Code:

    • Log in to your Shopify admin panel.
    • Go to "Online Store" > "Themes."
    • Find your current theme and click "Actions" > "Edit code."
  2. Locate the Password Page Template:

    • In the theme editor, look for the "Templates" or "Sections" folder.
    • Find the file named password.liquid or something similar. This file controls the layout of your password page.
  3. Update the Logo in the Password Template:

    • Open the password.liquid file.
    • Find the section of the code where the logo is being displayed.
    • Replace the  line with the URL of your white logo.
      1. Save Your Changes:

        • Save the changes to the password.liquid file.
    • This method directly changes the logo for the password page without using additional CSS. Ensure that the white logo file is uploaded to your Shopify assets.

       

       

https://rvacleanair.com/
PureMental
Excursionist
12 0 3

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?

PureMental
Excursionist
12 0 3

Here where is the logo section. Where I need to put in the png url of the white version of my logo

Schermopname (89).png

BSSCommerce-B2B
Shopify Partner
565 114 137

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
PureMental
Excursionist
12 0 3

The problem is on just the password page. Or do you need access to my actual shopify account?

BSSCommerce-B2B
Shopify Partner
565 114 137

The problem is on just the password page. 

I want to checked this issue in your website: 

BSSCommerceB2B_0-1718439953241.png

I can't access without password. 

FYI,

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
PureMental
Excursionist
12 0 3

The password is ´Shopify´

PureMental
Excursionist
12 0 3

Here where is the logo section. Where I need to put in the png url of the white version of my logo

Schermopname (89).png

BSSCommerce-B2B
Shopify Partner
565 114 137

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:

BSSCommerceB2B_0-1718455348800.png

 

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: 

BSSCommerceB2B_1-1718455627013.png

 

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! 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
PureMental
Excursionist
12 0 3

No, I mean just the logo not the entire banner. Is that possible? 

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Hi @PureMental , 

I have checked your image logo, it is black: 

BSSCommerceB2B_2-1718474558955.png

 

 

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: 

BSSCommerceB2B_0-1718474067291.png

 

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. 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
PureMental
Excursionist
12 0 3

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.

BSSCommerce-B2B
Shopify Partner
565 114 137

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! ^^

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Humn12
Tourist
6 0 0

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 

BSSCommerce-B2B
Shopify Partner
565 114 137

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

BSSCommerceB2B_0-1718519027512.png

 

If it helps you, please like and mark it as the solution.

Best Regards

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Humn12
Tourist
6 0 0

Yes ! Thank you so much, How can i get it centered under the logo?

BSSCommerce-B2B
Shopify Partner
565 114 137

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: 

BSSCommerceB2B_0-1718592237998.png

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.

 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Humn12
Tourist
6 0 0

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.

Humn12
Tourist
6 0 0

Also please let me know how to mark as a solution, im new to the community forums lol.

BSSCommerce-B2B
Shopify Partner
565 114 137

Absolutely yes,

I will send you private message to describe how to mark solutions.

Thanks you so much for this. 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

ProtoMan44
Shopify Partner
509 43 80

@PureMental Thanks for posting here. For it you need to customise your password page or edite the password template 

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!