Custom password page background image for Debut Theme

Store Design
1

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

2

@cxssxndrx

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

aleksiethelabel.com

4

Hi @cxssxndrx ,

Please follow these steps:

Hope it helps!

5

It didn’t work unfortunately/:

6

@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.

7

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.

8

@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
Screenshot 2021-11-16 at 19.41.45.png1440×610 400 KB

thanks

9

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

10

@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

11

Thank you so much!!! It worked :heart:

12

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.

13

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