> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header-drawers/search-drawer.md).

# Search drawer

## Search

{% hint style="success" %}
Available additional blocks: "[<mark style="color:blue;">Shoppable items</mark>](/unicorn-shopify-theme/section-groups/header-drawers/search-drawer/shoppable-items.md)" and "[<mark style="color:blue;">Banners</mark>](/unicorn-shopify-theme/section-groups/header-drawers/search-drawer/banners.md)". The blocks are visible in the search drop-down before adding a search request.\
**Tip:** Press **"Add block"** to use the desired block.
{% endhint %}

#### Product suggestions

**Show product suggestions**\
This option should be enabled to display a list of available products in the pop-up below the search box after entering a search term into the search input field.\
The product suggestions work on both desktop and mobile devices.\ <mark style="color:orange;">**Note!**</mark> Predictive search is supported for specific languages. Read more about Product suggestions in the following [<mark style="color:blue;">documentation</mark>](https://shopify.dev/docs/api/ajax/reference/predictive-search#requirements-and-limitations).

By enabling the described option, the following settings will be shown:

**Show vendor**\
Enable the option to display a product vendor.

**Show price**\
Tick the checkbox to display the product price

#### Shoppable items

{% hint style="success" %}
The current sub-section contains settings to adjust the general configurations for all "[<mark style="color:blue;">Shoppable item</mark>](/unicorn-shopify-theme/section-groups/header-drawers/search-drawer/shoppable-items.md#shoppable-item)" blocks.
{% endhint %}

**Image ratio**\
Select the appropriate image aspect ratio in the drop-down: "Portrait", "Square", "Landscape", or "Circle". Works on all screen sizes. Check each image ratio [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).

**Alignment**\
Set the block's title alignment to "Left" or "Center".

**Underline links**\
Use the drop-down to decide whether to underline the title on mouse hover:

* **"Use theme settings"**. Applies configurations from *Theme settings -> Animations ->* [*<mark style="color:blue;">Hover animation</mark>*](/unicorn-shopify-theme/theme-settings/animations.md#hover-animation)*.*
* **"Enable"**. Activates the underline effect for titles on the desktop.
* **"Disable"**. Deactivates the underline effect for titles.

**Title / Title hover**\
Adjust the color of item titles.

**Icon**\
The background arrow color can be set in the current picker. The arrow appears when hovering over a banner.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/WYMREaNfly0vvrmVkJXx" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/MKqXvsVP3Msmw8iW9rv5" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}