HOW TO CHANGE THE IMAGE ON THE PASSWORD PAGE

New Member
5 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
70 6 12

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

1 Like