How can I add a background image to my password page?

Store Design
1

Hello, im trying to add a background image on my password page but the other sources i found did not work. my current theme is “simple” and when i go to > theme.scss.liquid, this is what shows up. Can someone help me create or add a code so i can add a background image on my password page? Thank you

/====== Password styles ======/
.icon-shopify-logo {
width: 1.5 * $font-size-base * 120 / 35;
height: 1.5 * $font-size-base;
vertical-align: middle;
fill: currentColor;
}

.icon-lock {
width: 16px;
height: 16px;
}

.password-signup,
.password-login {
max-width: 400px;

.input-group {
margin-bottom: $gutter / 2;
}
}

.password-login-toggle {
display: block;

.icon-lock {
position: relative;
top: -3px;
}
}

.password-opening-soon,
.password-message,
.password-signup,
.password-social-sharing,
.password-login {
margin: ( $gutter * 1.5 ) auto;

.section-heading {
margin-top: 0;
margin-bottom: $gutter / 2;
}
}

.password-signup {
.rte {
margin-bottom: ( $gutter / 6 * 5 );
}
}

.password-social-sharing {
.social-sharing {
margin-top: $gutter / 2;
}
}

.template-password {
height: 100vh;
text-align: center;

.password-page__wrapper {
display: table;
height: 100%;
width: 100%;

}

footer {
margin-bottom: $gutter / 3;
}
}

.password-header-section {
display: table-row;
}

.password-page__header {
display: table-cell;
padding-top: $gutter;
}

.password-page__main {
display: table-row;
width: 100%;
height: 100%;
margin: 0 auto;
}

.password-page__main__inner {
display: table-cell;
vertical-align: middle;
margin-top: $gutter;
padding: ( $gutter / 2 ) $gutter;
}

2 Likes
2

@Ajaye

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

@Ajaye

In order to change up that background image, you’ll just need to add your new image to the assets folder of your theme files and give it the same name as the old image. Here’s how to do that:

  • Navigate to Online Store>Themes and select “Edit HTML/CSS” from the Actions menu of your active theme.
  • Once in your theme editor, select the Assets folder from the left-hand menu.
  • Notice how there is an image in that folder called password-page-background.jpg. If you delete that image, and add your own image called password-page-background.jpg, the theme will pull your uploaded image instead of the deleted image. Make sure it gives it the exact same name!

Let me know if that does the trick!

4

Hi @Ajaye ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

5

Hello thank you for your reply, here is my store URL

https://ichigoprints.com/

6

Hello, thank you for replying, i checked on the “Assets” tab but i don’t
have a folder called folder called password-page-background.jpg. This is
the only ones i have, please see attached.

7

Hello Thank you for replying. Here is my URL

https://ichigoprints.com/

8

@dmwwebartisan Hello, thank you for replying, i checked on the “Assets” tab but i don’t
have a folder called folder called password-page-background.jpg. This is
the only ones i have, please see attached.

9

@KetanKumar

Hello, Thank you for replying, here is my website URL

https://ichigoprints.com/

10

@AvadaCommerce

Hello, Thank you for replying, here is my website URL

https://ichigoprints.com/