Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
Can someone please tell me or teach me how to put a custom background image on the password page, specifically for the Debut Theme? I’ve been trying for 2 days and following all the recent posts and advice I’ve found on here but have not had any success
Solved! Go to the solution
This is an accepted solution.
open file theme.css
fine line number : 2653
.password-page {
display: table;
height: 100%;
width: 100%;
color: var(--color-body-text);
background-color: var(--color-body);
background-size: cover;
}
Replace by
.password-page {
display: table;
height: 100%;
width: 100%;
background-image: url('https://img.freepik.com/free-vector/stylish-hexagonal-line-pattern-background_1017-19742.jpg?size=626&ext=jpg');
background-size: cover;
}
thanks
If helpful, please Like and Accept Solution
if you Want to Modify / Customize your theme , Feel free to contact me
Email : vikash.hawkscode@gmail.com
Skype : vikas.hawkscode
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.
Hi @cxssxndrx,
Please follow these steps:
- Step 1: Go to Assets and upload background image. https://i.imgur.com/TL2L0UL.png
Ex: name image: background.png
- Step 2: Go to layout/password.liquid file and add code here: https://i.imgur.com/8vTgWox.png , https://i.imgur.com/nAT9rqD.png
Code:
<style>
.template-password{
background-image: url({{ 'background.png' | asset_url }});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
Hope it helps!
It didn’t work unfortunately/:
1. Go to your store click on Actions > Edit Code
2. Assets > theme.css add below lines at the bottom of the file.
.template-password .modal {
background-image: url(https://i.stack.imgur.com/wN3s7.png);
background-position: center;
background-repeat: no-repeat;
height: 1000px;
}
If helpful then please Like and Accept Solution.
Hi @cxssxndrx,
I checked and didn't find the code you added, you can add it at layout/password.liquid file?
Please add the code again, I will help you check it.
This is an accepted solution.
open file theme.css
fine line number : 2653
.password-page {
display: table;
height: 100%;
width: 100%;
color: var(--color-body-text);
background-color: var(--color-body);
background-size: cover;
}
Replace by
.password-page {
display: table;
height: 100%;
width: 100%;
background-image: url('https://img.freepik.com/free-vector/stylish-hexagonal-line-pattern-background_1017-19742.jpg?size=626&ext=jpg');
background-size: cover;
}
thanks
If helpful, please Like and Accept Solution
if you Want to Modify / Customize your theme , Feel free to contact me
Email : vikash.hawkscode@gmail.com
Skype : vikas.hawkscode
I applied it to the duplicate of my theme and it didn’t do anything. I’ll try again
sorry that facing issue again
i can't any code update at your theme how can i check or give image url so i will update
Thank you so much!!! It worked ❤️
Hi @cxssxndrx,
I checked and you added code with incorrect URL you just need to change it everything will work fine. https://i.imgur.com/bKMEqBw.png
Code change:
background-image: url(//cdn.shopify.com/s/files/1/0553/0465/0916/t/32/assets/aleksiethelabel_theme_2.png?v=1637063822&1051)
Hope it is clear to you.
@LitCommerce Hi, I already figured out. @hawkscode’s solution helped me. But thank you so much for trying to help!
User | RANK |
---|---|
117 | |
96 | |
73 | |
72 | |
46 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022