# Search results

{% hint style="info" %}

#### 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
  {% endhint %}

#### 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 |