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:

1. Search Drawer - A slide-out search drawer with predictive search functionality.

2. Search Banner - A prominent search field on a customizable background.

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