Skip to main content

​
What It Does

The Header (Password Page) section displays a simplified header on password-protected storefront pages (when your store is password-protected or in “Coming Soon” mode). This header typically shows your store logo and basic branding without navigation menus or cart functionality. Configure logo appearance, positioning, transparency, and separator line to maintain brand consistency even before customers enter your store.
This header only appears on password pages (pre-launch, maintenance mode, or password-protected stores). Regular storefront uses the main Header section. Switch between headers automatically based on page type.

​
Getting Started

1

Enable Password Protection

In Shopify Admin → Online Store → Preferences → Enable password protection. This activates the password page and this header section.
2

Upload Logo

In Theme Customizer → Password page template → Header section → Upload your store logo (same logo as main header recommended for consistency).
3

Set Logo Width

Adjust logo width slider (50-250px) until logo looks properly sized. Start at 145px (default), adjust as needed for your logo dimensions.
4

Choose Position & Style

Select logo position (left or center), enable transparent header if desired, and enable/disable bottom separator line.

​
Settings

Type: Checkbox
Default: Disabled (unchecked)
Label: “Transparent - Password page”Makes the header background transparent, allowing password page background content to show through.

​
When Disabled (Default - Solid Header)

  • Header has solid background color (typically white or theme brand color)
  • Logo and elements sit on opaque header bar
  • Clear separation between header and page content below
  • Traditional, professional header appearance

​
When Enabled (Transparent Header)

  • Header background fully transparent (no solid bar)
  • Logo appears to “float” over password page background image/color
  • Creates seamless, editorial aesthetic
  • Password page background visible behind header

​
Use Cases

Transparent header when:
  • Password page has strong hero image/video that should extend to top of page
  • Modern, editorial, high-fashion aesthetic
  • Want immersive brand experience on coming-soon page
  • Logo contrasts well with password page background
Solid header when:
  • Password page background is busy/complex (transparent header logo hard to see)
  • Traditional, e-commerce aesthetic
  • Logo needs consistent background for readability
  • Professional, corporate brand

​
Contrast Considerations

Critical: Logo must contrast with password page background when header transparent.Testing process:
  1. Enable transparent header
  2. Preview password page
  3. Check logo visibility
  4. If logo hard to see: Add dark overlay to password page background, or disable transparent header
Example scenarios:
  • Dark logo + light background image = Good contrast
  • Dark logo + dark background image = Poor contrast (logo invisible)
  • Light logo + dark background image = Good contrast
  • Light logo + light background image = Poor contrast
Solution for contrast issues:
  • Upload alternate logo version (e.g., white logo for dark backgrounds)
  • Add dark overlay to password page background image (in section-password settings)
  • Use solid header instead (disable transparent)

​
Best Practices

When using transparent header:
  • Test logo visibility on multiple devices (mobile/desktop)
  • Ensure logo remains readable as background content scrolls (if password page scrolls)
  • Consider sticky positioning (logo stays visible when scrolling)
Password page coordination:
  • Header transparency setting works in conjunction with Password page section background
  • Design both sections together (transparent header + hero image password page = cohesive look)
Recommendation: Use solid header (default) for most stores unless you have strong branded password page background. Transparent works best for fashion, lifestyle, creative brands with curated coming-soon pages.
Type: Range slider
Range: 50px - 250px
Step: 5px
Default: 145px
Unit: Pixels (px)Controls the width of the logo image in the header.

​
How Width Works

  • Logo scales proportionally (height adjusts automatically to maintain aspect ratio)
  • Example: 200x100px logo at 100px width = 100x50px displayed size
  • Larger width = larger logo (more prominent)
  • Smaller width = smaller logo (more subtle)

​
Choosing Logo Width

Small (50-100px):
  • Subtle, minimal branding
  • Best for: Simple text logos, minimal aesthetic
  • Risk: Logo may be too small to read (especially mobile)
Medium (100-150px): ← Default: 145px
  • Balanced, professional size
  • Best for: Most logos, standard branding
  • Works well for horizontal wordmark logos
Large (150-250px):
  • Prominent, bold branding
  • Best for: Icon logos, very simple logos, strong brand focus
  • Risk: Logo may dominate header (especially mobile)

​
Adjusting for Logo Type

Horizontal wordmark logos:
  • Need wider width (120-180px) for text readability
  • Example: “COMPANY NAME” stretched horizontally
Square icon logos:
  • Need less width (80-120px) since height grows proportionally
  • Example: Circle logo, badge logo
Vertical logos:
  • Tricky in horizontal header (consider horizontal variant)
  • May need smaller width (60-100px) to prevent excessive height
Complex logos:
  • Larger width (150-200px) for detail visibility
  • Ensure intricate elements remain clear

​
Testing Process

  1. Upload logo
  2. Set width to 145px (default starting point)
  3. Preview password page on desktop and mobile
  4. If logo too small/hard to read: Increase width (try 160px, 180px, 200px)
  5. If logo too large/dominating: Decrease width (try 120px, 100px, 80px)
  6. Mobile check: Logo should be readable but not overwhelming on small screens

​
Mobile Considerations

Responsive behavior:
  • Logo width may scale down on mobile (theme-dependent)
  • Some themes use same width mobile/desktop, others scale to ~80% on mobile
  • Test on actual mobile device (not just browser resize)
Mobile-specific width:
  • This setting typically applies to both desktop and mobile
  • If logo too large on mobile, reduce width (affects both)
  • Advanced: Custom CSS can set different mobile width if needed

​
Best Practices

Readability first:
  • Logo must be legible at chosen size (text readable, details visible)
  • Test at arm’s length (typical viewing distance)
Mobile priority:
  • If logo looks good on mobile, usually looks good on desktop
  • If choosing between too large on desktop vs too small on mobile, prioritize mobile
Consistent with main header:
  • Use same logo width as main header (brand consistency)
  • Password page → main store transition feels seamless
Header balance:
  • Logo shouldn’t dominate entire header (leave breathing room)
  • If header feels cramped, reduce logo width or increase header height
Recommendation: Start at 145px (default), adjust ±20px based on logo type. Horizontal wordmarks may need 160-180px, icon logos may need 100-120px.
Type: Select dropdown
Options: Left, Center
Default: LeftControls horizontal alignment of the logo within the header.

​
Position Options

Left (Default):
  • Logo aligns to left side of header
  • Standard e-commerce header convention
  • Creates asymmetrical layout (logo left, rest of header open/right-aligned elements)
  • Professional, familiar positioning
Center:
  • Logo centers horizontally in header
  • Symmetrical, balanced layout
  • Creates editorial, high-fashion aesthetic
  • More formal, intentional appearance

​
Choosing Logo Position

Left when:
  • Standard e-commerce aesthetic (most online stores use left)
  • Multi-element header (logo left, navigation/cart right—though password header has no nav)
  • Western reading pattern (eyes start top-left)
  • Preparing for main store with left-logo header (consistency)
Center when:
  • Minimal, editorial aesthetic (fashion, luxury, lifestyle)
  • Symmetrical design preference
  • Password page is coming-soon/brand launch (more formal)
  • Logo is primary/only header element (no nav/cart on password page makes centering work well)

​
Use Cases by Brand Type

E-commerce retail (apparel, home goods, general):
  • Left - Standard, expected, professional
Fashion/luxury brands:
  • Center - Editorial, high-end, fashion-forward
Tech/SaaS companies:
  • Left - Functional, familiar, web convention
Creative/lifestyle brands:
  • Center - Unique, artistic, intentional
Small business/local shops:
  • Left - Safe, standard choice

​
Transitioning to Main Store

Consistency consideration:
  • If main store header has left-aligned logo, password header should too (seamless transition)
  • If main store header has centered logo, password header should too
  • Customers entering store shouldn’t experience jarring layout shift
Checking main header:
  1. Theme Customizer → Main header section (not password header)
  2. Check logo position setting
  3. Match password header position to main header

​
Best Practices

Default recommendation:
  • Left-aligned logo is safe, standard choice (works for 80% of stores)
Center for brand statement:
  • Use center position to make password page feel more special/intentional
  • “Coming soon” pages often benefit from centered logos (formal launch vibe)
Mobile behavior:
  • Centered logos remain centered on mobile (expected)
  • Left-aligned logos remain left on mobile (standard)
  • Both work well on small screens
Test with transparency:
  • If using transparent header, logo position affects visual balance with password page background
  • Centered logo with centered password content feels cohesive
  • Left logo may feel unbalanced if password content centered
Recommendation: Use Left (default) for standard e-commerce stores. Use Center for fashion, luxury, or coming-soon pages with formal/editorial aesthetic.
Type: Checkbox
Default: Enabled (checked)Controls whether a horizontal border line displays below the header.

​
When Enabled (Default)

  • Thin horizontal line appears at bottom edge of header
  • Separates header from password page content below
  • Creates clear visual boundary
  • Typically subtle (1px line, light gray or theme color)

​
When Disabled

  • No separator line
  • Header blends seamlessly into page content
  • Cleaner, more minimal appearance
  • Works well with transparent headers

​
Use Cases

Enable separator when:
  • Header background color similar to password page background (separator adds definition)
  • Traditional, structured design aesthetic
  • Want clear header boundaries
  • Solid (non-transparent) header (separator reinforces header bar)
Disable separator when:
  • Transparent header (separator can look awkward floating over background)
  • Minimal aesthetic preference (cleaner without lines)
  • Password page background contrasts strongly with header (separator redundant)
  • Modern, seamless design

​
Visual Impact

With separator:
[           LOGO           ]
––––––––––––––––––––––––––––– ← Separator line
[  Password page content   ]
Without separator:
[           LOGO           ]
[  Password page content   ] ← No line, seamless transition

​
Best Practices

Transparent headers:
  • Usually disable separator (floating line looks disconnected)
  • Exception: If password background is very busy, separator can help anchor header
Solid headers:
  • Usually enable separator (defines header bottom edge)
  • Exception: If header color contrasts strongly with page background, separator may be redundant
Minimalist brands:
  • Disable separator (fewer visual elements = cleaner)
Traditional brands:
  • Enable separator (structured, defined sections)
Testing:
  • Toggle setting and preview both states
  • Check on mobile (separator may be more or less prominent on small screens)
  • Ensure separator color contrasts enough to be visible but not harsh
Recommendation: Leave enabled (default) for solid headers, disable for transparent headers or minimal aesthetic.

​
Best practices

Same Logo as Main Header

Use identical logo on password header and main header for brand consistency. Customers should see same branding when entering your store.

Test Logo Contrast

If using transparent header, ensure logo contrasts with password page background. Dark logo needs light background, light logo needs dark background.

145px Default Width

Start with 145px logo width (default), adjust ±20px based on logo type. Horizontal wordmarks need 160-180px, icon logos need 100-120px.

Match Main Header Position

Align password header logo position (left/center) with main header. Seamless transition when customers enter store.

Disable Separator on Transparent

Turn off line separator when using transparent header (floating line looks disconnected). Keep enabled for solid headers.

Upload PNG with Transparency

Use PNG logo format with transparent background. Adapts to any header color and looks professional on all backgrounds.

Test on Mobile

Always preview password page on mobile devices. Logo size and position may appear different on small screens—adjust accordingly.

Coordinate with Password Page

Design password header and password page section together. Transparent header + hero image or solid header + simple background.

​
Common Use Cases

​
Standard Coming Soon Page

Settings: Logo uploaded (145px width), Left position, Solid header (transparent disabled), Separator enabled Setup: Professional coming-soon page with left-aligned logo, clear header separation, works for most e-commerce stores. Best for: General retail, standard store launches, traditional brands

​
Fashion Launch (Editorial Style)

Settings: Logo uploaded (120px width), Center position, Transparent header, Separator disabled Setup: Centered logo over hero image background, no separator for seamless look. High-fashion, editorial aesthetic. Best for: Fashion, luxury, lifestyle brands with branded coming-soon pages

​
Minimal Brand Launch

Settings: Logo uploaded (100px width), Center position, Solid header, Separator disabled Setup: Small centered logo, clean white/solid header, no separator for minimal look. Focus on simplicity. Best for: Minimal brands, modern startups, clean aesthetic

​
Maintenance Mode

Settings: Logo uploaded (145px width), Left position, Solid header, Separator enabled Setup: Standard header matching main store. Simple message page during maintenance. Looks like regular store. Best for: Temporary password protection, maintenance downtime, gradual store changes

​
Exclusive/VIP Access

Settings: Logo uploaded (180px width), Center position, Transparent header over dark background, Separator disabled Setup: Large centered logo, dramatic dark background, premium feel for exclusive access. Best for: VIP launches, exclusive memberships, luxury brand soft launches

​
Layout Behavior

​
Desktop Layout

Solid header:
  • Full-width header bar with background color
  • Logo positioned left or center (based on setting)
  • Header height: ~80-100px (varies by theme)
  • Separator line below (if enabled)
Transparent header:
  • No background bar (logo floats over password page background)
  • Logo positioned left or center
  • Separator disabled recommended (or very subtle if enabled)

​
Mobile Layout

Responsive behavior:
  • Header typically full-width on mobile (same as desktop)
  • Logo may scale slightly smaller on mobile (theme-dependent)
  • Position (left/center) maintained on mobile
  • Separator scales to full mobile width
Logo sizing:
  • Same logo width setting as desktop (some themes scale to ~80% on mobile)
  • Test to ensure logo readable on small screens
  • May need to reduce logo width if too large on mobile

​
Header Height

Auto-calculated:
  • Header height adjusts to logo height + padding
  • Larger logo = taller header
  • Smaller logo = shorter header
  • Typically minimum height ~60px, maximum ~120px

​
Technical Notes

​
When This Header Displays

Password protection enabled:
  • Shopify Admin → Online Store → Preferences → Password protection → Enabled
  • Sets entire storefront to password-protected
  • All pages show password page until correct password entered
  • Password header displays instead of main header
Password protection disabled:
  • Main header displays on all pages
  • Password header not visible
  • To test password header: Enable password protection, view storefront in private window

​
Switching Between Headers

Automatic switching:
  • Theme automatically uses password header on password pages
  • Uses main header on all other pages (after password entry)
  • No manual configuration needed
Template structure: 
{% if template == 'password' %}
  {% section 'header-password' %}
{% else %}
  {% section 'header' %}
{% endif %}

​
Transparent Header Implementation

CSS class: 
.header-password--transparent {
  background-color: transparent;
  position: absolute; /* Overlays password page content */
}
Layout shift:
  • Transparent header position: absolute (doesn’t push content down)
  • Solid header position: relative (pushes content down by header height)
  • Password page must account for header overlap when transparent

​
Logo Rendering

Liquid code: 
{% if section.settings.logo %}
  <img src="{{ section.settings.logo | img_url: 'master' }}" 
       width="{{ section.settings.logo_width }}" 
       alt="{{ shop.name }}">
{% else %}
  <h1>{{ shop.name }}</h1>
{% endif %}
Fallback:
  • If no logo uploaded, displays store name as text (from Shopify settings → Store details → Store name)

​
Accessibility

Logo alt text:
  • Automatically set to store name (e.g., alt="My Store")
  • Screen readers announce store name when logo focused
  • Important for brand recognition
Skip link:
  • Many themes include “Skip to content” link before header
  • Allows keyboard users to bypass header, jump to password input
  • Hidden visually, appears on Tab focus
Keyboard navigation:
  • Logo typically keyboard-focusable (Tab to logo, Enter to go to homepage)
  • On password page, logo may not link anywhere (just branding)

​
SEO Implications

Password page:
  • Not indexed by search engines (blocked by password protection)
  • No SEO value until password protection disabled
  • Header content (logo alt text) not relevant for SEO while password-protected
Pre-launch best practice:
  • Add meta description and title in Shopify → Preferences even before launch
  • When password removed, SEO content already configured

​
Troubleshooting

Password header not showing:
  • Verify password protection enabled: Shopify Admin → Online Store → Preferences → Password protection
  • Check you’re viewing password page (logged-out state, private browser window)
  • If logged in as staff, you bypass password page (log out or use private window)
Logo not displaying:
  • Verify logo uploaded in section settings
  • Check logo file format (PNG, JPG, SVG supported)
  • Try re-uploading logo (may have failed to save)
  • Check browser console for image load errors
Logo too large/small:
  • Adjust “Logo width” slider (50-250px range)
  • Preview on desktop and mobile—may need compromise size
  • Check logo’s original dimensions (very tall logos may need different width)
Logo hard to see (transparent header):
  • Increase contrast: Upload alternate logo color (white logo for dark background)
  • Add dark overlay to password page background image
  • Disable transparent header (use solid background)
  • Adjust password page background to be lighter/darker
Logo position not changing:
  • Hard refresh browser (Cmd/Ctrl+Shift+R) to clear CSS cache
  • Check theme code for CSS overrides (some themes hard-code position)
  • Try toggling position, save, preview again
Separator line not showing:
  • Ensure “Show line separator” enabled in settings
  • Line may be very subtle (check separator color in theme settings)
  • If header background same color as line, appears invisible
  • Inspect element to see if separator present but color-matched
Header looks different than main header:
  • Check main header settings (logo width, position, transparency)
  • Match password header settings to main header for consistency
  • May be intentional design (password header often simpler)
Mobile header too tall:
  • Reduce logo width (logo height determined by width proportionally)
  • Check theme’s mobile-specific header padding (may be excessive)
  • Test on actual mobile device (not just browser resize)
Transparent header not working:
  • Clear browser cache (Cmd/Ctrl+Shift+R)
  • Check password page template—may have inline styles overriding transparency
  • Verify password page section background image/color set (transparent header needs background to show through)
  • Inspect element—check for CSS background-color overrides
Logo blurry/pixelated:
  • Upload higher resolution logo (2x display size minimum)
  • Use SVG format for perfect scaling (vector graphics)
  • Check original logo file quality
  • Ensure logo width not enlarged beyond original file dimensions