> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Password Header
> Simplified header for password-protected storefront pages
## 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
In Shopify Admin → Online Store → Preferences → Enable password protection. This activates the password page and this header section.
In Theme Customizer → Password page template → Header section → Upload your store logo (same logo as main header recommended for consistency).
Adjust logo width slider (50-250px) until logo looks properly sized. Start at 145px (default), adjust as needed for your logo dimensions.
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:** Image picker\
**Required:** Upload recommended (optional, but password header looks empty without logo)
Upload your store logo to display in the password page header.
### Logo Specifications
**File format:**
* **PNG** (recommended) - Supports transparency, clean edges, best for logos
* **SVG** (ideal) - Vector format, scales perfectly, smallest file size
* **JPG** - Only if logo is photographic (rare for logos)
**Image size:**
* **Width:** 300-800px (Shopify auto-resizes, but upload at intended display size for quality)
* **Height:** Proportional to width (maintain aspect ratio)
* **File size:** Under 100KB (logos should be small files)
**Content:**
* Your store/brand logo (same logo as main header recommended)
* Horizontal logo works best (vertical logos may need width adjustment)
* Transparent background preferred (PNG with transparency)
### Uploading Logo
**Steps:**
1. Theme Customizer → Password page → Header section
2. Click "Logo" image picker
3. Upload logo file or select from media library
4. Adjust "Logo width" slider below to size appropriately
### Logo Visibility
**Without logo:**
* Header displays store name (from Shopify settings) as text
* Less professional, less branded
* Fallback if logo not uploaded
**With logo:**
* Brand logo displays prominently
* Professional appearance
* Stronger brand recognition
### Best Practices
**Same logo as main header:**
* Use identical logo for password header and main header (consistency)
* Customers should see same branding when they enter store
* Upload once, select from library for both headers
**Logo variants:**
* If using transparent header on password page, may need logo variant for contrast
* Example: Dark logo for solid header, white logo for transparent header over dark background
* Upload alternate logo version if needed
**High-resolution:**
* Upload logo at 2x actual display size for Retina displays
* Example: If logo displays at 145px wide, upload 290px wide source file
* Ensures crisp logo on high-DPI screens
**Transparency:**
* PNG with transparent background adapts to any header background color
* JPG with white background only works on white headers
* Always prefer PNG for logos
**Recommendation:** Upload high-resolution PNG logo with transparent background. Use same logo as main header for brand consistency.
**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:** Left
Controls 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
Use identical logo on password header and main header for brand consistency. Customers should see same branding when entering your store.
If using transparent header, ensure logo contrasts with password page background. Dark logo needs light background, light logo needs dark background.
Start with 145px logo width (default), adjust ±20px based on logo type. Horizontal wordmarks need 160-180px, icon logos need 100-120px.
Align password header logo position (left/center) with main header. Seamless transition when customers enter store.
Turn off line separator when using transparent header (floating line looks disconnected). Keep enabled for solid headers.
Use PNG logo format with transparent background. Adapts to any header color and looks professional on all backgrounds.
Always preview password page on mobile devices. Logo size and position may appear different on small screens—adjust accordingly.
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
## Related Sections
* **[Header (Main)](/themes/mojave/header/header)** - Main storefront header (after password entry)
* **[Password Page (Template)](/themes/mojave/pages-templates/password)** - Password page content section
* **[Footer](/themes/mojave/footer/footer)** - Footer (also appears on password page)
## 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:**
```liquid theme={null}
{% if template == 'password' %}
{% section 'header-password' %}
{% else %}
{% section 'header' %}
{% endif %}
```
### Transparent Header Implementation
**CSS class:**
```css theme={null}
.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:**
```liquid theme={null}
{% if section.settings.logo %}
{% else %}
{{ shop.name }}
{% 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