Custom Design Your Search Client

SearchUnify offers a bare-bones HTML and CSS editor. You can use it to customize your search client to the last HTML element. The editor can be used to customize three components: 

  1. Search Results Page. An HTML page with its own web address. It hosts search results. Each searcher is redirected to this page.
  2. Search Box. An HTML section which is inserted in the header of a website.
  3. No Results Found. A collection of div elements which control the messages displayed on Search Results Page when a query fails to produce any result.

Warning

  • Take a back-up of the current code in Designer. There is no reset option. A mangled code will be hard to undo.
  • Do not edit any AngularJS directive. Even a small change can break a component. Many directives start with an -ng.
  • Avoid writing your own classes. Instead of changing the CSS of an existing class (such as su__filter-title) write your own class (such as mycompany__filter-title) and insert it into a relevant <div> element.
  • Don't delete existing classes or IDs.

Find Elements for Editing

  1. Open a search client and press Ctrl+Shift+C if you are using Chrome on Windows.
  2. Hover your cursor over any part to view the HTML classes controlling it. In the next image, the classes are: .su_w-100, .su__py-4, .su__px-sm-1, .su__search_section, and .su__bg-blue-grd.

Using Designer

  1. Go to Search Clients and open a search client for editing.

  2. Navigate to Designer.

  3. Find those classes in Search Results Page, Search Box, or Not Results Found.

  4. You can now edit components by jumping to the CSS window and:
    • Editing existing classes (not recommended) or
    • Creating new CSS classes and inserting them into their relevant HTML element (recommended).

  5. Click Update.

Last updatedFriday, September 25, 2020