Styling Your Shopify Password Page: A Community Guide to Centering Your Logo and Fixing Button Glitches

View original discussion by elijahr1989 on Shopify Community →

Hey there, fellow store owners! As a Shopify migration expert, I spend a lot of time digging through community forums, and let me tell you, some of the best insights come from real people tackling real-world problems. Today, I want to share a super helpful thread that popped up recently about customizing the Shopify password page. It’s a small detail, but getting your branding just right, even before your store officially launches, makes a huge difference. Think of it as your store's 'coming soon' sign – it should look professional and on-brand!

The discussion, originally titled "Password page design" by a store owner named elijahr1989, highlighted a couple of common frustrations: a left-aligned logo and a pesky cutoff button on a custom SMS form. Let's dive into how the community, particularly an incredibly helpful expert named Moeed, came to the rescue!

The Password Page Predicament

elijahr1989 was using the Reformation theme and wanted to achieve two things on their password page:

  • Center their store's logo, which was stubbornly sticking to the left.
  • Fix a subscribe button on a custom Postscripts SMS form that was getting cut off at the bottom of the page.

These are pretty standard requests for anyone looking to polish their pre-launch presence. A well-designed password page sets expectations and maintains brand consistency, even when your store isn't fully live.

The Community's Solution: A Little CSS Magic

The first step in solving this, as Moeed wisely pointed out, was to actually see the password page in action. If you're ever troubleshooting a password-protected page, remember to enable the password temporarily so others can help you out! Once that was done, Moeed provided a neat CSS snippet to tackle the logo centering and button padding.

Step-by-Step Instructions to Center Your Logo & Adjust Button Styling

Here's how you can implement this fix for your own Shopify store, drawing from Moeed's advice:

  1. Navigate to Your Theme Code:
    • From your Shopify admin, go to Online Store > Themes.
    • Find your current theme, click Actions > Edit code.
  2. Locate the Right File:
    • Moeed initially suggested finding the password.liquid file. However, as elijahr1989 discovered (a common scenario!), sometimes you'll only find a password.css file.
    • If you have password.liquid: Find this file and look for the tag. You'll add the CSS code just above it.
    • If you only have password.css: This is where you'll add the CSS directly, but without the
      • For password.liquid: Copy and paste the entire block, including the tags, right above the tag.
      • For password.css: Copy only the CSS rules themselves (everything between ). Make sure to remove the