All things Shopify and commerce
I'm trying to change the background on the password page of my Venture theme store.
I've already added the image in the assets section!
I cannot seem to figure out how to make the change show on the password page from the theme.csss.liquid folder, I've added this code in multiple places in that folder and still cant seem to make the change.
background-image: url({{ 'image.jpg' | asset_url }}); */
If anyone can help with specifc instructions that would be great!
Hi Vance,
Katy here from Shopify! Welcome to our Forum community and thanks for your query.
I'd love to help you out with this here. As it will need a little bit of editing to your theme's code, so I do suggest that you do this first in a duplicate version of your theme. Info on how to do so here, just in case.
Great job on already uploading the image to your assets folder! (For anyone else who may stumble upon this post, we have a guide to help with this here).
Once you have this done, you will then need to paste the following code at the bottom of your theme.scss.liquid. We add this at the bottom, as it reads in a cascading fashion. If you could scroll down to the very bottom of this sheet and add the following:
.password-page {
background-image: url({{ 'image.jpg' | asset_img_url: '2000x' }});
}
To make your image cover the entire container, you can also add this line of code beneath this rule also:
background-size: cover;
I'm not sure how you would like the image to display, but if you find that the width of the image is being constrained or you would like to set this as full screen for example, you would then need to remove the `page-width` class from the containing div.
To do this, if you could go to password.liquid under 'Layout' and search for this line. (It should be located somewhere around 40/41, depending on if you have made edits to this yet or not).
`<div class="password-page page-width text-center" role="main">`
You can then swap this for the following line instead:
`<div class="password-page text-center" role="main">`
I do hope this helps- do feel free to let me know how you get on, or if you have any questions.
There are also some handy resources on customizing your password page within our Shopify Blog here too.
Cheers,
Katy
Please note: This account is no longer regularly monitored.
- If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
- Thank you for your understanding. We hope you enjoy exploring the Community.
- To learn more visit the Shopify Help Center or the Shopify Blog.
thanks,
it's working for debut theme too 😉
For some reason this is not working for me. I'm using the Debutify theme and I've created a new asset where I uploaded my image and named it password-background-image.jpg and I pasted the code:
.password-page { background-image: url({{ 'image.jpg' | asset_img_url: '2000x' }}); }
at the bottom of the theme.scss.liquid and nothing happens. What am I doing wrong here guys?
You need to write:
.password-page { background-image: url({{ 'password-background-image.jpg' | asset_img_url: '2000x' }}); }
That did not work for me.
Me too. We are planning to launch next month . Hoping to get answers asap. #following
No luck.
Using the Narrative theme.
This is what I added to line 3506 of theme.scss.liquid file:
.password-page { background-image: url({{ 'B_dj_1-2_2opaque.jpg' | asset_img_url: '2000x' }}); background-size: cover; }
(B_dj_1-2_2opaque.jpg is the name of image file that was uploaded to assets folder.)
hello! I need to change the color of the text on my password page from WHTIE to BLACK! ASAP. I've been trying to figure this out, I even had someone apart of shopify staff say that they could help me and never answered for over a week
Hi thank you so much for your help! i was able to change the background image on the password screen page for everyone to see, but now the thing is the photo is not properly formatted. It is a bit too large, which causes 99% of the photo not shown. What should i do next?
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