Customize your theme

You can configure your custom theme to include the ability to suggest articles as a customer types a search term in your knowledge base, making it faster for them to find the information that they are searching for and eliminating the need to submit a support request.

To turn on this feature:

1. Go to Settings > Knowledge Base > Themes.
2. Select Edit  for the Default Theme.
3. Select the SearchHeaderWithSuggestions.jsx component and copy it in its entirety.
4. Go back to the Themes page and select Edit for the custom theme your knowledge base is using.
5. Select Add.
6. Select Component from the Theme Target drop-down menu and enter SearchHeaderWithSuggestions as the name.
   
7. Select Create.
8. Paste the file you originally copied into the new component.
9. Select your homepage.jsx file.
10. Replace your SearchHeader code block with the following:

    <SearchHeaderWithSuggestions        
            className="home-search-wrap"
            left={<h2><Snippet id="sn.kustomer.hello_how_can_we_help" /></h2>}
           org={org}
          />

    Your file should resemble the following:
    
11. Select your Form.css file.
12. Add the following code block to style the list of suggestions.

    /*
      ==============================
      Suggestion
      ==============================
    */.form-suggestion {
      width: auto;
      padding: 10px;
      margin-top: 10px;
      max-height: 200px;
      overflow-y: scroll;
      background: white;
    }.form-suggestion-article {
        margin-top: 10px;
    }.form-suggestion-article:hover {
        cursor:pointer;
      background-color: #e9eff5;
      padding: 10px;
    }.form-suggestion-article:hover a {
      color:#49a1d2;
    }.form-suggestion-label-divider {
        background-color: #e9eff5;
      height: 2px;
      width: auto;
      margin-top: 5px;
    }

    Note: If you are using a custom theme, you may want to modify this css to match your branding.

13. Select Save.

Now, whenever someone searches for a topic in your knowledge base, they will get a list of suggested articles that match their search term.