Articles on: Components & Elements

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.



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

  • Click on the + icon to add a new element to your container.



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



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





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.




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




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





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.




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



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.





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




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




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







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






Updated on: 24/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!