Change background colour of customer account login page

Store Design
1

Hello,

I’m running the new style accounts pages ( the one where it texts customers a code and doesn’t need a password) however I can’t see any options to customise it.

My website theme uses dark colours but the login page is white which isn’t fitting with my theme. Where can I change this, do I need to enter some CSS somewhere?

Please advise.

I appreciate any support.

2

Hey @Glowsmith ,

I would need to see your login page to know what elements to apply the CSS on, could you provide the link to your store and the password if it’s password protected?

3

Hi @Glowsmith

Would you mind to share your store URL? Thanks!

4

Thanks for the reply.
In the nav footer, you will see “your account” its that page I want colour coded with the website.

Thank you

5

Hi Made4uo,

Edited by Community Moderator
In the nav footer, you will see “your account” it’s that page I want colour-coded with the website.

Thank you

6

Hey @Glowsmith ,

Please try this and let me know :blush:

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706537362781.jpeg
ThePrimeWeb_0-1706537362781.jpeg1253×933 87.9 KB

7

Hi,

Thank you for the suggestion, I’ve inserted the code however it hasn’t changed the “your account” screen, it still shows white.

Capture4564568.JPG
Capture4564568.JPG1504×1066 26.1 KB

8

Sorry Im confuse, change the background color of the whole page right?

Like this?

Made4uoRibe_0-1706562839206.png
Made4uoRibe_0-1706562839206.png907×764 15 KB

There are 2 colors of the this page. The larger width is

Made4uoRibe_1-1706562923457.png

Made4uoRibe_2-1706563056605.png

And the smaller is white.

To change theme you need to find this codes in the customer-public.css in the Asset folder. Or paste this code.

@media (min-width: 1025px){
.hidden-background .page-main {
    background-color: #1f1f21 !important;
}
}
.hidden-background .page-main {
    background-color: #1f1f21 !important;
}

On the same folder, Im not sure if it listen. If not add !important.

Save and refresh browser.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

9

Hi Made4uo.

You are correct, the whole page like the one you have pictured.

I do not have a customer-public.css but do have a customer.css

I looked for the code and couldn’t see it, so I pasted yours at the bottom but it didn’t do anything. Am I doing something wrong? Any help would be appreciated.

Thank you

10

Oh, the files where you paste it. I cant check it vie inspect tool. Anyway, did you try to paste it on the base.css? if still not working on the base.css files then try to paste into the theme.liquid.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

11

Hello,

Ive pasted in base.css and nothing happened, I pasted in theme.liquid nothing happened.

I did it below the body tag. I just cant seem to change the login page :disappointed_face: I don’t know what css controls the login