Skip to main content
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

  • Select from available theme color schemes
  • Default: scheme-1
  • Affects background and text colors
  • Top Spacing: 0, 1, 2 (default), 4, or 6
  • Bottom Spacing: 0, 1, 2 (default), 4, or 6
  • None (default)
  • Top Border
  • Bottom Border
  • Both Borders
The banner automatically displays:
  • 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’”
Some themes display:
  • Number of results found
  • Format: “120 results”
  • Updates with filters/sorting
  • Helps set expectations
  • Search term displayed prominently
  • Often in quotes or bold
  • Confirms what user searched for
  • Useful if arriving from external link

​
Search Page Structure

Typical Search Page Layout

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

​
Best practices

Keep it simple

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.

Color scheme selection

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.

Spacing strategy

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.

​
Use Cases

Minimal Banner

Default spacing, neutral color scheme, simple “Search results for [query]” text

Prominent Banner

Increased spacing (4,4), contrasting color scheme, larger heading size

Bordered Banner

Bottom border to separate from results, standard spacing

Main Search

Search results grid with filters and sorting

Predictive Search

Instant search suggestions dropdown in header

Search Settings

Shopify search configuration and filters

​
SEO Considerations

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
Search results pages are typically indexed by Google. Ensure they provide good user experience.
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
Good no-results experience prevents bounces. Suggest related products or alternate search terms.

​
Troubleshooting

Verify:
  • URL contains correct search parameter (?q=)
  • No URL redirect issues
  • Theme code pulling correct variable
  • Browser cache cleared
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)
Adjust:
  • Increase/decrease top spacing (0-6)
  • Increase/decrease bottom spacing (0-6)
  • Test mobile appearance
  • Verify borders not causing overlap

​
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)
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.