Password Page Template

The password page is displayed when your store is password-protected. It shows a password entry form that customers must use to access your store before it's officially launched or when you want to restrict access.

Overview

The password page is a special landing page that appears when password protection is enabled on your store. It displays a password form, your store logo, and an optional message. Customers must enter the correct password to access your store. This page uses a special password layout (not the standard theme layout).

Where to Use

The password page template (password.json) is automatically used when password protection is enabled on your store. It appears for all visitors until they enter the correct password.

Enabling password protection:

  1. Go to Online Store → Preferences in Shopify admin
  2. Scroll to Password protection
  3. Enable Restrict access to visitors with the password
  4. Set a password
  5. Add an optional message
  6. Save

Access the page:

  • Automatically shown to all visitors when password protection is enabled
  • Visitors see this page instead of your store
  • After entering correct password, visitors can access your store

Settings

Padding

Top Padding

  • What it does: Space above the password form
  • Range: 0-100px
  • Default: 60px
  • Tip: More padding creates more breathing room and centered appearance

Bottom Padding

  • What it does: Space below the password form
  • Range: 0-100px
  • Default: 60px
  • Tip: Adjust to balance spacing and centered appearance

Color Scheme

Color Scheme

  • What it does: Selects a color scheme for the password page
  • Controls background color, text colors, form colors, and button colors
  • Individual color settings override color scheme
  • Tip: Choose a scheme that matches your brand

Background

Section Background Color

  • What it does: Background color for the password page
  • Overrides color scheme background if set
  • Leave empty to use color scheme
  • Default: Light gray (#f8fafc)
  • Tip: Use a color that complements your brand

Section Text Color

  • What it does: Text color for the password page
  • Overrides color scheme text if set
  • Leave empty to use color scheme
  • Default: Black (#000000)
  • Tip: Ensure good contrast with background

Background Image

  • What it does: Optional background image for the password page
  • Displays behind the password form
  • Creates visual interest
  • Tip:
    • Use high-quality images
    • Images should not distract from form
    • Consider brand imagery or product photos

Background Overlay Opacity

  • What it does: Dark overlay opacity when using background image
  • Range: 0-80%
  • Default: 30%
  • Tip:
    • 0-20%: Subtle overlay, image visible
    • 30-50%: Balanced, good default (recommended)
    • 60-80%: Dark overlay, more contrast
    • Helps ensure text is readable over images

Form Styling

Form Max Width

  • What it does: Maximum width of the password form
  • Range: 400-600px
  • Step: 20px
  • Default: 480px
  • Tip:
    • 400px: Narrow form, compact
    • 480px: Standard, good default (recommended)
    • 520-600px: Wider form, more space

Form Background Color

  • What it does: Background color of the password form card
  • Overrides color scheme surface if set
  • Leave empty to use color scheme
  • Default: White (#ffffff)
  • Tip: Usually white or light color for contrast

Form Border Radius

  • What it does: Corner rounding on the password form card
  • Range: 8-32px
  • Step: 2px
  • Default: 24px
  • Tip:
    • 8-12px: Subtle rounding
    • 16-24px: Moderate rounding (recommended)
    • 28-32px: Very rounded, soft appearance

Form Padding

  • What it does: Internal padding inside the password form
  • Range: 24-80px
  • Step: 4px
  • Default: 48px
  • Tip:
    • 24-32px: Compact, minimal padding
    • 40-48px: Standard, good default (recommended)
    • 56-80px: Spacious, more breathing room

Input Styling

Input Background Color

  • What it does: Background color of the password input field
  • Overrides color scheme elevated background if set
  • Leave empty to use color scheme
  • Default: Light gray (#f8fafc)
  • Tip: Usually light color for contrast

Input Border Color

  • What it does: Border color of the password input field
  • Overrides color scheme border if set
  • Leave empty to use color scheme
  • Default: Light gray (#e2e8f0)
  • Tip: Subtle border for definition

Input Focus Border Color

  • What it does: Border color when input is focused (clicked)
  • Overrides color scheme accent if set
  • Leave empty to use color scheme
  • Default: Blue (#3b82f6)
  • Tip:
    • Use brand accent color
    • Should be visible and distinct
    • Indicates active input

Input Border Radius

  • What it does: Corner rounding on the password input field
  • Range: 4-20px
  • Step: 2px
  • Default: 12px
  • Tip:
    • 4-8px: Subtle rounding
    • 10-12px: Moderate rounding (recommended)
    • 16-20px: Very rounded

Button Styling

Button Background Color

  • What it does: Background color of the "Enter" button
  • Overrides color scheme primary if set
  • Leave empty to use color scheme
  • Default: Blue (#3b82f6)
  • Tip:
    • Use brand primary color
    • Should be prominent and visible
    • High contrast with text

Button Text Color

  • What it does: Text color of the "Enter" button
  • Overrides color scheme on_primary if set
  • Leave empty to use color scheme
  • Default: White (#ffffff)
  • Tip:
    • Usually white or light color
    • Must contrast with button background
    • Ensures readability

Button Border Radius

  • What it does: Corner rounding on the "Enter" button
  • Range: 4-20px
  • Step: 2px
  • Default: 12px
  • Tip:
    • 4-8px: Subtle rounding
    • 10-12px: Moderate rounding (recommended)
    • 16-20px: Very rounded

How It Works

Page Structure

The password page displays:

  1. Background: Section background (color or image with overlay)
  2. Password Form Card: Centered form with:
    • Logo: Store logo or shop name
    • Heading: "Enter store using password"
    • Message: Optional shop message
    • Password Input: Password entry field
    • Enter Button: Submit button
    • Error Messages: Display if password is incorrect

Password Form

The form includes:

  • Password Input: Secure password field
  • Enter Button: Submit button with loading state
  • Error Handling: Shows errors for incorrect passwords
  • Auto-focus: Input automatically focused when page loads
  • Validation: Requires password before submission

Password Protection

How it works:

  1. Store owner enables password protection in Shopify admin
  2. Sets a password for the store
  3. All visitors see password page
  4. Visitors enter password
  5. If correct, visitor gains access to store
  6. Password is stored in browser (cookie)
  7. Visitor can access store until cookie expires

Store Message

Optional message:

  • Set in Shopify admin → Preferences → Password protection
  • Displays below the heading
  • Can include store information, launch date, etc.
  • Helps communicate with visitors

Common Use Cases

Store Launch (Coming Soon)

  • Background: Brand image or product photo
  • Message: "We're launching soon! Enter password for early access"
  • Styling: Brand colors, professional appearance
  • Use Case: Store not yet launched, preview for select visitors

Store Maintenance

  • Background: Simple color background
  • Message: "Store temporarily unavailable. Enter password for access"
  • Styling: Simple, clean design
  • Use Case: Store under maintenance, access for staff

Private Store

  • Background: Brand imagery
  • Message: "Private store. Password required"
  • Styling: Professional, secure appearance
  • Use Case: B2B store, exclusive access

Testing/Development

  • Background: Simple background
  • Message: "Store in development. Password required"
  • Styling: Simple, functional
  • Use Case: Store being developed, testing access

Tips & Best Practices

✅ Do's

  • Use clear messaging: Help visitors understand why password is needed
  • Match brand colors: Use your brand colors for consistency
  • Add background image: Makes page more visually appealing
  • Test password entry: Ensure form works correctly
  • Use appropriate overlay: Ensure text is readable over images
  • Keep form centered: Professional, balanced appearance
  • Test on mobile: Ensure mobile experience is good
  • Use brand logo: Display your store logo

❌ Don'ts

  • Don't use low contrast: Ensure text is readable
  • Don't skip background image: Visual interest is important
  • Don't forget mobile: Test on phones and tablets
  • Don't use confusing messages: Be clear about why password is needed
  • Don't forget to test: Test password entry before launch
  • Don't use too dark overlay: May hide background image too much
  • Don't skip error handling: Show clear error messages
  • Don't forget logo: Brand your password page

Form Width Guide

400px (Narrow)

When to Use:

  • ✅ Compact design
  • ✅ Minimal appearance
  • ✅ Mobile-first

Benefits:

  • Compact form
  • Minimal design
  • Works well on mobile

480px (Recommended)

When to Use:

  • ✅ Most stores
  • ✅ Standard appearance
  • ✅ Balanced layout

Benefits:

  • Standard width
  • Good default
  • Works for most stores

520-600px (Wide)

When to Use:

  • ✅ More content in form
  • ✅ Wider layout
  • ✅ More space needed

Benefits:

  • More space
  • Wider appearance
  • Better for longer messages

Background Image Best Practices

Image Selection

  • Brand imagery: Use brand photos or product images
  • High quality: Use high-resolution images
  • Relevant: Images should relate to your store
  • Not distracting: Shouldn't distract from form

Overlay Opacity

  • 0-20%: Image very visible, may need light text
  • 30-50%: Balanced, good default (recommended)
  • 60-80%: Dark overlay, high contrast, image less visible

Image Sizing

  • Recommended: 1920px width or larger
  • Aspect ratio: 16:9 or similar wide format
  • File size: Optimize for fast loading
  • Format: JPG or WebP for photos

Examples

Example 1: Coming Soon Store

Settings:

  • Background: Brand image
  • Overlay Opacity: 40%
  • Form Max Width: 480px
  • Form Border Radius: 24px
  • Button Color: Brand primary
  • Message: "We're launching soon! Enter password for early access"

Result: Professional coming soon page with brand imagery

Example 2: Simple Password Page

Settings:

  • Background: Light gray color
  • No background image
  • Form Max Width: 480px
  • Form Border Radius: 16px
  • Button Color: Blue
  • Message: "Password required"

Result: Simple, clean password page

Example 3: Branded Password Page

Settings:

  • Background: Product photo
  • Overlay Opacity: 50%
  • Form Max Width: 520px
  • Form Border Radius: 28px
  • Button Color: Brand accent
  • Message: Custom brand message

Result: Branded password page with product imagery

Troubleshooting

Password Not Working

  • Check: Verify password is set correctly in Shopify admin
  • Check: Ensure password protection is enabled
  • Check: Test password entry
  • Check: Clear browser cookies and try again

Form Not Displaying

  • Check: Verify password section is added to template
  • Check: Ensure password template is assigned
  • Check: Check section settings
  • Check: Verify template file exists

Background Image Not Showing

  • Check: Verify background image is uploaded
  • Check: Ensure image is published
  • Check: Test with different images
  • Check: Verify image file is not corrupted

Text Not Readable

  • Check: Ensure good contrast between text and background
  • Check: Adjust overlay opacity
  • Check: Try different text colors
  • Check: Test on different devices

Form Not Centered

  • Check: Verify form max width is set
  • Check: Check CSS for centering
  • Check: Test on different screen sizes
  • Check: Verify layout is correct

Logo Not Showing

  • Check: Verify logo is set in theme settings
  • Check: Logo should appear automatically
  • Check: Check header-logo snippet
  • Check: Logo displays from theme settings

Enabling Password Protection

Setting Up Password Protection

  1. Go to Online Store → Preferences in Shopify admin
  2. Scroll to Password protection section
  3. Enable Restrict access to visitors with the password
  4. Enter a password
  5. Add optional message (e.g., "We're launching soon!")
  6. Click Save

Password Requirements

  • Length: No minimum length required
  • Complexity: Can be simple or complex
  • Sharing: Share password with authorized visitors
  • Security: Password is stored securely by Shopify

Store Message

What to include:

  • Why password is needed
  • When store will launch
  • Contact information
  • Any relevant information

Examples:

  • "We're launching soon! Enter password for early access"
  • "Store under maintenance. Password required for access"
  • "Private store. Password required"

Related Templates

  • Home Page - Store homepage (after password entry)
  • Product Page - Product pages (after password entry)
  • All store pages - Accessible after password entry

Related Sections

  • Password Section - Password form display (this section)
  • Header Logo - Logo display on password page

Next Steps:

  • Learn about Home Page Template (after password entry)
  • Enable password protection in Shopify admin
  • Customize your password page styling
  • Add background image and message
  • Test password entry functionality
  • Share password with authorized visitors