> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Global Search Element

# Getting Started

The **Global Search** feature enables users to easily search through your site's **custom collections**. This guide will walk you through the process of **adding and customizing** the search bar on your Dorik CMS site.


> **Note**: The Global Search feature is only available on **CMS** sites.

## Add a Search Bar

To add a search bar to your Dorik site, follow these steps:
* Add a new section and container to the page where you want the search bar to appear.

![Dorik Global Search Element](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/global-search_4a5fvt.gif)
* Click on the + icon to add a new element to your container.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_5wev2s.png)

* In the Elements tab, scroll down to the CMS Elements section and look for the Global Search element.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_dsrm5w.png)

* That’s it — the Global Search bar is now added to your page.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_hbguaa.png)


---

## Customize the Search Bar
The Global Search element comes with a variety of styling options, allowing you to match it to your site’s design. Here's how you can customize it:

* Select the search bar on your page to open its editor panel.


![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/customizing-search-bar_1t74tkd.gif)

* Here, you will get the `Search Style` Options to style the search input and icon:
* **Icon customization**: Icon, Size, Color, Stroke

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_1b1egu.png)


* Icon wrapper Customization: Width, Height, Border Width, Color, Border Radius, Alignment, and Background.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_1p9fihy.png)

---


# Search Modal Functionality

The **Search Modal** dynamically displays relevant results as users type. Clicking a result will redirect users to the corresponding page. You also have full control over the modal’s appearance.


### How to customize the modal

* A new accordion tab called `Modal Style` will be added below the `Search Style` in the editor.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_62po8u.png)


* A toggle option called `Preview` will be there so that the user can view the preview while customizing the modal style.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_1uaz878.png)

> **The preview modal will show some dummy search results, both on the builder and the preview**



### Users can customize the modal as needed

* **Modal customization:** Width, Wadding, Border, Border-Radius, and border color.


![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/modal-customization_2dzjj5.gif)


* **Search Input:** Edit Placeholder Text, Height, Text Size, Color.


![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/search-elem_ae8ztr.gif)

* **Search Icon:** Add a custom icon, and adjust its size and stroke width.


![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/search-icon_8b2xew.gif)

* **Background Color:** Customize the modal’s background using a solid color or gradient.


![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/background-color_1imvsnw.gif)


---


# How to Customize the Modal List Style

### Users can customize the list style of the model
* Margin, Padding
* **Title:** Font size, font family, color, line height, padding, margin
* **Slug:** Font size, font family, color, line height, padding, margin


${youtube}[Dorik Global Search Element Overview](F1woRswtWX4)



---