HOW TO CHANGE THE IMAGE ON THE PASSWORD PAGE

Highlighted
New Member
7 0 0

Hello,

Is there any way to change the background image on the password page? Im using Pop theme

Thank you :)

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
320 38 68

Hey, @emilianogr15!

 

My name is Lilith, I'm on the Social Care team at Shopify.

 

There is definitely a way to do this! I've got some step-by-step instructions below to help guide you. Remember that you also can hire a Shopify Expert at any time to get some help with customizing your theme as well if you're not feeling too comfortable with working in HTML/CSS or Liquid.

 

Warning: Making changes to the following CSS sections isn't reversible and is not covered in support if a mistake is made. Please make a duplicate copy of your theme before making these changes.

 


Step 1: Open the theme code

 

The first thing you'll want to do is open the code to your Pop theme.

 

Head over to Online Store > Themes and click on Actions > Edit Code.

 

 

alt

 

 

Step 2: Upload the new image

 

Open the Assets folder and select Add a new asset. Then upload your image by clicking on Choose File.

 

 

alt

 

 

Once you've uploaded that file, it will show up in the Assets list with the file name it had when you selected it from your files list.

 

Step 3: Find code for background

 

Go back to the Assets folder and select timber.scss.liquid.

 

 

alt

 

 

Use the search function on your computer and paste the snippet below into the search field. On a Mac, you'll press ⌘ + F; on a PC, you'll press Ctrl + F.

 

$passwordBgImage:

 

This should show up approximately around Line 300. This might be different on your side, but this might help point you in the right location.

 

The entire snippet might look like this:

 

$passwordBgImage: '{{ "password-page-background.jpg" | asset_url }}';

 

 

alt

 

 

Step 4: Change code for password page background

 

Go back to your Assets list and copy the new uploaded image file name and paste it in place of the previous image name in the code.

 

 

alt

 

 

Your new code should be similar to this:

 

$passwordBgImage: '{{ "this-is-your-new-image-file.jpg" | asset_url }}';

 

Once you've got that done, you can click Save and refresh any of the pages you have open with the theme.

 

Results

 

Here is what my changes look like after I made the background change to my test theme.

 

Before:

 

31-00-ry6eh-l4e7u

 

 

After:

 

alt

 


Let me know if that helped! I'm happy to answer any questions you think of as you work on your business.

Lilith | 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

3 Likes
Highlighted
New Member
1 0 2

Hi there,

 

This was helpful for that Pop theme, I am currently trying to do the same on Narrative theme. Could you help with that too? I can't seem to find passwordbgimage tag on this theme.

 

Thank you so much.

2 Likes
Highlighted
New Member
2 0 0

Hello,

 

Would you be able to share similar instructions on how to change the background of the password page in the "Narrative" theme?

 

Thanks

0 Likes
Highlighted
Shopify Staff
Shopify Staff
320 38 68

@Zarkus123  @gabriellakorocz  Thanks for the follow-up question. 

 

Because Narrative doesn't have a background image it wouldn't have a background image tag. It's also built differently than Pop. This would be a bit beyond the scope of what I can help with since this will require to add some new code instead of just a replacement.

 

That said, you can post a fresh new topic on our Community Forums asking our community how to change this.

 

Alternatively, if you have enough design-time left on your account you can request our team to help you add that background image to your password page by contacting us directly. As long as you haven't made changes to your password page code, they might be able to help you get that done.

 

The other option you can try is to reach out to our Shopify Experts. You can find a suitable Shopify Partner in the Experts Marketplace or request a quote by following this guide here.

Lilith | 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

2 Likes
Highlighted
New Member
2 0 0

Im struggling to use a full size image for my password page if you could help that would be very helpful :)

Theme: brooklyn

0 Likes
Highlighted
Shopify Staff
Shopify Staff
320 38 68

Hi, @iseiha! Basically, with Brooklyn it'll be a very similar method as the one I described for the Pop theme.

 

You'll have one major difference at Step 3 and part of Step 4.

 

This time for Step 3 you'll be looking for a code that looks like this:

 

  @if $passwordPageUseBgImage {
    background-image: url({{ "password-page-background.jpg" | asset_url }});

 

There, you'll replace whatever is inside the quotation marks to the image you upload to the assets. Following the rest of the steps in the solution I added for the Pop theme above.

 

Remember to have a high quality image so that when it expands to full size on the screen it won't be pixelated.

 

Give that a go.

 

If you're not too comfortable with coding I definitely recommend hiring one of our partners to help you with this. You can find a suitable Shopify Partner in the Experts Marketplace or request a quote by following this guide here.

Lilith | 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

0 Likes
Highlighted
Excursionist
21 0 3

Hey! Could you assist me on the Blockshop theme? Im having the same issue of not succeeding in changing the background image. Ive uploaded the photo I want to use but no luck on it actually changing. Not sure if im inputting something wrong.

 

Thanks!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
320 38 68

Hi, @KK42. Blockshop seems to be a third-party built premium theme in our theme store. This isn't an a theme that I can help support. That said, you can reach out to their development or support team to see if they might be able to help you out. You can find their support details in your theme settings or in the theme store page.

If they aren't able to support that request, I highly recommend hiring one of our partners to help you with this. You can find a suitable Shopify Partner in the Experts Marketplace or request a quote by following this guide here.

Lilith | 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

0 Likes