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:
- Search Results Page. An HTML page with its own web address. It hosts search results. Each searcher is redirected to this page.
- Search Box. An HTML section which is inserted in the header of a website.
- No Results Found. A collection of
divelements which control the messages displayed on Search Results Page when a query fails to produce any result.
- 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
- 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
- Don't delete existing classes or IDs.
Find Elements for Editing
- Open a search client and press Ctrl+Shift+C if you are using Chrome on Windows.
- Hover your cursor over any part to view the HTML classes controlling it. In the next image, the classes are:
- Go to Search Clients and open a search client for editing.
- Navigate to Designer.
- Find those classes in Search Results Page, Search Box, or Not Results Found.
- 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).
- Click Update.
Last updated: Tuesday, June 23, 2020