> ## 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.

# Main Password Header

> Password page header with branded logo for locked storefronts

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

<AccordionGroup>
  <Accordion title="Logo Image" icon="image">
    Upload store logo image.

    * **Type:** Image picker
    * **Format:** PNG (transparent background recommended), JPG, or SVG
    * **Recommended Size:** 400x400px minimum
    * **Aspect Ratio:** Square or horizontal

    <Tip>
      Use PNG with transparent background for logos that sit on colored backgrounds. Ensure logo is high-resolution for retina displays.
    </Tip>
  </Accordion>

  <Accordion title="Logo SVG Code" icon="code">
    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 theme={null}
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="#000" />
    </svg>
    ```

    <Note>
      Paste full SVG code including `<svg>` tags. SVG must be self-contained (no external references).
    </Note>
  </Accordion>

  <Accordion title="Logo Width (Desktop)" icon="desktop">
    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
  </Accordion>

  <Accordion title="Logo Width (Mobile)" icon="mobile">
    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

    <Tip>
      Mobile logo should be smaller than desktop (default: 80px mobile vs 120px desktop) to conserve screen space.
    </Tip>
  </Accordion>
</AccordionGroup>

### Layout Settings

<AccordionGroup>
  <Accordion title="Section Width" icon="left-right">
    * **Page** (default) - Contained within page margins
    * **Fluid** - Extends to container edges
    * **Full** - Full browser width (edge-to-edge)
  </Accordion>

  <Accordion title="Color Scheme" icon="palette">
    * Select from available theme color schemes
    * **Default:** scheme-1
    * Affects background and text colors
  </Accordion>

  <Accordion title="Spacing" icon="arrows-up-down">
    * **Top Spacing**: 0, 1, 2 (default), 4, or 6
    * **Bottom Spacing**: 0, 1, 2 (default), 4, or 6
  </Accordion>

  <Accordion title="Borders" icon="border-top-left">
    * **None** (default)
    * **Top Border**
    * **Bottom Border**
    * **Both Borders**
  </Accordion>
</AccordionGroup>

***

## Logo Best Practices

<AccordionGroup>
  <Accordion title="Logo File Formats" icon="file-image">
    **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
  </Accordion>

  <Accordion title="Logo Sizing Strategy" icon="expand">
    **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)
  </Accordion>

  <Accordion title="Logo Design Tips" icon="paintbrush">
    **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

    <Tip>
      If your full logo has small text, consider using icon-only version for password page to ensure legibility.
    </Tip>
  </Accordion>

  <Accordion title="Background Coordination" icon="fill-drip">
    **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)

    <Note>
      Password page background is often set in the main-password section or theme settings, not in this header section.
    </Note>
  </Accordion>
</AccordionGroup>

***

## SVG Logos

<AccordionGroup>
  <Accordion title="Using SVG Code" icon="code">
    **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 theme={null}
    <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>
    ```
  </Accordion>

  <Accordion title="SVG Benefits" icon="star">
    **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
  </Accordion>

  <Accordion title="Troubleshooting SVG" icon="wrench">
    **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
  </Accordion>
</AccordionGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Pre-Launch Store" icon="rocket">
    Logo: 160px desktop, 100px mobile, clean white PNG on dark background
  </Card>

  <Card title="Minimal Branding" icon="circle">
    Logo: 100px desktop, 60px mobile, subtle icon-only mark
  </Card>

  <Card title="Bold Statement" icon="square">
    Logo: 200px desktop, 120px mobile, SVG wordmark with brand colors
  </Card>

  <Card title="Coming Soon Event" icon="calendar">
    Logo: 140px desktop, 90px mobile, seasonal themed logo variation
  </Card>
</CardGroup>

***

## Related Sections

<CardGroup cols={2}>
  <Card title="Main Password" icon="lock">
    Password page content with title, subtext, and email signup
  </Card>

  <Card title="Header (Main)" icon="header">
    Regular site header for unlocked store
  </Card>
</CardGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Logo Not Appearing" icon="image-slash">
    **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
  </Accordion>

  <Accordion title="Logo Too Large/Small" icon="expand">
    **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)
  </Accordion>

  <Accordion title="SVG Code Not Working" icon="code">
    **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
  </Accordion>

  <Accordion title="Logo Pixelated/Blurry" icon="image">
    **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)
  </Accordion>

  <Accordion title="Wrong Logo Showing" icon="arrow-rotate-left">
    **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
  </Accordion>
</AccordionGroup>

***

## 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)

<Note>
  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**.
</Note>