> ## 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 Search Banner

> Search results page banner displaying search query

The Main Search Banner section displays a simple header banner at the top of search results pages, automatically showing the search query and basic page context. This minimal banner provides search context without distracting from search results below. Use this section on search results pages to give customers clear confirmation of their search query while maintaining focus on the results themselves.

## What this section controls

This section controls search page headers with the following capabilities:

* Automatic search query display
* SEO-optimized H1 heading
* Dynamic content from URL search parameter
* Color scheme selection
* Top and bottom spacing controls (0-6 scale)
* Border options (None, Top, Bottom, Both)
* Template-only section (search results pages)
* Minimal design for results focus

***

## Template Settings

<AccordionGroup>
  <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>

***

## Banner Content

The banner automatically displays:

<AccordionGroup>
  <Accordion title="Search Results Title" icon="h1">
    * Displays "Search results for \[query]" or similar
    * H1 heading (SEO-optimized)
    * Automatically pulls search query from URL
    * Updates dynamically based on search term

    **Example:**

    * User searches "blue shoes"
    * Banner shows: "Search results for 'blue shoes'"
  </Accordion>

  <Accordion title="Result Count" icon="hashtag">
    Some themes display:

    * Number of results found
    * Format: "120 results"
    * Updates with filters/sorting
    * Helps set expectations
  </Accordion>

  <Accordion title="Search Query Highlight" icon="highlighter">
    * Search term displayed prominently
    * Often in quotes or bold
    * Confirms what user searched for
    * Useful if arriving from external link
  </Accordion>
</AccordionGroup>

***

## Search Page Structure

<CardGroup cols={1}>
  <Card title="Typical Search Page Layout" icon="layer-group">
    1. **Main Search Banner** (this section) - displays search query
    2. **Main Search** - displays search results grid with filters/sorting
    3. Optional sections below (featured collections, recently viewed, etc.)
  </Card>
</CardGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Keep it simple" icon="minimize">
    This banner should be minimal with clear search query display, optional result count, and no distractions to maintain focus on results below. The banner's job is orientation, not conversion, so keep it simple for quick user scanning.
  </Card>

  <Card title="Color scheme selection" icon="palette">
    Choose a scheme that contrasts with main content without overwhelming results, maintaining readability while matching your overall site aesthetic. A common approach uses light neutral backgrounds (gray, beige) with dark text for subtle separation from content.
  </Card>

  <Card title="Spacing strategy" icon="arrows-up-down">
    Default spacing (2,2) works for most cases, but reduce top spacing if a search bar appears above or increase bottom spacing for visual separation. Always test your mobile view as spacing may need adjustment for smaller screens.
  </Card>
</CardGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Minimal Banner" icon="rectangle">
    Default spacing, neutral color scheme, simple "Search results for \[query]" text
  </Card>

  <Card title="Prominent Banner" icon="square">
    Increased spacing (4,4), contrasting color scheme, larger heading size
  </Card>

  <Card title="Bordered Banner" icon="border-all">
    Bottom border to separate from results, standard spacing
  </Card>
</CardGroup>

***

## Related Templates

<CardGroup cols={2}>
  <Card title="Main Search" icon="magnifying-glass">
    Search results grid with filters and sorting
  </Card>

  <Card title="Predictive Search" icon="wand-magic-sparkles">
    Instant search suggestions dropdown in header
  </Card>

  <Card title="Search Settings" icon="gear">
    Shopify search configuration and filters
  </Card>
</CardGroup>

***

## SEO Considerations

<AccordionGroup>
  <Accordion title="Search Results SEO" icon="magnifying-glass">
    **Search Page SEO:**

    * Title uses H1 tag (SEO-friendly)
    * Search term appears in page title
    * URL includes search query (`/search?q=blue+shoes`)
    * Results page crawlable by search engines

    <Note>
      Search results pages are typically indexed by Google. Ensure they provide good user experience.
    </Note>
  </Accordion>

  <Accordion title="No Results Handling" icon="zero">
    **When No Results Found:**

    * Banner still shows search query
    * Main search section displays "No results" message
    * Suggests alternative searches
    * Shows popular products or collections
    * Provides search refinement options

    <Tip>
      Good no-results experience prevents bounces. Suggest related products or alternate search terms.
    </Tip>
  </Accordion>
</AccordionGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Banner Not Showing" icon="eye-slash">
    **Check:**

    * Template assigned to search page
    * Section not hidden or deleted
    * Color scheme visible (not white text on white)
    * Page cache cleared
  </Accordion>

  <Accordion title="Wrong Search Query Displayed" icon="text-slash">
    **Verify:**

    * URL contains correct search parameter (`?q=`)
    * No URL redirect issues
    * Theme code pulling correct variable
    * Browser cache cleared
  </Accordion>

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

    * Choose color scheme with better contrast
    * Ensure text color contrasts with background
    * Test on actual browser (not just preview)
    * Check theme CSS (may require developer)
  </Accordion>

  <Accordion title="Spacing Issues" icon="ruler">
    **Adjust:**

    * Increase/decrease top spacing (0-6)
    * Increase/decrease bottom spacing (0-6)
    * Test mobile appearance
    * Verify borders not causing overlap
  </Accordion>
</AccordionGroup>

***

## Quick Summary

* **Purpose:** Simple banner displaying search query on results page
* **Content:** Automatically shows "Search results for \[query]"
* **Settings:** Color scheme, spacing (top/bottom), borders
* **Customization:** Minimal (content is automatic, only styling controlled)
* **Appears On:** Search results page (`/search`)
* **Works With:** Main Search section (displays actual results)

<Note>
  This is a minimal banner section. The actual search results, filters, and sorting are controlled by the **Main Search** template, which appears below this banner.
</Note>