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

# Collection Banner

> Collection page hero banner with customizable layout and transparent header support

The Collection Banner section displays a hero banner at the top of collection pages, automatically showing the collection title, description, and optional featured image. This banner creates a visually striking introduction to collection pages, establishing clear branding and context before the product grid. Use this section on all collection pages to elevate your catalog presentation with professional, immersive collection headers.

## What this section controls

This section controls collection page headers with the following capabilities:

* Hero banner with collection title and description
* Optional featured image display
* Transparent header overlay option
* Section height control (30vh to 100vh)
* Three banner layout modes (Full, Split, Text)
* Desktop and mobile image support
* Image position controls (Center, Top, Bottom)
* Color scheme and spacing controls
* Template-only section (collection pages)

***

## Template Settings

<AccordionGroup>
  <Accordion title="Enable Transparent Header" icon="eye-slash">
    Makes the site header transparent, overlaying the banner.

    * **Type:** Checkbox
    * **Default:** Enabled

    <Note>
      When enabled, the header becomes transparent and floats over the banner, creating a modern, immersive design. The header background appears when scrolling down.
    </Note>

    <Tip>
      Transparent headers work best with high-contrast banner images. Ensure collection images have good contrast for header visibility.
    </Tip>
  </Accordion>

  <Accordion title="Section Height" icon="arrows-up-down">
    Control the vertical height of the banner.

    * **Range:** 30vh - 100vh (viewport height)
    * **Step:** 10vh increments
    * **Unit:** vh (viewport height percentage)
    * **Default:** 40vh

    **Height Recommendations:**

    * **30-40vh:** Standard collection banners
    * **50-60vh:** Prominent featured collections
    * **70-100vh:** Full-screen hero collections

    <Note>
      vh units scale with viewport (browser window) height. 40vh = 40% of screen height.
    </Note>
  </Accordion>

  <Accordion title="Banner Layout" icon="grid-2">
    Choose content layout pattern:

    * **Full** (default) - Full-width image with centered text overlay
    * **70/30** - 70% image, 30% content sidebar
    * **30/70** - 30% image, 70% content sidebar
    * **Split** - 50/50 image and content side-by-side

    <CardGroup cols={2}>
      <Card title="Full Layout" icon="maximize">
        Best for: Image-focused collections with short titles
      </Card>

      <Card title="70/30 Layout" icon="columns">
        Best for: Balancing visual and text content
      </Card>

      <Card title="30/70 Layout" icon="columns">
        Best for: Content-heavy collections with longer descriptions
      </Card>

      <Card title="Split Layout" icon="square-dashed">
        Best for: Equal emphasis on image and text
      </Card>
    </CardGroup>
  </Accordion>

  <Accordion title="Color Scheme" icon="palette">
    * Select from available theme color schemes
    * **Default:** scheme-1

    <Note>
      Color scheme affects text overlay and background areas. Choose schemes with good contrast against collection images.
    </Note>
  </Accordion>
</AccordionGroup>

***

## Automatic Content

The banner automatically displays collection information:

### Collection Data

<AccordionGroup>
  <Accordion title="Collection Title" icon="heading">
    * Automatically pulls from collection settings
    * Rendered as H1 heading (SEO-friendly)
    * Prominent, large typography
    * Centered or left-aligned based on layout
  </Accordion>

  <Accordion title="Collection Description" icon="align-left">
    * Displays collection description if set
    * Rich text formatting supported
    * Appears below title
    * Optional (shows only if description exists)

    <Tip>
      Add collection descriptions in **Shopify Admin → Products → Collections → Select collection → Description field** for better SEO and customer context.
    </Tip>
  </Accordion>

  <Accordion title="Collection Image" icon="image">
    * Uses collection featured image
    * Full-width background or side panel (based on layout)
    * Responsive scaling
    * Optional overlay for better text contrast

    <Note>
      Set collection images in **Shopify Admin → Products → Collections → Select collection → Image**. Recommended minimum size: 1920x600px.
    </Note>
  </Accordion>

  <Accordion title="Product Count" icon="hashtag">
    Some themes display product count in collection banner:

    * "120 products" or similar
    * Dynamic based on collection filters
    * Helps set expectations
  </Accordion>
</AccordionGroup>

***

## Layout Comparison

<CardGroup cols={2}>
  <Card title="Full Layout" icon="rectangle-wide">
    **Structure:**

    * Full-width background image
    * Centered text overlay
    * Title + description stacked vertically

    **Best For:**

    * Lifestyle/fashion collections
    * Strong imagery
    * Minimal text content
    * Hero-style presentation
  </Card>

  <Card title="70/30 Layout" icon="table-columns">
    **Structure:**

    * 70% image area (left)
    * 30% content area (right)
    * Asymmetric balance

    **Best For:**

    * Image-primary with sidebar text
    * Medium-length descriptions
    * Modern, magazine-style layouts
  </Card>

  <Card title="30/70 Layout" icon="table-columns">
    **Structure:**

    * 30% image area (left)
    * 70% content area (right)
    * Text-focused layout

    **Best For:**

    * Content-heavy collections
    * Detailed descriptions
    * Product education
    * Text-primary presentations
  </Card>

  <Card title="Split Layout" icon="grip-vertical">
    **Structure:**

    * 50% image (left)
    * 50% content (right)
    * Perfectly balanced

    **Best For:**

    * Equal image-text emphasis
    * Clean, symmetric design
    * Professional presentations
    * Versatile collections
  </Card>
</CardGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Image guidelines" icon="image">
    Use high-resolution collection images (minimum 1920x600px) in 16:9 or 3:1 aspect ratios, keeping file sizes under 300KB for optimal performance. Choose lifestyle images showing products in context with good contrast for text overlay, avoiding busy backgrounds that compete with your collection title and description.
  </Card>

  <Card title="Transparent header usage" icon="eye">
    Enable transparent headers for high-quality, visually striking collection images with good contrast and modern, immersive aesthetics. Disable for low-contrast or busy background images where header visibility is a concern. Always test with all collections to ensure adequate contrast for header elements.
  </Card>

  <Card title="Height selection" icon="ruler-vertical">
    Use 30vh for quick context with minimal emphasis, 40vh (default) for balanced presence across most collection types, 60vh for featured seasonal campaigns with strong visual impact, or 80-100vh for landing page collections and premium luxury products. Choose height based on whether you want to focus on products or create maximum visual impact.
  </Card>

  <Card title="Layout selection guide" icon="layout-grid">
    Choose Full layout for stunning lifestyle photography with short titles, 70/30 for balanced image-text with moderate descriptions, 30/70 for text-heavy educational collections, or Split layout for clean symmetric aesthetics with equal emphasis. Match your layout to your content emphasis and brand positioning.
  </Card>

  <Card title="Mobile considerations" icon="mobile-screen">
    Layouts automatically stack vertically on mobile with proportionally reduced banner heights and adjusted text sizes for readability. Test banners on actual mobile devices to ensure text remains readable, image focal points work on narrow screens, and transparent headers maintain adequate contrast throughout the mobile experience.
  </Card>
</CardGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Seasonal Collections" icon="calendar">
    Full layout with 60vh height, transparent header, lifestyle imagery showcasing seasonal products
  </Card>

  <Card title="Sale Collections" icon="tag">
    70/30 layout highlighting sale imagery with promotional text in sidebar
  </Card>

  <Card title="New Arrivals" icon="sparkles">
    Split layout with product photography and "What's New" description
  </Card>

  <Card title="Category Collections" icon="grip">
    Standard 40vh full layout with product category imagery and short description
  </Card>

  <Card title="Brand Collections" icon="award">
    30/70 layout with brand logo/image and detailed brand story in content area
  </Card>

  <Card title="Curated Collections" icon="hand-holding-heart">
    Full layout, tall height (60-80vh), editorial-style imagery
  </Card>
</CardGroup>

***

## Related Templates & Sections

<CardGroup cols={2}>
  <Card title="Collection Page" icon="grid-2">
    Collection product grid template that appears below this banner
  </Card>

  <Card title="Featured Collections" icon="star">
    Section for displaying collection grid on homepage or other pages
  </Card>

  <Card title="Hero Banner" icon="image">
    Similar hero section for homepage with manual content control
  </Card>
</CardGroup>

***

## SEO Considerations

<AccordionGroup>
  <Accordion title="Collection Title (H1)" icon="hashtag">
    * Automatically renders collection name as H1 tag
    * Critical for SEO (one H1 per page)
    * Use keyword-rich collection names
    * Keep titles descriptive (50-60 characters)
  </Accordion>

  <Accordion title="Collection Description" icon="file-text">
    * Appears in banner and in meta description
    * Provides SEO context for collection pages
    * Use 150-160 characters for optimal search results
    * Include relevant keywords naturally
  </Accordion>

  <Accordion title="Image Alt Text" icon="i-cursor">
    * Set alt text for collection images in Shopify Admin
    * Describes image content for accessibility and SEO
    * Include collection name and key details
  </Accordion>
</AccordionGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Transparent Header Not Visible" icon="eye-slash">
    **Possible Issues:**

    * Dark header on dark image background
    * Light header on light image background
    * Insufficient contrast

    **Solutions:**

    * Use collection images with contrasting areas
    * Disable transparent header for problematic collections
    * Add overlay gradient in theme code (developer)
    * Choose different color scheme
  </Accordion>

  <Accordion title="Banner Too Short/Tall" icon="ruler">
    **Adjust:**

    * Change section height setting (30-100vh)
    * Test different vh values
    * Consider content amount when setting height
    * Verify mobile appearance (height may feel different)
  </Accordion>

  <Accordion title="Image Not Displaying" icon="image-slash">
    **Check:**

    * Collection has featured image set
    * Image file uploaded successfully
    * Image file format is supported (JPG, PNG, GIF, WebP)
    * Browser cache (hard refresh: Cmd/Ctrl + Shift + R)
  </Accordion>

  <Accordion title="Text Not Readable" icon="font">
    **Improve Readability:**

    * Choose color scheme with better contrast
    * Select different collection image with clearer background
    * Disable transparent header if it interferes
    * Use darker/lighter images based on text color
    * Add text shadow via theme code (developer)
  </Accordion>
</AccordionGroup>

***

## Quick Summary

* **Purpose:** Collection page hero banner
* **Content:** Automatic (collection title, description, image)
* **Layouts:** Full, 70/30, 30/70, Split
* **Height:** 30-100vh (default: 40vh)
* **Transparent Header:** Optional overlay effect
* **Settings:** Layout, height, color scheme, transparent header toggle
* **SEO:** H1 heading, collection description, image alt text

<Note>
  Collection information (title, description, image) is set in **Shopify Admin → Products → Collections**, not in the Theme Customizer. The banner template controls how this content is displayed.
</Note>