How can I change the background on the Venture theme password page?

Shopify Discussion
1

I’m trying to change the background on the password page of my Venture theme store.

I’ve already added the image in the assets section!

I cannot seem to figure out how to make the change show on the password page from the theme.csss.liquid folder, I’ve added this code in multiple places in that folder and still cant seem to make the change.

background-image: url({{ ‘image.jpg’ | asset_url }}); */

If anyone can help with specifc instructions that would be great!

2

Hi Vance,

Katy here from Shopify! Welcome to our Forum community and thanks for your query.

I’d love to help you out with this here. As it will need a little bit of editing to your theme’s code, so I do suggest that you do this first in a duplicate version of your theme. Info on how to do so here, just in case.

Great job on already uploading the image to your assets folder! (For anyone else who may stumble upon this post, we have a guide to help with this here).

Once you have this done, you will then need to paste the following code at the bottom of your theme.scss.liquid. We add this at the bottom, as it reads in a cascading fashion. If you could scroll down to the very bottom of this sheet and add the following:

.password-page {
  background-image: url({{ 'image.jpg' | asset_img_url: '2000x' }});
}

To make your image cover the entire container, you can also add this line of code beneath this rule also:

background-size: cover;  

I’m not sure how you would like the image to display, but if you find that the width of the image is being constrained or you would like to set this as full screen for example, you would then need to remove the page-width class from the containing div.

To do this, if you could go to password.liquid under ‘Layout’ and search for this line. (It should be located somewhere around 40/41, depending on if you have made edits to this yet or not).

`<div class="password-page page-width text-center" role="main">`

You can then swap this for the following line instead:

`<div class="password-page text-center" role="main">`

I do hope this helps- do feel free to let me know how you get on, or if you have any questions.
There are also some handy resources on customizing your password page within our Shopify Blog here too.

Cheers,

Katy

3 Likes
3

thanks,

it’s working for debut theme too :wink:

1 Like
4

For some reason this is not working for me. I’m using the Debutify theme and I’ve created a new asset where I uploaded my image and named it password-background-image.jpg and I pasted the code:

.password-page {  background-image: url({{ 'image.jpg' | asset_img_url: '2000x' }});
}

at the bottom of the theme.scss.liquid and nothing happens. What am I doing wrong here guys?

5

You need to write:

.password-page {  background-image: url({{ 'password-background-image.jpg' | asset_img_url: '2000x' }});
}
6

That did not work for me.

7

No luck.

Using the Narrative theme.

This is what I added to line 3506 of theme.scss.liquid file:

.password-page {
  background-image: url({{ 'B_dj_1-2_2opaque.jpg' | asset_img_url: '2000x' }});
  background-size: cover;  
}

(B_dj_1-2_2opaque.jpg is the name of image file that was uploaded to assets folder.)

8

Me too. We are planning to launch next month . Hoping to get answers asap. #following

1 Like
9

hello! I need to change the color of the text on my password page from WHTIE to BLACK! ASAP. I’ve been trying to figure this out, I even had someone apart of shopify staff say that they could help me and never answered for over a week

10

Hi thank you so much for your help! i was able to change the background image on the password screen page for everyone to see, but now the thing is the photo is not properly formatted. It is a bit too large, which causes 99% of the photo not shown. What should i do next?