Custom password page background image for Debut Theme

Solved
cxssxndrx
Tourist
6 0 4

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 

Accepted Solution (1)
hawkscode
Shopify Partner
177 14 12

This is an accepted solution.

@cxssxndrx  

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

 

 

Screenshot 2021-11-16 at 19.41.45.png

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


www.hawkscode.com

View solution in original post

Replies 12 (12)
KetanKumar
Shopify Partner
36588 3628 11811

@cxssxndrx 

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
cxssxndrx
Tourist
6 0 4

aleksiethelabel.com

LitCommerce
Astronaut
2860 684 679

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
cxssxndrx
Tourist
6 0 4

It didn’t work unfortunately/:

Savior
Shopify Partner
537 108 156

@cxssxndrx 

 

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.

If helpful, please Like and Accept Solution.


Hire me or mail me  | Shopify Design Changes | Custom Modifications In to Shopify Theme | Site Speed Optimization
Use GemPages Page Builder to build, design, and optimize your store. View app

LitCommerce
Astronaut
2860 684 679

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
cxssxndrx
Tourist
6 0 4

I applied it to the duplicate of my theme and it didn’t do anything. I’ll try again 

KetanKumar
Shopify Partner
36588 3628 11811

@cxssxndrx 

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

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
hawkscode
Shopify Partner
177 14 12

This is an accepted solution.

@cxssxndrx  

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

 

 

Screenshot 2021-11-16 at 19.41.45.png

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


www.hawkscode.com

cxssxndrx
Tourist
6 0 4

Thank you so much!!! It worked ❤️

LitCommerce
Astronaut
2860 684 679

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 - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
cxssxndrx
Tourist
6 0 4

@LitCommerce Hi, I already figured out. @hawkscode’s solution helped me. But thank you so much for trying to help!