Solved

Change the color of login page

Hellen302
Tourist
6 0 0

Dear Shopify expert,

 

↓ I would like to change the color of login page from blue to black. 

登入頁改顏色-1.PNG

 

↓ Click the (yellow) icon will reach this login page. 

登入頁改顏色-2.PNG

 

Could you please teach me how can I do?

Thank you so much for your assistance.

Accepted Solution (1)
techlyser_web
Shopify Partner
1609 299 322

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .ui-button.ui-button--primary:not(:disabled) {
     background-color: #000 !important;
  }
</style>

techlyser_web_0-1716543782204.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 9 (9)

techlyser_web
Shopify Partner
1609 299 322

Hello @Hellen302 

Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Hellen302
Tourist
6 0 0

Dear Techlyser_web,

 

I am so glad to receive your reply.

This is my website >> https://hhailun.com/

 

Thank you ^^

techlyser_web
Shopify Partner
1609 299 322

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .ui-button.ui-button--primary:not(:disabled) {
     background-color: #000 !important;
  }
</style>

techlyser_web_0-1716543782204.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Hellen302
Tourist
6 0 0

Dear Techlyser_web,

Thank you so much for your suggestion~

Hellen302
Tourist
6 0 0

Dear 459james,

 

I am so glad to receive your reply.

This is my website >> https://hhailun.com/

 

Thank you ^^

Anshul_arora
Navigator
408 115 80

Hello @Hellen302 ,

I understand you are looking to change the color login button (marked in a screenshot) from blue to black.

You can change the color with the mentioned CSS code.

Please add the code at the bottom of theme.liquid file before </body> tag and save.

<style>

button.ui-button.ui-button--primary.ui-button--full-width.ui-button--size-large.login-button.ui-button--has-hover-icon.captcha__submit {
background: black !important;
}

</style>


Output -: https://prnt.sc/L89QRgBiuUKP

Anshul_arora_0-1716543031150.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Hellen302
Tourist
6 0 0

Dear Anshul_arora,

Thank you so much for your suggestion~

BrainStation23
Shopify Partner
334 54 51

HI @Hellen302 
You can follow these step to achieve your result 
Go to online store->Edit code-> customer-public.css file and pest bello code 

.login-card__content .ui-button:not(.ui-button--link):not(.ui-banner__dismissible-button):not(.passkey-login-button){
  background-color:black !important;
}

Result:

BrainStation23_0-1716543096870.png

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
Hellen302
Tourist
6 0 0

Dear Brain,

Thank you so much for your suggestion~