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

@Johjoe 

 

you are wrong code URL

please this code

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

 

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
salomé
Visitor
2 0 2

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

KetanKumar
Shopify Partner
36839 3635 11972

@salomé 

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;}

 

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
salomé
Visitor
2 0 2

thank you so much 😄

KetanKumar
Shopify Partner
36839 3635 11972

@salomé 

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
thesaiyangod
New Member
4 0 0

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

 

Johjoe
Excursionist
34 2 16

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-passw...

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

thesaiyangod
New Member
4 0 0

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

thesaiyangod
New Member
4 0 0

Can you help me with this issue 

Grand_Pacific
Tourist
35 0 1

I am having the same issues but cannot get this working even with the codes.

Any ideas?

Johjoe
Excursionist
34 2 16

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

KetanKumar
Shopify Partner
36839 3635 11972

@Johjoe 

Thanks for update

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
Johjoe
Excursionist
34 2 16

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

Thanks !

KetanKumar
Shopify Partner
36839 3635 11972

@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?

 

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
Johjoe
Excursionist
34 2 16

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

KetanKumar
Shopify Partner
36839 3635 11972

@Johjoe 

Yes, sorry bot right now not able to store

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
Johjoe
Excursionist
34 2 16

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 !

JuneAngel
Visitor
2 0 0

Hello @KetanKumar 

I followed and put in the code in the theme.scss.liquid. And I uploaded the image file but still no image is appearing on my password page. I've attached screenshots below.

Store url is shopdreamcatchers.com.

Thanks in advance.

 

theme.scss.liquidtheme.scss.liquid

Screen Shot 2020-11-12 at 9.16.19 AM.png

JuneAngel
Visitor
2 0 0

No worries. Solved it. Thanks!

jamiepedreros
New Member
5 0 0

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

KetanKumar
Shopify Partner
36839 3635 11972

@jamiepedreros 

Thanks 

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

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
jamiepedreros
New Member
5 0 0

Demonsinparis.com

altancindy
Visitor
2 0 0

did any one figure this out? I switched themes to debut and no matter what I do I can't figure out how to add a new password background image.. 

MellyMinx
Tourist
3 0 2

hello @KetanKumar 

Wonder if you could help, i followed your links and managed to get my image into the background but it is soooo big! what code would i used to make it fit the page properly?

minthouse.myshopify.com

Thank you!

KetanKumar
Shopify Partner
36839 3635 11972

@MellyMinx 


Sorry for facing this issue, it's my pleasure to help us.

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

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;
}

 

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
MellyMinx
Tourist
3 0 2

thank you for your swift response but unfortunately doesn't appear to have made any difference!

this is how my code looks:

.password-page {
display: table;
height: 100%;
width: 100%;
color: $color-body-text;
background-color: $color-body;
background-size: cover;
background: url({{ '42A1775.jpg' | asset_url }});
}

body.template-password {
height: 100vh;
}

HoustonOutlaws
Visitor
2 0 1

I have the debut theme but do not have the theme.scss.liquid asset.

 

Can someone please assist me in fixing the background image of our website? shop.outlaws.gg

 

Thanks

kyleherzog
Tourist
5 0 8

 

@KetanKumar I'm having the same issue as so many others with the background of the Password Page for my website using the Debut Theme.  I've updated the code below but it just won't show up as the background image.  Any advice?

https://oldfashionedgolf.com

kyleherzog_0-1613184942378.png

 

MellyMinx
Tourist
3 0 2

@kyleherzog i finally managed to get mine to work by using the following, i hope it helps. i ended up just taking the file code of the image as its going to be changed daily for our site:

#shopify-section-password-content {
background: url(https://cdn.shopify.com/s/files/1/0050/0904/7586/files/stockholm-rug-rugs-SDR02-2.jpg?v=1557307074) no-repeat center center fixed;
background-size: cover;
padding-top: $gutter * 3;
color: white;

KetanKumar
Shopify Partner
36839 3635 11972

@kyleherzog 

Thanks for update 

can you please add me staff so i will 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
kyleherzog
Tourist
5 0 8

@KetanKumar THANK YOU!  I have added you to staff and our background image is stored in Assets.

KetanKumar
Shopify Partner
36839 3635 11972

@kyleherzog 

Great, Thanks 

for add me i have done this can you please just upload your black logo that's it 

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
kyleherzog
Tourist
5 0 8

DONE!  Added to Assets.

KetanKumar
Shopify Partner
36839 3635 11972

@kyleherzog 

Thanks for it 

do you have any 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
Shadavid
Tourist
5 0 2

@KetanKumar 

thanks for all the information. I have tried every step you provided and still cannot seem to get the background image to show on my password page. 

I’ve uploaded my background image to assets

I’ve  created a theme-style.scss.liquid file and added the code and still no background image. 

can you please take a look at xaramascents.com and let me know what I did wrong? 

KetanKumar
Shopify Partner
36839 3635 11972

@Shadavid 

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
Shadavid
Tourist
5 0 2
Thanks for reaching out!

My url is www.xaramascents.com

KetanKumar
Shopify Partner
36839 3635 11972

@Shadavid 

sorry i can't see  background image 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
Shadavid
Tourist
5 0 2

@KetanKumar 

This is what I have added 

Screen Shot 2021-02-17 at 5.06.58 PM.png

 

My image is added to the assets but it still doesn't show.

KetanKumar
Shopify Partner
36839 3635 11972

@Shadavid 

great

can you please add this theme.scss file on password pager before </head> close then 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
Shadavid
Tourist
5 0 2

@KetanKumar 

I have done so as seen below and it didn't work

Screen Shot 2021-02-17 at 6.27.42 PM.png

Can I provide you with access so that you can assist?

KetanKumar
Shopify Partner
36839 3635 11972

@Shadavid 

can you please add me on staff account 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
Shadavid
Tourist
5 0 2

I have added you. Please confirm receipt

KetanKumar
Shopify Partner
36839 3635 11972

@Shadavid 

thanks for it 

i have done this 

KetanKumar_0-1613644802633.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
Fatherr
New Member
10 0 0

Hey, can you please help me with mine? I want to make a gif the password page background. It's already added to the assets folder.

 

Website is: mwanela.com 

kyleherzog
Tourist
5 0 8

Hi Everyone - @KetanKumar did help me get the background page on my Password Page...and I wanted to share a summary of what I learned during the process.  If you need to get a background image added on your password page I'd recommend these steps:

  1. Access the code for your page (Online Store > Actions > Edit Code)
  2. Click 'Add new Asset' under 'Assets' on the left side and add the background image you want to use and name it: password-page-background.png
  3. Select 'theme.css' under 'Assets'
  4. Hit Ctrl + f and search for 'password-page'
  5. Add the following code as the first line:
    1. background: url(https://cdn.shopify.com/s/files/1/XXXX/5517/6347/t/1/assets/password-page-background.png?v=XXXXXXXXX...);
  6. Click on the 'passworkd-page-background.png' under Assets...right click and select 'Copy Image Address'
  7. Go back to the 'theme.css' code and replace the url link in parentheses in Step 5 with the Image Address you just copied
  8. DONE!!!
  9. NOTE: You may also want to vary this setting between 'white' and 'transparent' to see what works better:
    1. background-color: white;
  10. NOTE: If you then upload a new background image it will have a NEW URL so repeat steps 4 to 7 and it should then update

I hope this helps someone.  I struggled with this for a long time and wanted to share what I found.

Sarabf
Visitor
1 0 0

I have tried to do this for 2 days now and can not figure it out. Can anyone help me please?

HappyHost
Tourist
9 0 0

Hey! This was helpful and worked. I am just wondering, how do I get the photo smaller if I dont want it as the background but still want it on the password page?

SavorToday
Tourist
4 0 3

Hi @KetanKumar - I have tried to do this for my page savor.today for a while now and have followed instructions outlined. Could you please help to troubleshoot?