Skip to main content
The Main Password Header section displays the header and logo area on password-protected storefront pages when your store is locked behind a password. This section maintains brand identity even before launch by prominently displaying your store logo with customizable sizing for desktop and mobile. Use this section on password pages to create a professional first impression for invited customers, partners, or testers accessing your pre-launch store.

​
What this section controls

This section controls password page headers with the following capabilities:
  • Logo display on password-protected pages
  • Dual logo support (image file or SVG code)
  • Separate desktop and mobile logo width controls
  • Logo width range (50px to 300px)
  • Template-only section (password pages)
  • Brand identity maintenance during pre-launch
  • High-resolution and vector logo support

​
Template Settings

​
Logo Settings

Upload store logo image.
  • Type: Image picker
  • Format: PNG (transparent background recommended), JPG, or SVG
  • Recommended Size: 400x400px minimum
  • Aspect Ratio: Square or horizontal
Use PNG with transparent background for logos that sit on colored backgrounds. Ensure logo is high-resolution for retina displays.
Alternative: Use SVG code instead of image file.
  • Type: HTML/SVG code
  • Optional: Leave blank to use logo image instead
  • Takes Priority: If filled, overrides logo image
When to Use SVG:
  • Perfect scaling at any size
  • Smaller file size
  • Crisp on all displays
  • Can be styled with CSS
  • Supports animations
Example SVG:
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#000" />
</svg>
Paste full SVG code including <svg> tags. SVG must be self-contained (no external references).
Control logo size on desktop.
  • Range: 100px - 200px
  • Step: 2px
  • Unit: Pixels
  • Default: 120px
Size Guidelines:
  • 100-120px: Subtle, minimalist branding
  • 120-150px: Standard logo size (recommended)
  • 150-200px: Bold, prominent branding
Control logo size on mobile devices.
  • Range: 60px - 160px
  • Step: 2px
  • Unit: Pixels
  • Default: 80px
Mobile Sizing:
  • 60-80px: Compact mobile logo
  • 80-100px: Standard mobile size (recommended)
  • 100-160px: Large mobile logo
Mobile logo should be smaller than desktop (default: 80px mobile vs 120px desktop) to conserve screen space.

​
Layout Settings

  • Page (default) - Contained within page margins
  • Fluid - Extends to container edges
  • Full - Full browser width (edge-to-edge)
  • Select from available theme color schemes
  • Default: scheme-1
  • Affects background and text colors
  • Top Spacing: 0, 1, 2 (default), 4, or 6
  • Bottom Spacing: 0, 1, 2 (default), 4, or 6
  • None (default)
  • Top Border
  • Bottom Border
  • Both Borders

​
Logo Best Practices

Format Comparison:PNG (Recommended):
  • Supports transparency
  • Good for most logos
  • High quality
  • File size: 20-100KB
  • Use for colored backgrounds
SVG (Best for scalability):
  • Perfect scaling
  • Smallest file size
  • Crisp at any resolution
  • Requires code knowledge
  • Best for simple logos
JPG (Not recommended):
  • No transparency
  • Can look pixelated when scaled
  • Only use if logo has photographic elements
Desktop vs Mobile Balance:Typical Setups:
  • Subtle: 100px desktop, 60px mobile
  • Standard: 120px desktop, 80px mobile (default)
  • Prominent: 160px desktop, 100px mobile
  • Bold: 200px desktop, 120px mobile
Sizing Tips:
  • Keep mobile size 60-70% of desktop size
  • Test on actual devices (varies by screen)
  • Consider logo shape (horizontal logos can be wider)
  • Ensure readability at all sizes
  • Leave breathing room (don’t max out)
Effective Password Page Logos:
  • Simple, recognizable mark
  • High contrast for visibility
  • Works on light and dark backgrounds
  • Scalable (readable at small sizes)
  • Brand-appropriate style
  • Minimal detail (clutter-free)
Logo Variations:
  • Full logo: Name + icon
  • Icon only: Logo mark without text (for small sizes)
  • Wordmark: Text-only logo
  • Monogram: Initials or abbreviated logo
If your full logo has small text, consider using icon-only version for password page to ensure legibility.
Logo + Background Harmony:
  • Match color scheme to background image/color
  • Ensure logo stands out (sufficient contrast)
  • Test logo on actual background color
  • Consider drop shadow for logos on photos
  • White logos on dark backgrounds (or vice versa)
Password page background is often set in the main-password section or theme settings, not in this header section.

​
SVG Logos

How to Get SVG Code:
  1. Export logo as SVG from design software (Illustrator, Figma, etc.)
  2. Open SVG file in text editor
  3. Copy all code (from <svg> to </svg>)
  4. Paste into “Logo SVG Code” field
SVG Code Example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80">
  <text x="10" y="50" font-family="Arial" font-size="40" fill="#000">
    My Store
  </text>
</svg>
Why Use SVG:
  • Infinitely scalable (no pixelation)
  • Tiny file size (faster loading)
  • Perfect on retina displays
  • Can change colors via CSS
  • Supports animation
  • Accessible (screen readers)
When to Avoid SVG:
  • Complex logos with many colors/gradients
  • Logos with photographic elements
  • No access to SVG source file
  • Don’t understand code
Common SVG Issues:SVG Not Displaying:
  • Check for complete <svg> opening/closing tags
  • Verify viewBox attribute exists
  • Remove any invalid characters
  • Ensure no external file references
SVG Too Large/Small:
  • Adjust logo width settings (not SVG code)
  • Check viewBox dimensions
  • Don’t set fixed width/height in SVG code
SVG Wrong Color:
  • Set fill/stroke colors in SVG code
  • Or remove colors to inherit from CSS
  • Test on actual color scheme background

​
Use Cases

Pre-Launch Store

Logo: 160px desktop, 100px mobile, clean white PNG on dark background

Minimal Branding

Logo: 100px desktop, 60px mobile, subtle icon-only mark

Bold Statement

Logo: 200px desktop, 120px mobile, SVG wordmark with brand colors

Coming Soon Event

Logo: 140px desktop, 90px mobile, seasonal themed logo variation

Main Password

Password page content with title, subtext, and email signup

Header (Main)

Regular site header for unlocked store

​
Troubleshooting

Check:
  • Logo image uploaded OR SVG code pasted
  • File format is supported (PNG, JPG, SVG)
  • Image file size reasonable (< 5MB)
  • SVG code is valid (no errors)
  • Color scheme provides contrast
  • Browser cache cleared
Adjust:
  • “Logo Width (Desktop)” setting (100-200px)
  • “Logo Width (Mobile)” setting (60-160px)
  • Preview on actual devices (mobile vs desktop)
  • Consider logo aspect ratio (horizontal logos appear larger)
Verify:
  • Complete <svg> tags (opening and closing)
  • Valid XML/SVG syntax
  • No external file dependencies
  • viewBox attribute present
  • Try pasting in code validator first
  • Alternative: Use PNG image instead
Solutions:
  • Upload higher resolution image (2-3x larger)
  • Use SVG format for perfect scaling
  • Save PNG at 2x or 3x intended size
  • Optimize for retina displays
  • Avoid JPG (use PNG)
Reasons:
  • Old logo cached in browser
  • Wrong theme active
  • Not saved after upload
Fix:
  • Hard refresh (Cmd/Ctrl + Shift + R)
  • Clear browser cache
  • Verify correct theme published
  • Re-upload logo and save

​
Quick Summary

  • Purpose: Display store logo on password-protected page
  • Logo Options: Upload image (PNG/JPG) or paste SVG code
  • Sizing: 100-200px desktop (default: 120px), 60-160px mobile (default: 80px)
  • Settings: Logo image/SVG, desktop/mobile sizing, section width, color scheme, spacing
  • Best Format: PNG with transparency or SVG for perfect scaling
  • Appears On: Password-protected storefront only (not regular site)
This header only appears when password protection is enabled. Regular site header is controlled by the main header section. Enable password protection in Shopify Admin → Online Store → Preferences → Password protection.