# Search

### Search

#### **Enable search**

Activate the option to display the Search icon or Search bar in the Header. To display additional settings in a section, this option must be active.

{% hint style="success" %}
The menu type of the "Icons menu" determines whether to display the Search icon or Search bar in the Header. To change the menu type, navigate to the *Header ->* [*<mark style="color:blue;">Icons menu</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#icons-menu).
{% endhint %}

The theme provides several approaches to the Search configurations based on the "[<mark style="color:blue;">Type</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#type)" selected for the desktop and the [<mark style="color:blue;">search position</mark>](#position-on-mobile-devices) on mobile:

**Search icon**

{% hint style="success" %}
**Tip:** The header type you chose in *Theme settings ->* [*<mark style="color:blue;">Header</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/header) determines the position of the magnifying glass icon for the Search. It will be displayed either to the left or right of the Logo on desktop view.
{% endhint %}

By enabling the Search feature in the current section, the Search icon will be displayed in the Header for the:

* "[<mark style="color:blue;">Inline</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#icons-menu)" desktop menu type.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FTHoBGyGHtOTeTLHxbt4x%2Fsearch_inline%20type.png?alt=media&#x26;token=801a98fa-da8f-422d-a6c0-70bb28740af0" alt=""><figcaption></figcaption></figure>

* "[<mark style="color:blue;">Drawer</mark>](#position-on-mobile-devices)" option on mobile.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FtXCTmknJEtXFMtAXAsBI%2Fsearch_mobile.png?alt=media&#x26;token=caa623f4-a406-447c-b90a-92d0461a2609" alt=""><figcaption></figcaption></figure>

**Search popup**

{% hint style="warning" %}
**Note!** The "[<mark style="color:blue;">Search popup</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/search-popup)" section is required to enable the predictive search popup for the "[<mark style="color:blue;">Inline</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#icons-menu)" menu on the desktop and the "[<mark style="color:blue;">Drawer</mark>](#position-on-mobile-devices)" option on mobile. Otherwise, visitors will be redirected to the Search page when hitting the Search icon.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FpuMdkZycZz0awps9WKv6%2Fsearch_popup.png?alt=media&#x26;token=8c8206b3-bf9e-4d7c-9e64-c1f13c2a6a0d" alt=""><figcaption></figcaption></figure>

**Search bar**

By default, the Search bar is activated for the "[<mark style="color:blue;">Popup</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#icons-menu)" desktop menu type and "[<mark style="color:blue;">Header</mark>](#position-on-mobile-devices)" position on mobile.

#### Position on mobile devices

Use one of the options in the **"Position on mobile devices"** picker to change the Search appearance on mobile:

* **"Header"**. If you select the current option, the Search bar will appear beneath the Header.
* **"Drawer"**. The Search icon will be placed within the Header using this option.

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FREKdeH31sW1ofwsN7trf%2Fsearch%20position_header.png?alt=media&#x26;token=b3f78a3c-037e-4499-b5c6-391ddacae46d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FDXo6Iff2CpPhKwc7rV47%2Fsearch%20position_drawer.png?alt=media&#x26;token=80721644-8a7d-47f3-bff4-04f53802b5e0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Product suggestions**

**Enable 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. 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**

To display a product vendor above the product title in the pop-up, enable the option.

**Show price**

Tick the checkbox to display the product price.

In the following examples, you can view how the settings might display on desktop and mobile:

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FjJ2hUeiFzYF0U9MYxLLe%2Fsearch_suggestions.png?alt=media&#x26;token=4375dd5e-c327-4ca4-a12a-79653e77b48a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FRFxCIii7LgpdowmVxuuM%2Fsearch_suggestions%20mobile.png?alt=media&#x26;token=7c0fade4-757d-4ffd-a5ab-b25e6b09dc1b" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Categories

{% hint style="info" %}
Ensure to use the [<mark style="color:blue;">Icons menu</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#icons-menu) with the "Popup" menu type in the "Header" section to operate the following functionality.
{% endhint %}

The "All Categories" search drop-down list can be useful while searching for the desired product within the selected product category.

**Enable categories select**

Activate the option to display the "All categories" button next to the Search bar. By activating the option, the following settings will be shown:

In the **"Category"** picker, decide whether to assign the suggested category to the product type or vendor.

The list of predefined product categories can be set using the **"Filters"** input field. Specify the list of categories using commas.

Eg: FusionGlobe, HorizonX, NexusWorks, QuantumTech, StellarTech, TechSphere.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FDRC3C2HJtoQ0nxYwrGNe%2Fsearch_categories.png?alt=media&#x26;token=5b5fd867-a748-4f70-99c5-afe654de1a1b" alt=""><figcaption></figcaption></figure>

#### How to edit the text of the button?

{% hint style="success" %}
**Tip:** The text of the "All categories" button can be edited in your *Shopify admin -> Edit default theme content -> Theme content*.
{% endhint %}

* Press the dotted \[...] button in the top left corner to navigate to Theme content:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FeDiPQFBzaPy8GXV5yiMp%2Fedit%20content_editor.png?alt=media&#x26;token=2b58b23f-d946-4a0c-8169-72686d08f70c" alt=""><figcaption></figcaption></figure>

* Then, choose the tab **"General"** and scroll down to the search settings:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FrQJq47po3CdUH334tvrV%2Fcategories_edit%20text.png?alt=media&#x26;token=6ae84fdb-7cd1-434f-8be0-d3848f7ff651" alt=""><figcaption></figcaption></figure>