Skip to content
Search results
Language Support
Live search is only supported in certain languages. When implementing live search functionality, be aware of the following:
- Full predictive search functionality works best with Latin-based languages (English, French, Spanish, etc.)
- Languages using non-Latin scripts (Chinese, Japanese, Arabic, etc.) may experience limited functionality
- Search results may not properly handle diacritical marks in some languages
- Right-to-left (RTL) languages are supported but may require additional styling adjustments
Types of Search Components
Our themes offer several ways to implement search functionality:
- Search Drawer - A slide-out search drawer with predictive search functionality.
- Search Banner - A prominent search field on a customizable background.
- Header Search - Simple search integration in the header section.
Common Features
- Predictive search results
- Search recommendations
- Filtering by resource type (products, collections, articles, pages)
- Customizable appearance
Performance Considerations
- Large product catalogs may experience slower search response times
- Search results are limited to a maximum number of items per category
- Mobile devices may have reduced functionality compared to desktop
- Search indexing can take up to 24 hours to reflect new content
Search Drawer Settings
| Setting | Description |
|---|---|
| Search recommendations | Add suggested search terms that appear before a user begins typing |
| Color scheme (top bar) | Choose the color scheme for the search drawer's top navigation bar |
| Border color (top bar) | Set the border color style for the top navigation area |
| Color scheme (main section) | Select the color scheme for the main search results area |
| Border color (main section) | Choose the border color style for the main search results |
| Enable second column | When enabled, displays product search results in a second column on desktop |
Search Banner Settings
| Setting | Description |
|---|---|
| Y spacing | Controls the vertical height of the banner |
| Image background desktop | Background image displayed on desktop devices |
| Image background mobile | Background image displayed on mobile devices |
| Video background | Background video to display behind the search field |
| Show entire image | When enabled, displays the entire image within the banner area |
| Show video on mobile | When enabled, displays the video background on mobile devices |
| Color scheme | Sets the background color scheme for the section |
| Text color | Controls the color of text within the section |
| Border color | Sets the color of any borders applied to the section |
| Button color | Sets the style and color of the search submit button |
| Enable gradient | Adds a gradient overlay to help text stand out against the background |
| Enable background overlay | Adds a background overlay behind the search content for better contrast |
| Border position | Controls where borders appear on the section |
| Y alignment | Controls the vertical alignment of content within the section |
| X alignment | Controls the horizontal alignment of content within the section |
| Enable margin | When enabled, adds horizontal margin to the section |
| Enable max width | When enabled, applies a maximum width to the search content |
| Visibility | Controls which devices the section appears on |
| Enable search | When enabled, displays the search input field |
Header Search Settings
| Setting | Description |
|---|---|
| Show search button | Enable or disable search functionality |
| Show search icon mobile | Choose to show search icon on mobile |
| Search color scheme | Select the color scheme for the search overlay |
| Search color border | Choose the border style for the search overlay |