Search Page Template

The search page displays search results when customers search for products, articles, or pages. It includes a search form, filtering options, sorting, and displays results in a grid layout similar to collection pages.

Overview

The search page shows product search results in a customizable grid with filtering and sorting options. Customers can search for products, filter results by various criteria, sort results, and navigate through multiple pages of results. The page automatically searches products by default.

Where to Use

The search page template (search.json) is automatically used when customers perform a search. It's accessed when:

  • Customers use the search bar in header/navigation
  • Customers visit /search with a search query
  • Customers click search links

Access the page:

  • Search bar in header/navigation
  • Direct URL: /search?q=search-term
  • Search modal (if implemented)
  • Automatic redirect from search forms

Settings

Layout

Columns on Desktop

  • What it does: Number of product columns on desktop screens (1024px+)
  • Range: 1-6 columns
  • Default: 4 columns
  • Tip:
    • 1-2 columns: Large product cards, premium feel
    • 3-4 columns: Balanced, good for most stores (recommended)
    • 5-6 columns: Dense grid, many products visible

Columns on Tablet

  • What it does: Number of product columns on tablet screens (768px-1023px)
  • Options: 1, 2, 3 columns
  • Default: 2 columns
  • Tip:
    • 1 column: Larger cards, easier to see
    • 2 columns: Balanced, good default (recommended)
    • 3 columns: Dense grid, more products visible

Columns on Mobile

  • What it does: Number of product columns on mobile screens (<768px)
  • Options: 1, 2 columns
  • Default: 2 columns
  • Tip:
    • 1 column: Large cards, easy to view
    • 2 columns: Balanced, most common (recommended)

Facets & Filtering

Show Facets

  • What it does: Enables product filtering by price, availability, product type, vendor, and other criteria
  • Default: Enabled (true)
  • Tip:
    • Enable for better search experience
    • Helps customers narrow down results
    • Can be disabled for simple search

Show Sorting

  • What it does: Allows customers to sort search results (price, name, newest, etc.)
  • Default: Enabled (true)
  • Tip:
    • Essential for search results
    • Helps customers find products quickly
    • Can be disabled if not needed

Show Product Count

  • What it does: Displays the number of search results found
  • Default: Enabled (true)
  • Tip:
    • Shows "X results for 'search term'"
    • Helps customers understand result count
    • Can be hidden for cleaner look

Facets Layout

  • What it does: Controls where filters appear on the page
  • Options:
    • Left Sidebar: Filters appear in a left sidebar (default)
    • Top Horizontal: Filters appear above products in a horizontal bar
  • Default: Left Sidebar
  • Tip:
    • Sidebar: Better for many filters, more space, traditional e-commerce
    • Top: Better for fewer filters, more product space, modern look

Show Mobile Facets

  • What it does: Enables filtering on mobile devices
  • Default: Enabled (true)
  • Tip:
    • Essential for mobile search
    • Usually opens as a drawer/modal on mobile
    • Can be disabled if not needed

Results

Results Per Page

  • What it does: Controls how many search results display before pagination
  • Range: 12-48 results
  • Step: 4 results
  • Default: 20 results
  • Tip:
    • 12-16: Fewer results, faster loading, less scrolling
    • 20: Balanced, good default (recommended)
    • 24-32: More results, more scrolling, fewer pages
    • 36-48: Maximum results, best for large result sets

Pagination

Show Pagination

  • What it does: Displays pagination controls when there are multiple pages
  • Default: Enabled (true)
  • Tip:
    • Essential for searches with many results
    • Can be disabled for infinite scroll (if implemented)
    • Only shows when results exceed results per page

Pagination Style

  • What it does: Controls how pagination controls appear
  • Options:
    • Numbers: Page numbers (1, 2, 3, etc.) - default
    • Arrows Only: Previous/Next arrows only
    • Dots: Dot indicators for each page
    • Minimal: Minimal pagination style
  • Default: Numbers
  • Tip:
    • Numbers: Most common, easy to navigate
    • Arrows: Clean, simple
    • Dots: Visual, modern
    • Minimal: Subtle, minimal design

Show Pagination Info

  • What it does: Displays pagination information (e.g., "Page 1 of 5")
  • Default: Enabled (true)
  • Tip:
    • Helps customers understand their position
    • Can be hidden for cleaner look
    • Usually shows "Showing X-Y of Z results"

Padding

Top Padding

  • What it does: Space above the search content
  • Range: 0-100px
  • Default: 40px
  • Tip: More padding creates more breathing room from header/navigation

Bottom Padding

  • What it does: Space below the search content
  • Range: 0-100px
  • Default: 40px
  • Tip: Adjust to balance spacing with footer

How It Works

Page Structure

The search page displays in this order:

  1. Search Header: Search title and search form
  2. Facets/Filters: Filtering and sorting options (if enabled)
  3. Results Count: Number of results found (if enabled)
  4. Product Grid: Search results displayed in a grid layout
  5. Pagination: Page navigation (if multiple pages)

Search Form

The search form includes:

  • Search Input: Text field for entering search terms
  • Search Button: Submit button to perform search
  • Hidden Type Parameter: Automatically set to "product" (searches products only)
  • Placeholder Text: "Search" or custom placeholder

Search Results

Search results show:

  • Products Only: By default, searches only products
  • Product Cards: Each result displayed as a product card
  • Grid Layout: Responsive grid layout
  • Filtering: Can be filtered by facets
  • Sorting: Can be sorted by various criteria

Facets Layout

Sidebar Layout

  • Filters appear in a left sidebar
  • Products grid takes remaining space on the right
  • Best for many filters or detailed filtering
  • Traditional e-commerce layout

Top Horizontal Layout

  • Filters appear above products in a horizontal bar
  • Products grid takes full width below
  • Best for fewer filters or modern design
  • More space for products

Filtering & Sorting

Available Filters (when facets enabled):

  • Price range
  • Product availability
  • Product type
  • Vendor
  • Tags
  • Custom filters (if configured)

Sorting Options (when sorting enabled):

  • Best selling
  • Title (A-Z, Z-A)
  • Price (Low to High, High to Low)
  • Newest
  • Oldest

Pagination

When results exceed the "Results per page" setting:

  • Pagination controls appear
  • Customers can navigate between pages
  • Shows current page and total pages
  • Maintains filters and sorting when navigating

No Results

When no results are found:

  • Shows "No results" message
  • Displays search terms used
  • Suggests trying different search terms
  • Can include helpful suggestions

Common Use Cases

Standard Search

  • Layout: Sidebar facets, 4 columns desktop, 20 results per page
  • Settings: Facets enabled, sorting enabled, product count shown
  • Use Case: Most stores with standard search needs

Simple Search

  • Layout: No facets, 3 columns desktop, 16 results per page
  • Settings: Facets disabled, sorting enabled
  • Use Case: Simple search without filtering

Advanced Search

  • Layout: Sidebar facets, 4 columns desktop, 24 results per page
  • Settings: All filtering enabled, extensive options
  • Use Case: Stores with many products requiring detailed filtering

Mobile-Focused Search

  • Layout: Top facets, 2 columns desktop, 16 results per page
  • Settings: Mobile facets enabled, simplified layout
  • Use Case: Mobile-first stores

Tips & Best Practices

✅ Do's

  • Enable facets: Help customers narrow down results
  • Show sorting: Essential for search results
  • Display product count: Help customers understand results
  • Use appropriate columns: Balance visibility with readability
  • Test search functionality: Ensure search works correctly
  • Optimize for mobile: Most searches happen on mobile
  • Show pagination: Essential for large result sets
  • Use clear search form: Make it easy to search
  • Handle no results: Provide helpful no-results messaging

❌ Don'ts

  • Don't disable facets unnecessarily: Makes it hard to find products
  • Don't use too many columns on mobile: Keep mobile readable
  • Don't forget mobile facets: Essential for mobile search
  • Don't hide product count: Customers want to know result count
  • Don't skip pagination: Essential for large result sets
  • Don't use inconsistent grid layouts: Maintain visual consistency
  • Don't forget no-results handling: Help customers when no results found
  • Don't ignore search analytics: Monitor search terms and results

Facets Layout Guide

Sidebar Layout

When to Use:

  • ✅ Searches with many filters
  • ✅ Detailed filtering needed
  • ✅ Traditional e-commerce feel
  • ✅ More filter options

Benefits:

  • More space for filters
  • Better organization
  • Traditional, familiar layout
  • Can show more filter options

Considerations:

  • Takes up horizontal space
  • Products grid is narrower
  • May need scrolling on mobile

Top Horizontal Layout

When to Use:

  • ✅ Searches with fewer filters
  • ✅ Modern, clean design
  • ✅ More space for products
  • ✅ Simplified filtering

Benefits:

  • More space for products
  • Modern, clean appearance
  • Full-width product grid
  • Better for visual products

Considerations:

  • Less space for filters
  • May need horizontal scrolling
  • Fewer visible filter options

Grid Columns Guide

Desktop Columns

2 Columns:

  • Large product cards
  • Premium, high-end feel
  • Best for visual products
  • More space per product

3 Columns:

  • Balanced layout
  • Good for most products
  • Comfortable spacing
  • Professional appearance

4 Columns (Recommended):

  • Standard e-commerce layout
  • Most common choice
  • Good balance
  • Works for most products

5-6 Columns:

  • Dense product grid
  • Many products visible
  • Best for large result sets
  • Smaller product cards

Tablet Columns

1 Column:

  • Larger cards
  • Easier to see details
  • Better for visual products

2 Columns (Recommended):

  • Balanced layout
  • Good default
  • Works for most products

3 Columns:

  • Dense grid
  • More products visible
  • Smaller cards

Mobile Columns

1 Column:

  • Large product cards
  • Easy to view
  • Best for detailed products
  • More scrolling

2 Columns (Recommended):

  • Balanced layout
  • Most common
  • Good default
  • Comfortable viewing

Results Per Page Guide

12 Results

  • Best for: Fast loading, less scrolling, focused browsing
  • Benefits: Fast loading, less scrolling
  • Considerations: More pagination clicks, fewer results visible

16 Results

  • Best for: Balanced experience, reasonable loading
  • Benefits: Good balance
  • Considerations: Standard choice

20 Results (Recommended)

  • Best for: Most searches, standard display
  • Benefits: Good balance, standard choice
  • Considerations: Works for most stores

24-32 Results

  • Best for: Large result sets, more results visible
  • Benefits: More results, less pagination
  • Considerations: Slower loading, more scrolling

36-48 Results

  • Best for: Maximum results, large result sets
  • Benefits: Maximum results per page
  • Considerations: Slower loading, long scrolling, may impact performance

Pagination Best Practices

Pagination Style

Numbers:

  • Most common and familiar
  • Easy to navigate
  • Shows exact page numbers
  • Best for most searches

Arrows Only:

  • Clean, minimal design
  • Simple navigation
  • Less visual clutter
  • Best for simple searches

Dots:

  • Visual, modern design
  • Good for few pages
  • Less informative
  • Best for visual searches

Minimal:

  • Subtle, minimal design
  • Less prominent
  • Clean appearance
  • Best for curated searches

Search Functionality

What Gets Searched

By Default:

  • Products Only: Search form automatically searches products
  • Product Fields: Title, description, tags, vendor, product type
  • Automatic: No configuration needed

Search Fields:

  • Product title
  • Product description
  • Product tags
  • Vendor name
  • Product type
  • Variant titles
  • SKU (if enabled)

Search Behavior

  • Automatic: Searches products when form submitted
  • Type Parameter: Automatically set to "product"
  • Results: Only shows product results
  • Filtering: Can filter results after search
  • Sorting: Can sort results after search

No Results Handling

When no results found:

  • Shows "No results" message
  • Displays search terms
  • Suggests trying different terms
  • Can include helpful tips

Examples

Example 1: Standard Search

Settings:

  • Desktop Columns: 4
  • Tablet Columns: 2
  • Mobile Columns: 2
  • Show Facets: Enabled
  • Facets Layout: Sidebar
  • Results Per Page: 20
  • Pagination: Numbers
  • Padding: 40px top/bottom

Result: Standard search page with sidebar filters, 4-column grid, and pagination

Example 2: Simple Search

Settings:

  • Desktop Columns: 3
  • Tablet Columns: 2
  • Mobile Columns: 2
  • Show Facets: Disabled
  • Show Sorting: Enabled
  • Results Per Page: 16
  • Pagination: Numbers
  • Padding: 40px top/bottom

Result: Simple search without filters, sorting only

Example 3: Advanced Search

Settings:

  • Desktop Columns: 4
  • Tablet Columns: 3
  • Mobile Columns: 2
  • Show Facets: Enabled
  • Facets Layout: Sidebar
  • Results Per Page: 24
  • Pagination: Numbers
  • Padding: 40px top/bottom

Result: Advanced search with extensive filtering options

Example 4: Mobile-Focused Search

Settings:

  • Desktop Columns: 3
  • Tablet Columns: 2
  • Mobile Columns: 1
  • Show Facets: Enabled
  • Facets Layout: Top
  • Results Per Page: 16
  • Pagination: Arrows
  • Padding: 40px top/bottom

Result: Mobile-optimized search with top filters and single column mobile

Troubleshooting

Search Not Working

  • Check: Verify search form is properly configured
  • Check: Ensure products are published and searchable
  • Check: Test with different search terms
  • Check: Verify search template is assigned

No Results Showing

  • Check: Verify search was performed (check URL for ?q=)
  • Check: Ensure products match search terms
  • Check: Test with different search terms
  • Check: Verify products are published

Facets Not Working

  • Check: Verify "Show Facets" is enabled
  • Check: Ensure search has filterable attributes
  • Check: Test filters in preview
  • Check: Check browser console for errors

Pagination Not Showing

  • Check: Verify "Show Pagination" is enabled
  • Check: Ensure results exceed "Results per page" setting
  • Check: Test with search that has many results
  • Check: Verify pagination style is set correctly

Grid Columns Not Working

  • Check: Verify column settings are set correctly
  • Check: Test on different screen sizes
  • Check: Clear browser cache
  • Check: Verify CSS is loading correctly

Sorting Not Working

  • Check: Verify "Show Sorting" is enabled
  • Check: Test sorting options
  • Check: Check browser console for errors
  • Check: Ensure search has results

Mobile Facets Not Showing

  • Check: Verify "Show Mobile Facets" is enabled
  • Check: Test on actual mobile device or responsive mode
  • Check: Check mobile menu/drawer functionality
  • Check: Verify JavaScript is loading

Search Optimization

Improving Search Results

  • Product Titles: Use clear, descriptive titles
  • Product Descriptions: Include relevant keywords
  • Product Tags: Add relevant tags
  • Vendor Names: Use consistent vendor names
  • Product Types: Use consistent product types

Search Analytics

Monitor search performance:

  • Popular Searches: See what customers search for
  • No Results: Identify searches with no results
  • Search Terms: Track search terms
  • Conversion: Track search-to-purchase rate

Related Templates

  • Collection Page - Similar layout for browsing products
  • Product Page - Individual product details
  • Home Page - Can include search functionality

Related Sections

  • Search Section - Search results display (this section)
  • Search Modal - Search overlay/modal
  • Header Search - Search bar in header

Next Steps: