Logo on Password page

Technical Q&A
1

Hi everyone, This is my first time using Shopify so I’m a bit of an amateur. I am writing this out of request to ask how I would be able to add my logo on the password page. I would like it to be in just above the centre in the middle. I have attached a reference photo for a website and I will attach anything that is needed such as my logo etc.

Thank you

for your help

Nathan

Screenshot 2026-05-22 07.57.19
Screenshot 2026-05-22 07.57.191907×936 14.4 KB

2

Hey @nathancondren

Did you first add the logo in “password” template from theme editor? If not, first do that and then also share your store URL so that I can have a look and provide you a code accordingly.

Best,
Moeed

3

In your Shopify admin go to Online Store > Themes > Customize, then click the page selector at the top and choose Password. You should see a Password header section on the left where you can upload your logo image directly. :slightly_smiling_face:

4

Hi Moeed,

I believe I have done that now. My store URL is as attached:

The password if needed is shopify. My logo is also attached if needd.

Thank you,

Nathan

CONDREN LOGO
CONDREN LOGO6000×6000 3.08 MB

5

Your logo is already in the center in the middle. Do you want to reduce it’s size?

image
image1895×911 258 KB

6

You can customize the password page from your Shopify admin > Sales channels > Online Store > click Edit theme > Password

Screenshot 2026-05-22 at 14.37.39
Screenshot 2026-05-22 at 14.37.391920×1227 197 KB

Best regards,

Dan from Ryviu: Reviews & Loyatly App

7

Hi sorry, for the delayed response, but yes could you reduce its sizeplease. I would lkke it similar size and same placement to the reference photo, but still showing the main concept of the design. This is so I can add a sign up email section below.

8

Hey @nathancondren

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find password.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.ai-centered-image-wrapper-aymgrwhf1ww1vyzhptaigenblock2f32056xccwpg {
    width: 15% !important;
}
.password-main {
    align-content: center !important;
}
</style>

RESULT:

image
image1915×915 58.3 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

9

this is great thank you

10

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

11

The size is perfect on the desktop photo. Is there any way to keep the same size on the desktop, but change the size on the mobile version to make it bigger?

12

Replace the previous code with this code below.

<style>
@media screen and (min-width: 768px) {
.ai-centered-image-wrapper-aymgrwhf1ww1vyzhptaigenblock2f32056xccwpg {
    width: 15% !important;
}
}
@media screen and (max-width: 767px) {
.ai-centered-image-wrapper-aymgrwhf1ww1vyzhptaigenblock2f32056xccwpg {
    width: 50% !important;
}
}
.password-main {
    align-content: center !important;
}
</style>

DESKTOP RESULT:

image
image1915×915 60.8 KB

MOBILE RESULT:

image
image346×748 48.5 KB

NOTE: Increase the 15% if you wanna increase the size of desktop and increase the 50% if you wanna increase the size on mobile.

Cheers,
Moeed