Search Page
The Search Page provides a powerful, customizable search experience for your customers.
It features a prominent search bar, quick search suggestions, and a flexible results display that can show products, articles, and pages in a responsive grid layout.
Key Features
- Prominent search input with customizable styling
- Predictive search capabilities
- Quick search term suggestions
- Filterable and sortable search results
- Responsive grid layout for results
- Support for product, article, and page results
- Pagination with "load more" functionality
- Compatible with product siblings/swatches feature
Search Form
The search form appears at the top of the page and includes:
- Large search input field
- Customizable search button
- Optional quick search terms for popular searches
- Predictive search dropdown (when enabled in theme settings)
Add 3-5 popular search terms as clickable buttons to help customers discover your most important products or categories quickly.
Settings Guide
Page Title Settings
| Setting | Description | Options |
|---|---|---|
| Title size | Controls the size of the search results title | XS to 7XL (responsive options available) |
| Title alignment | Sets the horizontal alignment of the title | Left, Center, Right |
Filter Settings
| Setting | Description | Options |
|---|---|---|
| Show product filter | Toggles the display of product filtering options | On/Off |
| Show sort filter | Toggles the display of sorting options | On/Off |
| Enable sticky positioning | Makes filters stick to the top when scrolling | On/Off |
| Filter alignment | Sets the horizontal alignment of filters | Left, Center, Right |
| Filter Groups Default State | Controls how filter groups initially appear | First Group Open, All Groups Open, No Groups Open |
Inner Grid Spacing
| Setting | Description | Options |
|---|---|---|
| Horizontal spacing | Controls the horizontal gap between results | 0-100px |
| Vertical spacing | Controls the vertical gap between result cards | 0-100px |
Layout Settings
| Setting | Description | Options |
|---|---|---|
| Number of columns | Sets the number of columns for desktop view | 2-6 |
| Number of columns on mobile | Sets the number of columns for mobile view | One column, Two columns |
| Products per page | Controls how many products display before pagination | 4-48 |
| Indent section | Adds indentation to the left and right edges | On/Off |
Search Button Settings
| Setting | Description | Options |
|---|---|---|
| Search button text size | Controls the size of the search button text | XS, S, Base, LG |
Search Results Display
| Setting | Description | Options |
|---|---|---|
| Show product results | Toggles the display of product results | On/Off |
| Show article results | Toggles the display of blog article results | On/Off |
| Show page results | Toggles the display of page results | On/Off |
| Message text size | Controls the size of message prompts | Small, Medium, Large, Extra Large |
Enable all result types (products, articles, pages) for a comprehensive search experience. This helps customers find what they're looking for whether it's a product or information.
Quick Search Terms
You can add up to 5 quick search term blocks that appear below the search bar:
| Setting | Description |
|---|---|
| Search term | The keyword or phrase to display as a clickable button |
These quick search terms help customers discover popular products or categories with a single click.
Recommended search terms:
- Popular product categories
- Seasonal collections
- Best sellers
- Sale items
- New arrivals
Setup Instructions
Basic Setup
- Navigate to your Shopify admin → Online Store → Themes
- Click Customize on your current theme
- Select the Search page template
- Configure the main settings in the "Search Results" section
Adding Quick Search Terms
- Click "Add block"
- Select "Quick Search Term"
- Enter a popular search keyword or phrase
- Add up to 5 terms to showcase popular searches
Customizing Search Results
Configure Grid Layout:
- Set your desired number of columns (2-6 for desktop, 1-2 for mobile)
- Configure horizontal and vertical spacing between results
- Choose products per page (4-48)
Result Types:
- Enable/disable product results
- Enable/disable article results
- Enable/disable page results
Filter Settings:
- Enable/disable product filtering and sorting
- Set filter alignment and default state
- Toggle sticky positioning
Best Practices
Search Experience
- Keep the search input prominent and easy to find
- Add 3-5 quick search terms for popular categories
- Use clear, descriptive language for quick search terms
- Test search functionality with common customer queries
Results Layout
- Use 3-4 columns for optimal readability
- Maintain consistent spacing (10-20px recommended)
- Test layout on mobile, tablet, and desktop
- Ensure touch targets are large enough on mobile
Content Strategy
- Enable all result types (products, articles, pages) for comprehensive search
- Ensure your products have descriptive titles and tags for better search results
- Consider showing fewer products per page (16-24) for faster loading
- Use SEO-friendly product descriptions with relevant keywords
Filtering
- Enable sorting to help users find most relevant results
- Consider setting "No Groups Open" for filter groups to save space
- Position filters according to your site's overall design pattern
- Test filter functionality with various search terms
Visual Consistency
- Match search button text size with your site's button styling
- Align title and filter positioning with your collection pages
- Use consistent message text size for no-results states
- Maintain brand colors and typography
Predictive search is controlled in Theme Settings → Search. If disabled there, the search dropdown won't appear regardless of page settings.
Troubleshooting
Predictive search not working:
- Verify predictive search is enabled in Theme Settings → Search
- Check browser console for JavaScript errors
- Clear browser cache and test again
Missing product results:
- Check that products are published and searchable
- Verify products have titles and descriptions
- Ensure inventory is available
Article/page results not appearing:
- Ensure you've enabled these result types in settings
- Check that articles/pages are published
- Verify content contains searchable text
Filter options not showing:
- Verify your products have tags or other filterable attributes
- Check that "Show product filter" is enabled
- Ensure products in results have filterable properties
Mobile layout issues:
- Test on multiple devices and adjust column settings as needed
- Verify spacing works on small screens
- Check that search input is easily accessible
Search results are powered by Shopify's search functionality. Improve results by using descriptive product titles, detailed descriptions, and relevant tags.
Integration with Other Features
The search page works seamlessly with other Label One theme features:
- Product Siblings: Color swatches will appear on product cards in search results
- Product Badges: Sale, sold-out, and other badges will display on product results
- Quick Add to Cart: When enabled, appears on product cards in search results
- Filtering System: Uses the same filtering system as collection pages
Search pages typically aren't indexed by search engines, but improving your site search can reduce bounce rates and improve user experience, which indirectly benefits SEO.