Venture Theme Password Page Background

Highlighted
New Member
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! 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
754 42 151

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

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Shopify Partner
64 1 3

thanks,

it's working for debut theme too ;)

Highlighted
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?

0 Likes
Highlighted
New Member
2 0 0

You need to write:

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

 

0 Likes
Highlighted
New Member
1 0 0

That did not work for me.

0 Likes
Highlighted

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.
0 Likes
Highlighted
New Member
1 0 1

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

Highlighted
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

0 Likes