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

Johjoe
Excursionist
34 2 16

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 !

Replies 118 (118)
KetanKumar
Shopify Partner
36839 3635 11972

@SavorToday 


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SavorToday
Tourist
4 0 3

@KetanKumar thank you! Our URL is www.savor.today

KetanKumar
Shopify Partner
36839 3635 11972

@SavorToday 
yes some issue on backend it possible to add me on staff i need only theme access can you please let me know if possile 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SavorToday
Tourist
4 0 3

@KetanKumar Thank you so much - have just given you staff access!

KetanKumar
Shopify Partner
36839 3635 11972

@SavorToday 

great, thanks

i have done this can you please check

KetanKumar_0-1617548777735.png

 

you have just change the image as you like below where is code just change the image link

KetanKumar_1-1617548927927.png

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SavorToday
Tourist
4 0 3

Thank you so much for your help!! That worked perfectly 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@SavorToday 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
thejollyboldbee
Tourist
7 0 6

Hello Kentan (@

I've read so many tuts and finally added code according as above mentioned.

But, unfortunately, it doesn't work on my PWpage thejollyboldbee.com.
Enclosed: my code + uploaded pic.

I would be so glad, if you may help me out 🙂

Thx
Sabine

 

Some more information:
Furthermore I replaced the password-footer.liquid in order to get "Links for facebook and so on).

 

2021_04_07_tjbb_theme.css.jpg2021_04_07_tjbb_bg-image.jpg2021_04_07_tjbb_pw new footer.jpg

KetanKumar
Shopify Partner
36839 3635 11972

@thejollyboldbee 

sorry for this issue 

your theme.css code doesn't work scss code so please just put your image cdn file if are not able to this please add me on staff so i will quick fix 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
thejollyboldbee
Tourist
7 0 6

Hey @KetanKumar,

first I would like to say thx.
Your offer to fix it is very nice. At the moment I am trying to do all I am able to do by myself.

Your yesterdays solution worked "half" 🙂

  • There's some code that prevents the pic from full covering ... missing at the bottom (pic 1)
    thejollyboldbee.com
  • And - in a second step (pic 2) - I would like to use a background image, that shows/starts underneath the titel;
    so I made a pic as png that have free space on top
    ... so I was playing around with positioning in may grafic programm
    ... think this is easier to set up, than doing it in code/css (I am beginner or something like that)
  • Why does the Theme has sometimes scss and some do not?
    I am new to SHOPIFY and think scss is the way to go
    ... just curious

pwpage_screenshot1.jpgpwpage_screenshot2.jpg

 

KetanKumar
Shopify Partner
36839 3635 11972

@thejollyboldbee 

thanks for update 

i can't see this spacing 

KetanKumar_0-1617948076804.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
thejollyboldbee
Tourist
7 0 6

@KetanKumar 

May be you would be so kind to check this for me again? And have some code to fix.

I am still working with an older montitor (not 16:9) and I am sure I am not the only one.
This status with the gap happens on all my installed browers Chrome, Firefox, Opera.

Thx a lot.
Sabine

KetanKumar
Shopify Partner
36839 3635 11972

@thejollyboldbee 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.password-page {height: 100vh;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
thejollyboldbee
Tourist
7 0 6

Thx a lot @KetanKumar  - this worked out fine.

Regarding your PM:
I'm a bit affected by it, because I am a person who's always grateful for any voluntary help. For me, a missing like-klick has nothing to do with being not grateful (as I showed thankfulness in every comment). I am happy to tell you that I've "rectified" this by now 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@thejollyboldbee 

thanks for update 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Amilie08
Tourist
9 0 1

@KetanKumar Mind to take a look at my password page? Thank you!

Screen Shot 2021-04-28 at 7.52.47 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@Amilie08 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Amilie08
Tourist
9 0 1

@KetanKumar Thank you so much for the quick reply! Here's the url: https://plentyofjoy.co/password

KetanKumar
Shopify Partner
36839 3635 11972

@Amilie08 

you have put wrong css code please check image path is not current please share code here or add me staff account

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Amilie08
Tourist
9 0 1

@KetanKumar Thank you! I sent out an invite! 

KetanKumar
Shopify Partner
36839 3635 11972

@Amilie08 

thanks bt i need theme access 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Amilie08
Tourist
9 0 1

@KetanKumar Sorry about that! You should be able to access it now! 

Jason
Shopify Expert
11190 225 2282

This thread has become quite large and has a mix of info for different themes. To avoid confusion, I'm closing it.

For those wanting help on this simple topic please make a new thread for a specific theme. Please remember you do not need to give someone Admin access for something like this. With enough info given on the theme used, and ideally a link to your site, that's enough to work with.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
ak2021
Visitor
1 0 0

Hi there, 

I have followed all the steps laid out in this discussion chain, but I am still not able to see my image as a background on the password page. Would you mind helping?

Thanks!

Casslarose
Tourist
4 0 2

I have tried many different ways of changing out the code but am still only getting a blank page. When I go to change the code in Asset I can also only see theme.css, I do not see theme.css.liquid. If anyone could help I would greatly appreciate that!

KetanKumar
Shopify Partner
36839 3635 11972

@Casslarose 

Welcome to the Shopify community!
and Thanks for your Good question.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Casslarose
Tourist
4 0 2
Casslarose
Tourist
4 0 2

@KetanKumar  thank you! It’s www.shopcoeurdoux.com

KetanKumar
Shopify Partner
36839 3635 11972

@Casslarose 

Thanks for it 

you have put the wrong css code can you please add me on staff account so i will easy to fix this issue.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
tigermothgoods
Tourist
3 0 3

Hi there! I am having the same issue! I do not see an scss anywhere and I have put in the correct code that you have listed. But my background image asset is named differently, however I do have it correctly typed into the field. Heres a screenshot. Thank you so so much! I've been trying on my own but am unsuccessful.  

 

@KetanKumar 

 

My web link is tigermothgoods.com

 

 

Screen Shot 2020-12-17 at 1.04.25 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@tigermothgoods 

Thanks for post 

can you please add me staff so i will quick fix

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
tigermothgoods
Tourist
3 0 3

I think I added you. But I’m not certain. If not I’ll try again a little later 

KetanKumar
Shopify Partner
36839 3635 11972

@tigermothgoods 

Thanks 

i have done this please check

KetanKumar_0-1608272950858.png

 

issue your theme.css liquid code doesn't work i have generated new scss file please check and let me know if you have any change 

KetanKumar_1-1608273019946.png

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
tigermothgoods
Tourist
3 0 3

Yes! Thank you so so much! And for showing me exactly what you did. Much appreciated!

KetanKumar
Shopify Partner
36839 3635 11972

@tigermothgoods 

Thanks for your feedback and support

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SundaySnooze
Tourist
5 0 1

@KetanKumar Hi there, I can see you've been a huge help to other users. I'm having the same issue with adding an image as my background, and wanted the announce my store tonight!

Any help would be greatly appreciated.

https://sundaysnooze.co.uk/password

I have made you a staff member to the store.

KetanKumar
Shopify Partner
36839 3635 11972

@SundaySnooze 

Thanks for it 

can you please add me on so i will update code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SundaySnooze
Tourist
5 0 1

Hi Ketan,

I have sent an invitation to your email address:

 Screenshot 2020-12-19 at 09.40.53.png

I have managed to add a background image to the password page, but when I switch to mobile view, it only selects the left hand-side of the image, rather than the whole of it.

Can you help please?

KetanKumar
Shopify Partner
36839 3635 11972

@SundaySnooze 

Thanks, i will update the code, please check. 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SundaySnooze
Tourist
5 0 1

Thank you SO much. You're a life saver. It looks amazing now!

markspong
Visitor
1 0 1

@KetanKumar 

I am having a similar issue where the code is not working. I am hoping to add a photo background to my password page. It is already uploaded to my assets folder. The code doesn't seem to be working though. I can only find theme.css though, so I'm not sure I've pasted the code in the correct places.

My weblink is sneakersandsodas.com and I'm using the debut theme as well. 

Any help you can give me would be greatly appreciated. Thank you!

KetanKumar
Shopify Partner
36839 3635 11972

@markspong 

Thanks for post 

just this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.password-header {background-color: transparent;}

 see view 

KetanKumar_0-1609221163420.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
eloiseuw
Tourist
9 0 8

Hi @KetanKumar,

I see you've been saving everyone's password pages. Any chance you could help me out too please? I've tried all of the fixes you mentioned in previous messages but nothing works.

Thanks so much!

KetanKumar
Shopify Partner
36839 3635 11972

@eloiseuw 

Welcome to the Shopify community!
and Thanks for your Good question.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
eloiseuw
Tourist
9 0 8

@KetanKumar 

Amazing! Thank you so much. Store url is www.unwear.co.uk.

KetanKumar
Shopify Partner
36839 3635 11972

@eloiseuw 

Thanks 

i can't see password background image code can you please add also i can see you logo fins

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
eloiseuw
Tourist
9 0 8

Apologies @KetanKumar, I was still tweaking the css! You should be able to see the code now under .password-page. The asset I would like to appear as a background image is 'password-background.jpg'.

Thank you!

KetanKumar
Shopify Partner
36839 3635 11972

@eloiseuw 

Thanks but your image is broke

https://cdn.shopify.com/s/files/1/0432/8914/9603/t/10/assets/%7B%7B%20'password-background.jpg'%20%7...

or add me staff so i will fix easy

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36839 3635 11972

@eloiseuw 

i have done this, please check.

KetanKumar_0-1610113434804.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
eloiseuw
Tourist
9 0 8

Wow! That is perfect. Thank you so so much @KetanKumar 🙂 Best of the best.

One very last quick question: if ever I wanted to change the image, could I do this easily by uploading a new background image as an asset?

Again, thanks a million.