Shopify themes, liquid, logos, and UX
Hello,
I saw many posts about this subject, but solutions don't work for me.
/*================ 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 !
you are wrong code URL
please this code
background: url({{ 'background-coming-soon-page.png' | asset_url }}) no-repeat;
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
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;}
thank you so much 😄
Thanks for update.
where do I post that code ? My photo is out stretched on the page .
Are you using debut theme ?
If so, the answer si here :
If the size of your background is still weird, try to change 100vh by another number.
in mobile view the background photo is overly large and not fitting in the screen
Can you help me with this issue
I am having the same issues but cannot get this working even with the codes.
Any ideas?
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 ?
Thanks for update
Please share your site URL,
So I will check and provide a solution here.
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?
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 :
Thank you in advance !
Johanna
Yes, sorry bot right now not able to store
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 !
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.
No worries. Solved it. Thanks!
@KetanKumar Hi I’m having the same problem with the code in the debut theme password screen could you do it for me please ?
Thanks
can you please share store ulr so i will check and let you know.
Demonsinparis.com
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..
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!
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;
}
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;
}
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
@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?
@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;
Thanks for update
can you please add me staff so i will fix
@KetanKumar THANK YOU! I have added you to staff and our background image is stored in Assets.
Great, Thanks
for add me i have done this can you please just upload your black logo that's it
DONE! Added to Assets.
Thanks for it
do you have any issue
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?
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.
sorry i can't see background image code
great
can you please add this theme.scss file on password pager before </head> close then check
I have done so as seen below and it didn't work
Can I provide you with access so that you can assist?
can you please add me on staff account so i will quick fix
I have added you. Please confirm receipt
thanks for it
i have done this
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
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:
I hope this helps someone. I struggled with this for a long time and wanted to share what I found.
I have tried to do this for 2 days now and can not figure it out. Can anyone help me please?
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?
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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024