Hey team, just wondering if there was a way to change my background from white to an image like i see on other shops password page while using Dawn theme? Any help or guidance would be greatly appreciated. Thanks!
Topic summary
Users are seeking help to add custom background images to their password pages in Shopify’s Dawn theme (and similar themes like Sense).
Primary Solution:
- Add CSS code to the end of
base.cssortheme.cssfile - Upload desired image to the Assets folder
- Right-click the image in Assets, open in new tab, and copy the URL
- Paste the URL into the CSS
background-image: url()property
Common Issues Encountered:
- Background applying to all pages instead of just the password page
- Missing closing brackets
}in CSS causing code to break - Original template elements appearing over the new background
- Need to hide specific sections (like purple blocks) using additional CSS targeting specific section IDs
Current Status:
Multiple users successfully implemented the solution with guidance from @suyash1, who provided troubleshooting for CSS syntax errors and section-specific targeting. The thread remains active with new users requesting similar assistance. Some users report their themes are discontinued and need temporary password page solutions while planning site redesigns.
1 Like
@Nate3000 - using css it is possible, can you please share password page link? and have you chosen any image?
Sure, this is the website: https://threethousandclo.com/password
The image is the one currently on the website. Thanks!
@Nate3000 - please add this css to the very end of your base.css file and check, please change image URL to the one you like
.gradient {
background-image: url(https://cdn.shopify.com/s/files/1/0266/5257/3865/files/New_pw_page_375x.jpg?v=1640730413);
background-repeat: no-repeat;
background-size: 100%;
}
1 Like
Hi @suyash1
I’m wondering if you could please assist me in making this same change?
I have found the base.css file you mentioned, so am ready to paste the code in, however I’m not sure how to get the correct image url?
Details:
- Using ‘Dawn’ theme
- I’ve uploaded my image into the ‘assets’ folder
- my website url ‘honeywollow.store’
Thank you in advance
@HoneyWillow - one option is to
1- go to assets folder
2- open that image by clicking on it
3- right click on it and click open in new tab
4- you will have image URL in the tab, copy paste it in above code
Thank you @suyash1 that worked. However the original template image is still there over the top. And now the new image is appearing in the background of every other page on the website.
Is there a way to simply swap out the current template background image with a new now? without it impacting anything else on the site?
@HoneyWillow - good morning, is website URL correct as it is not loading on my end, yes actually to add image to this specific page we will need to edit the code, it will take 10-15 minutes , can you add me as collaborator? I will do it.
1 Like
Hi @suyash1
Could you please help. In Dawn and Sense themes I’ve had no success updating the password page at https://trustednamecbd.com/password
Added image to assets
Added css to the end of base.css in Assets as suggested
Much appreciated
@AZChris - i tried to check image but it is asking to login, also I believe after the css you added you have extra } , can you remove that and check?
1 Like
@suyash1 I removed it. Here is the end of my css
.product-grid .grid__item {
padding-bottom: var(–grid-mobile-vertical-spacing);
}
@media screen and (min-width: 750px) {
.product-grid .grid__item {
padding-bottom: var(–grid-desktop-vertical-spacing);
}
}
.gradient {
background-image: url(https://cdn.shopify.com/s/files/1/0628/5862/5281/t/2/assets/Plant-Grow-Seedling-Sunshine.jpg?v=1644982911);
background-repeat: no-repeat;
background-size: 100%;
}
@AZChris - please check this selected css line in screenshot, where its bracket } is completed? I think it is not completed, it should be completed before media query below it , and it can work
1 Like
Thank you @suyash1 ! That did it
How would I remove the purple block? Also am I able to move the “Coming soon” message down on the page?
Thanks again
@AZChris - I believe you will have this option to remove this block in customize settings where you need to check password page, else use this css
#shopify-section-template--15706254213377__main #Banner-template--15706254213377__main .banner__media{display: none; visibility: hidden;}
1 Like
@suyash1 Perfect!
Have a grateful day
1 Like
@AZChris - welcome, please accept solution and like the messages.
1 Like
Hello,
I was wondering if you could help in letting the background of the product photo be transparent in the home page just like how it is in the individual product page, please and thank you!
@JonathanTiki - can you please elaborate?
Yes, i followed the instructions but it applied the background to all the other pages as well. I need instruction for the background image to be only on the password page. Can you assist?
The first image is of the home page of my website where the product is shown but the image is not transparent even though it originally is.
Once you click and go to the specific product, the image of the product is transparent as intended to be.