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

# Search Banner

> Banner section displayed at the top of search results pages.

The Search Banner template provides a visual header for the search results page, displaying the search query and providing context for the results below.

<img src="https://mintcdn.com/digifist/Dhy7Gm5Ohv5Qse6X/images/theme/release/sections/main-search-banner/banner-overview.png?fit=max&auto=format&n=Dhy7Gm5Ohv5Qse6X&q=85&s=06807af5e6165f3026a4d0b31c854f1e" alt="Search banner overview" width="3280" height="2186" data-path="images/theme/release/sections/main-search-banner/banner-overview.png" />

## What this section controls

* Search page header area
* Search query display
* Banner layout and spacing
* Visual separation from results

## Section settings

<Tabs>
  <Tab title="Layout">
    ### Section width

    Maximum width of the search banner.

    **Available options:**

    * **max-w-page** - Standard container
    * **max-w-fluid** - Wider container

    **Default:** max-w-page

    <Tip>
      Match the section width with your main-search section for visual consistency.
    </Tip>

    ### Color scheme

    Select the color scheme for the banner.

    * **Default:** scheme-1

    <img src="https://mintcdn.com/digifist/S9kUPjhQ5Gtf_9hS/images/theme/release/sections/main-search-banner/layout.png?fit=max&auto=format&n=S9kUPjhQ5Gtf_9hS&q=85&s=b25e5bed4730458ad8134e0bc74d8b76" alt="Banner layout" width="3280" height="2186" data-path="images/theme/release/sections/main-search-banner/layout.png" />
  </Tab>

  <Tab title="Spacing">
    ### Spacing top

    Padding above the search banner.

    **Available options:**

    * **No** (0), **S** (1), **M** (2), **L** (4), **XL** (6)

    **Default:** M (2)

    ### Spacing bottom

    Padding below the search banner.

    **Available options:**

    * **No** (0), **S** (1), **M** (2), **L** (4), **XL** (6)

    **Default:** M (2)

    <Note>
      Reduce spacing to S (1) or No (0) for a more compact search page with results-first focus.
    </Note>

    <img src="https://mintcdn.com/digifist/Dhy7Gm5Ohv5Qse6X/images/theme/release/sections/main-search-banner/spacing.png?fit=max&auto=format&n=Dhy7Gm5Ohv5Qse6X&q=85&s=c16d5926dcc21ee5368cecffe96c694e" alt="Banner spacing" width="3280" height="2186" data-path="images/theme/release/sections/main-search-banner/spacing.png" />
  </Tab>
</Tabs>

## Best practices

* **Width:** Use max-w-page to match search results section
* **Spacing:** Keep minimal (S or M) to not push results down the page
* **Color scheme:** Match with main search section for cohesive design
* **Mobile:** Banner automatically optimizes for mobile screens
* **Content:** Banner typically shows "Search results for: \[query]"
* **Visibility:** Consider reducing spacing for results-focused experience

## Common use cases

* **Standard search header** - Display search query with M spacing
* **Minimal approach** - Reduce spacing to S or 0 for results-first layout
* **Promotional banner** - Use to feature sales or new arrivals above results
* **Help text** - Show search tips or popular search suggestions
* **Results context** - Display number of results and filter count
* **Compact mobile** - Reduce bottom spacing on mobile for more visible results

## Related guides

<Card title="Search Results" icon="search" href="/themes/release/sections/main-search">
  Configure the main search results section
</Card>

<Card title="Predictive Search" icon="magnifying-glass" href="/themes/release/sections/predictive-search">
  Set up predictive search dropdown
</Card>