Venture Theme Password Page Background

vance
Visitor
1 0 0

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! 

Replies 9 (9)

Katy
Shopify Staff
779 43 178

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

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

B_R-25
Shopify Partner
65 1 6

thanks,

it's working for debut theme too 😉

Tddandridge
Tourist
3 0 2

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?

Veela
Visitor
2 0 0

You need to write:

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

 

RuthN
Visitor
1 0 0

That did not work for me.

cozkitchenware
Visitor
1 0 1

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

kailasachse
Shopify Partner
85 0 32

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

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
queenbeesko
New Member
4 0 0

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

khoneycutt
Tourist
11 0 1

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?