Debut Theme - How to change the background of the password page?

Store Design
1

Hello,

I saw many posts about this subject, but solutions don’t work for me.

  1. I created a new asset called “background-coming-soon-page.png”
  2. I went to Assets > theme.css.liquid and I paste at the bottom :
/*================ Custom backgroung password page ================*/

.password-page {
background-image: url({{ 'background-coming-soon-page.png' | asset_img_url: '2000x' }});
}

But unfortunately nothing happened, the background of my password page stays blank. Do you know where is the problem please ?

In Assets > theme.css.liquid, I also tried this but it didn’t work :

/*================ TEMPLATES ================*/
/*============= Templates | Password =============*/

.password-page {
  background-image: url({{ 'background-coming-soon-page.png' | asset_img_url: '2000x' }});
  display: table;
  height: 100%;
  width: 100%;
  color: $color-body-text;
  background-color: $color-body;
  background-size: cover;
}

Thank you in advance for your help !

2 Likes
2

@Johjoe

you are wrong code URL

please this code

background: url({{ 'background-coming-soon-page.png' | asset_url }}) no-repeat;
1 Like
3

Hello,

I have the background image showing but not taking the full space on mobile view(I do have a white space under)!

@KetanKumar Can you help me please? https://skintsy.com

thanks

1 Like
4

@salome

Thanks for post

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
body.template-password { height: 100vh;}
1 Like
5

thank you so much :grinning_face_with_smiling_eyes:

1 Like
6

@salome

Thanks for update.

7

Hello @KetanKumar , thank you so much for your quick reply ! Unfortunately still nothing happens. My “coming soon” page remains blank. I’ve attached a screenshot of the code. Do you know what’s wrong please ?

Password-page-background-image.PNG
Password-page-background-image.PNG3171×1288 497 KB

8

@Johjoe

Thanks for update

Please share your site URL,
So I will check and provide a solution here.

1 Like
9

Hello @KetanKumar , here is my website : https://theannexparis.com/

Thanks !

1 Like
10

@Johjoe

Thanks or for store url

sorry but this image not available on the asset folder. so please just upload

https://cdn.shopify.com/s/files/1/0404/2529/1930/t/1/assets/background-coming-soon-page.png?

1 Like
11

Thank you so much @KetanKumar , it’s working now ! You was very useful !

Last question : how can I change the text color in white for this password page ONLY please ? I need to change more precisely :

  • https://theannexparis.com/ :
  • In the upper right corner of the screen : “entrez avec un mot de passe” and the associated rectangle
  • In the middle of the screen : “Faites parties des premières… boîte de réception”
  • In the bottom of the screen : “Faites passer le mot” !
  • If I can change the color of “PARTAGER” “TWEETER” “EPINGLER”, it would be amazing too

Thank you in advance !

Johanna

12

@Johjoe

Yes, sorry bot right now not able to store

13

Hello,

In case someone is looking for the answer of my 2nd question (how to change font color ONLY for the password page), here is how I did :

Enjoy !

14

where do I post that code ? My photo is out stretched on the page .

15

Are you using debut theme ?

If so, the answer si here :

https://community.shopify.com/c/Shopify-Design/Debut-Theme-How-to-change-the-background-of-the-password-page/m-p/870375/highlight/true#M219332

If the size of your background is still weird, try to change 100vh by another number.

16

in mobile view the background photo is overly large and not fitting in the screen

17

Can you help me with this issue

18

@KetanKumar Hi I’m having the same problem with the code in the debut theme password screen could you do it for me please ?

19

@jamiepedreros

Thanks

can you please share store ulr so i will check and let you know.

20

Demonsinparis.com