# Search popup

{% hint style="success" %}
**Tip:** If a layout does not come with the section, it can be added manually by pressing the **"Add section"** button or hovering over a space between sections to see the **"+"** icon and choosing it from the proposed list of sections.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F5PsbSHa52Hr8iVAvSfbl%2Fheader_add%20search.png?alt=media&#x26;token=d2cb384f-ff84-42a2-8ec3-e474f2d49453" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note!** Before adding this section and starting customizations, check whether the search feature is enabled in *Theme settings ->* [*<mark style="color:blue;">Search</mark>*](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/search). Turn on the **"Enable search"** option if it is currently inactive.
{% endhint %}

## Search popup

{% hint style="warning" %}
**Note!** The settings from the current section are not usable for the "[<mark style="color:blue;">Popup</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header#icons-menu)" desktop menu type and the "[<mark style="color:blue;">Header</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/search#position-on-mobile-devices)" position on mobile.
{% endhint %}

### Collection blocks

{% hint style="success" %}
The current sub-section contains settings to adjust the general configurations for all "[<mark style="color:blue;">Collection or product</mark>](#collection-or-product)" blocks.
{% endhint %}

In the **"Heading"** field, enter a section title.

Select the appropriate image aspect ratio in the **"Image ratio"** drop-down. You can use one of the options that display well on both desktop and mobile views: "Portrait", "Square", "Landscape", or "Circle". Check each image ratio [here](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#content).

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

Use the **"Link underline"** drop-down to decide whether to underline the title on mouse hover:

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

Adjust the color of titles operating **"Title"** and **"Title hover"** items.

The background color of the arrow can be set in the **"Icon"** picker. The arrow appears when hovering over the block’s image.

The next example demonstrates the title and arrow settings:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FXgmyk4k8fgMj23EIzkp5%2Fsearch%20popup_settings.png?alt=media&#x26;token=d6291607-71b2-4f46-b36b-30fcd32934bb" alt=""><figcaption></figcaption></figure>

### Banner

Title the banner section using the **"Heading"** field.

***

{% hint style="success" %}
**Tip:** Add each block by pressing the plus icon. The blocks can be used multiple times.
{% endhint %}

## Collection or product

In the following block, one can decide whether to display the list of collections or products in the section. Use one of the corresponding source selectors to place the desired content:

Select the needed collection in the **"Collection"** selector.

Add a product by using the **"Product"** selector.

Change the default link by applying a new URL from the **"Link"** source selector or add an external link to the field.

The default image can be replaced in the **"Image"** picker.

The block title will be changed once a new text is entered in the corresponding field.

Here is how the block might be displayed in the Search popup:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FPaPYk7ZkIKpadJX1gR3n%2Fsearch%20popup_block.png?alt=media&#x26;token=b253405b-47bc-4923-88eb-2b1cf26f6abb" alt=""><figcaption></figcaption></figure>

***

## Banner

### Block link

Choose the destination after pressing a banner in the **"Link"** source selector.

### Media

An image for all screen sizes can be applied by pressing the **"Select"** or **"Explore free images"** button.

To display a specific image for mobile, use the **"Mobile image"** picker.

### Media overlay

{% hint style="warning" %}
**Note!** The "Image" settings described below will only apply to the desktop mode.
{% endhint %}

Turn on the **"Enable"** option to display the related settings.

Adjust the transparency of an image color overlay using the **"Opacity"** scale, which ranges from 0 to 100%.

In the **"Type"** picker, select one of the options: "Background" or "Gradient".

By selecting the **"Background"** option, change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.

Press the **"Gradient"** option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option [here](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#image).

### Content

Use the **"Title"** input field to add text over a banner. Style your text using the formatting options at the top of the input field.

The color of the text can be changed in the **"Title"** color picker.

The background color of the arrow can be customized using the **"Icon"** color picker. The arrow becomes visible when hovering over the block's image.

In the following examples, you can view how the block might display in the Search popup:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FMTv7IHG8AABhQv9CU8cv%2Fsearch%20popup_banner.png?alt=media&#x26;token=890ccaf1-1dac-46ae-b9df-da914973c4fc" alt=""><figcaption></figcaption></figure>