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

# Page banner

> Create customizable hero banners for pages, collections, products, and blogs with media, text, navigation, and FAQ search.

The Page banner section creates versatile hero banners that automatically adapt to different template types (pages, collections, products, blogs). It displays titles, descriptions, media backgrounds, breadcrumb navigation, optional collection menus, and an FAQ search feature.

This section is essential for creating impactful page headers that provide context, visual appeal, and wayfinding across your entire site.

<img src="https://mintcdn.com/digifist/4CbR3vroGI7yZewZ/images/theme/sahara/sections/page-banner/page-banner-overview.png?fit=max&auto=format&n=4CbR3vroGI7yZewZ&q=85&s=82a502117110f80413dd814e7ab28c30" alt="Page banner section overview" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/page-banner-overview.png" />

## What this section controls

This section controls page hero banners with the following capabilities:

* Automatic page title display with custom overrides
* Optional default or custom descriptions
* Separate desktop and mobile media (images, videos)
* Transparent header integration
* Breadcrumb navigation
* Collection navigation menu
* FAQ page search functionality
* Flexible content positioning and alignment
* Multiple section height options

## How the Page banner works

The Page banner intelligently adapts to your template type:

* **Page templates:** Displays page title and description
* **Collection templates:** Shows collection title, description, and optional menu
* **Product templates:** Displays product title and description
* **Blog templates:** Shows blog title and description

Content defaults to template metadata but can be overridden with custom text. Media positioning options allow background overlays, top placement, or bottom placement with separate desktop and mobile configurations.

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Navigate to target template">
    Go to the page, collection, product, or blog template you want to customize.
  </Step>

  <Step title="Add or customize Page banner">
    Add the Page banner section (usually as first section) or customize existing instance.
  </Step>

  <Step title="Configure content">
    Set custom heading/description or use template defaults.
  </Step>

  <Step title="Add media">
    Upload images or videos for desktop and mobile displays.
  </Step>

  <Step title="Adjust positioning">
    Configure content alignment, media position, and section height.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/4CbR3vroGI7yZewZ/images/theme/sahara/sections/page-banner/page-banner-location.png?fit=max&auto=format&n=4CbR3vroGI7yZewZ&q=85&s=2e8054b52e8e542983eb92ad5ce4aa5e" alt="Page banner in Theme Customizer" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/page-banner-location.png" />

## Section settings

<Tabs>
  <Tab title="Header">
    ### Enable transparent header

    Makes header transparent and overlay the banner when using background media.

    **Default:** False

    <AccordionGroup>
      <Accordion title="Transparent header requirements" icon="window">
        **Required conditions:**

        * Media position set to "Background"
        * Banner has desktop or mobile media
        * Section placed as first on the page

        **When it works:**

        * Creates immersive full-bleed effect
        * Header navigation overlays banner media
        * Maximizes visual impact

        **When it doesn't apply:**

        * Media position set to "Top" or "Bottom"
        * No media uploaded
        * Section not first on page
      </Accordion>
    </AccordionGroup>

    <Warning>
      Ensure sufficient contrast between header navigation and banner media for readability.
    </Warning>

    <img src="https://mintcdn.com/digifist/4CbR3vroGI7yZewZ/images/theme/sahara/sections/page-banner/transparent-header.png?fit=max&auto=format&n=4CbR3vroGI7yZewZ&q=85&s=442a6e424a1e3aeea0d1f12d1bb0bb73" alt="Transparent header option" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/transparent-header.png" />
  </Tab>

  <Tab title="Content">
    ### Title

    Custom heading text that overwrites the default title from template.

    * Inline rich text supported (bold, italic, links)
    * Leave empty to use default page/collection/product/blog title

    <Note>
      Custom title always takes priority over template defaults when provided.
    </Note>

    ### Heading size

    Controls the size of banner heading.

    **Options:** XS, S, M, L, XL\
    **Default:** XL

    ### Content

    Custom descriptive text displayed below the heading.

    * Rich text editor with formatting support
    * Leave empty to use default description (if enabled)

    ### Show default description

    Displays the description from the current template (page/collection/product/blog).

    **Default:** True

    <AccordionGroup>
      <Accordion title="Default description behavior" icon="text">
        **Enabled (True):**

        * Uses page/collection/product/blog description
        * Falls back to custom content if default is empty
        * Automatically pulls template metadata

        **Disabled (False):**

        * Only shows custom content field value
        * Template descriptions ignored
        * Full manual control
      </Accordion>
    </AccordionGroup>

    <Tip>
      For consistent automation, enable default descriptions. For precise control, disable and use custom content field.
    </Tip>

    ### Show on description

    Controls where description text is visible.

    **Options:**

    * **Desktop** - Desktop devices only (default)
    * **Mobile** - Mobile devices only
    * **Both** - All devices

    <Note>
      Hiding descriptions on mobile conserves vertical space on small screens.
    </Note>

    <img src="https://mintcdn.com/digifist/9_CoD90BaccrKbJG/images/theme/sahara/sections/page-banner/content-settings.png?fit=max&auto=format&n=9_CoD90BaccrKbJG&q=85&s=94a6ce34f6b7a30e19bb74f8f2141053" alt="Content configuration" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/content-settings.png" />
  </Tab>

  <Tab title="Positioning">
    ### Content position

    Controls vertical position of text content within the banner.

    **Options:** Start (top), Center (default), End (bottom)

    <Note>
      Not applicable when section height is set to "Auto" (height adapts to content).
    </Note>

    ### Content alignment

    Controls horizontal alignment of text content.

    **Options:** Start (left), Center (default), End (right)

    ### Media position

    Controls where media appears relative to content.

    <AccordionGroup>
      <Accordion title="Top" icon="arrow-up">
        Media displays above text content.

        **Best for:**

        * Image banners with text below
        * Product category headers
        * Decorative imagery
      </Accordion>

      <Accordion title="Bottom" icon="arrow-down">
        Media displays below text content.

        **Best for:**

        * Text-priority designs
        * Minimal banners
        * Secondary imagery
      </Accordion>

      <Accordion title="Background" icon="layer-group">
        Media serves as background with text overlay (default).

        **Best for:**

        * Hero-style banners
        * Full-bleed media
        * Transparent header integration
        * Maximum visual impact
      </Accordion>
    </AccordionGroup>

    <Tip>
      Use Background position with fixed section heights (33svh, 50svh, 100svh) for best display. Auto height with background media calculates based on image aspect ratio.
    </Tip>

    <img src="https://mintcdn.com/digifist/9_CoD90BaccrKbJG/images/theme/sahara/sections/page-banner/positioning-settings.png?fit=max&auto=format&n=9_CoD90BaccrKbJG&q=85&s=11984e413bb6f7a9b2979be40fb9563e" alt="Positioning configuration" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/positioning-settings.png" />
  </Tab>

  <Tab title="Navigation">
    ### Page menu

    Link list for collection or page navigation menu.

    * Shopify link list selector
    * First-level link names must match collection handles or page titles
    * Leave empty to hide menu

    <AccordionGroup>
      <Accordion title="How page menu works" icon="bars">
        **Setup:**

        1. Create navigation in Shopify admin
        2. First-level links must match collection handles or page titles
        3. Add second-level links for submenus
        4. Assign to Page banner

        **Display:**

        * Shows when current page/collection matches first-level link
        * Displays second-level links as menu items
        * Useful for collection filtering or page sections
      </Accordion>
    </AccordionGroup>

    <Note>
      Commonly used on collection pages to show category filters or subcollections.
    </Note>

    ### Enable breadcrumbs

    Shows breadcrumb navigation on the page.

    **Default:** True

    <Tip>
      Breadcrumbs must also be enabled in theme settings to appear. This setting acts as section-level override.
    </Tip>

    <img src="https://mintcdn.com/digifist/9_CoD90BaccrKbJG/images/theme/sahara/sections/page-banner/navigation-settings.png?fit=max&auto=format&n=9_CoD90BaccrKbJG&q=85&s=f5910aee81733bf6a75c97631d5d980a" alt="Navigation configuration" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/navigation-settings.png" />
  </Tab>

  <Tab title="Desktop">
    ### Section height

    Height of the banner on desktop devices.

    <AccordionGroup>
      <Accordion title="Auto" icon="wand-magic-sparkles">
        Height based on content and media.

        **Best for:** Variable content lengths, text-focused banners
      </Accordion>

      <Accordion title="33svh" icon="compress">
        One-third viewport height (compact).

        **Best for:** Secondary pages, minimal banners
      </Accordion>

      <Accordion title="50svh" icon="square">
        Half viewport height (balanced) - default.

        **Best for:** Most pages, standard banners
      </Accordion>

      <Accordion title="100svh" icon="expand">
        Full viewport height (immersive).

        **Best for:** Homepage, major campaign pages
      </Accordion>
    </AccordionGroup>

    **Default:** Auto

    ### Image (Desktop)

    Upload image for desktop banner background.

    **Recommended:** 1920px+ width, aspect ratio matching section height

    ### Video (Desktop)

    Upload Shopify-hosted video file. Overwrites image when set.

    <Tip>
      Shopify-hosted videos offer better performance than external embeds.
    </Tip>

    ### External video (Desktop)

    Embed YouTube or Vimeo video. Takes priority over image and video.

    **Accepts:** YouTube, Vimeo URLs

    <Warning>
      External videos may impact page load performance. Use sparingly.
    </Warning>

    ### Show controls on video

    Displays play/pause and volume controls on desktop videos.

    **Default:** False

    <img src="https://mintcdn.com/digifist/9_CoD90BaccrKbJG/images/theme/sahara/sections/page-banner/desktop-media.png?fit=max&auto=format&n=9_CoD90BaccrKbJG&q=85&s=da96e7aaacdbd28dbcc7d3a860c46f3f" alt="Desktop media configuration" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/desktop-media.png" />
  </Tab>

  <Tab title="Mobile">
    ### Section height (Mobile)

    Height of the banner on mobile devices, independent of desktop.

    **Options:** Auto, 33svh, 50svh (default), 100svh

    <Note>
      Mobile defaults to 50svh for balanced visibility on vertical screens.
    </Note>

    ### Image (Mobile)

    Upload mobile-optimized image.

    **Recommended:** 800-1200px width, portrait orientation

    <Note>
      Mobile media overrides desktop media on small screens when provided.
    </Note>

    ### Video (Mobile)

    Shopify-hosted video for mobile devices. Overwrites mobile image.

    ### External video (Mobile)

    YouTube or Vimeo video for mobile. Takes priority.

    ### Show controls on video (Mobile)

    Displays video controls on mobile devices.

    **Default:** False

    <img src="https://mintcdn.com/digifist/9_CoD90BaccrKbJG/images/theme/sahara/sections/page-banner/mobile-media.png?fit=max&auto=format&n=9_CoD90BaccrKbJG&q=85&s=9d722b064144d5e625055b2b6e031b71" alt="Mobile media configuration" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/mobile-media.png" />
  </Tab>

  <Tab title="FAQ Search">
    ### Search bar

    Enables FAQ-specific search functionality within the banner.

    **Default:** False

    <AccordionGroup>
      <Accordion title="FAQ search feature" icon="magnifying-glass">
        **Purpose:**

        * Helps customers find FAQ answers quickly
        * Searches page content in real-time
        * Typically used on FAQ or Help pages

        **Functionality:**

        * Displays search input in banner
        * Filters page content as user types
        * Shows matching results below

        **Best for:**

        * FAQ pages
        * Help centers
        * Documentation pages
        * Knowledge bases
      </Accordion>
    </AccordionGroup>

    <Note>
      This feature is specialized for FAQ pages. Most pages should keep this disabled.
    </Note>

    ### Search bar placeholder

    Placeholder text displayed in the search input.

    * Plain text
    * **Default:** "Search for 'return' or 'size'"

    <Tip>
      Use example search terms relevant to your FAQ content to guide users.
    </Tip>

    <img src="https://mintcdn.com/digifist/9_CoD90BaccrKbJG/images/theme/sahara/sections/page-banner/faq-search.png?fit=max&auto=format&n=9_CoD90BaccrKbJG&q=85&s=5132a87831d2e4a73c86453fcae410cd" alt="FAQ search configuration" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/faq-search.png" />
  </Tab>

  <Tab title="Styling">
    ### Section width

    Controls horizontal width of the banner.

    **Options:**

    * **Page** - Standard container width (default)
    * **Fluid** - Wider layout
    * **Full** - Edge-to-edge full width

    ### Color scheme

    Select color scheme for section background and text.

    <Note>
      Applies when no media is present, or when media position is "Top" or "Bottom".
    </Note>

    ### Spacing

    Control vertical spacing around the section:

    * **Spacing top** - Margin above (None, S, M, L, XL)
    * **Spacing bottom** - Margin below (None, S, M, L, XL)

    Both default to M.

    ### Section border

    Add decorative borders: None (default), Top, Bottom, Both

    <img src="https://mintcdn.com/digifist/9_CoD90BaccrKbJG/images/theme/sahara/sections/page-banner/section-border.png?fit=max&auto=format&n=9_CoD90BaccrKbJG&q=85&s=0c31b9734e8f1b97bb47400dbd1e7c7e" alt="Styling options" width="3280" height="2186" data-path="images/theme/sahara/sections/page-banner/section-border.png" />
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Template defaults" icon="wand-magic">
    Enable "Show default description" to automatically pull content from pages/collections/products/blogs.
  </Card>

  <Card title="Mobile-specific media" icon="mobile-screen">
    Always provide portrait-oriented mobile images for optimal vertical screen display.
  </Card>

  <Card title="Height balance" icon="ruler-vertical">
    Use 50svh height for most pages. Reserve 100svh for homepage or major campaigns.
  </Card>

  <Card title="Transparent header" icon="layer-group">
    Enable only with background media and ensure sufficient text-to-image contrast.
  </Card>

  <Card title="Breadcrumb navigation" icon="chevron-right">
    Keep breadcrumbs enabled for SEO benefits and improved user navigation.
  </Card>

  <Card title="Desktop descriptions only" icon="desktop">
    Hide descriptions on mobile (default) to conserve vertical space on small screens.
  </Card>

  <Card title="FAQ search targeting" icon="bullseye">
    Only enable FAQ search on actual FAQ or help pages—not general pages.
  </Card>

  <Card title="Collection menus" icon="sitemap">
    Use page menu for collection subcategory filtering or related page navigation.
  </Card>
</CardGroup>

## Common use cases

<AccordionGroup>
  <Accordion title="Collection page header" icon="layer-group">
    Enable default description. Background media position. 50svh height. Upload collection banner image (desktop 1920×600px, mobile 800×1000px). Page menu with subcollections. Breadcrumbs enabled. Center alignment.
  </Accordion>

  <Accordion title="Product page banner" icon="tag">
    Show default description (desktop only). Background media with product lifestyle image. Auto height. Breadcrumbs enabled. No page menu. Center content position and alignment.
  </Accordion>

  <Accordion title="FAQ page with search" icon="circle-question">
    Custom title: "How can we help?". Enable FAQ search bar. Placeholder: "Search for 'shipping' or 'returns'". No media or background color scheme only. Auto height. Center alignment.
  </Accordion>

  <Accordion title="About page hero" icon="users">
    Custom title and content. Background media 100svh height. Transparent header enabled. Team photo background (desktop 1920×1080px, mobile 800×1200px). Bottom content position for readability.
  </Accordion>

  <Accordion title="Blog landing banner" icon="newspaper">
    Default blog title and description. Top media position. Auto height. Blog featured image (16:9 aspect). Breadcrumbs enabled. No page menu. Standard page width.
  </Accordion>
</AccordionGroup>

## Related sections

<CardGroup cols={2}>
  <Card title="Hero banner" icon="panorama" href="/themes/sahara/sections/hero-banner">
    Multi-slide carousel banners with slideshow
  </Card>

  <Card title="Full width banner" icon="expand" href="/themes/sahara/sections/full-width-banner">
    Edge-to-edge banners with block-based content
  </Card>
</CardGroup>