Search templates

What are Search templates?

Cludo offers two global templates that can easily be implemented onto the website. Currently, two global templates are supported:

• Inline: Displays the results on a dedicated search result page that the user is directed to upon searching.
• Overlay: Displays the results in an overlay that will appear on any page upon searching.

Typically, a search template is split into two components:

1. An element for initiating a search, such as a search input or a link to the search.
2. An element for displaying the results. Also commonly referred to as a SERP (Search Engine Result Page). This result page may also utilize different facets of filters and show categories for further filtering of the search results.

Because search templates should be matching the rest of the website, depending on the requirements of both the features and visual appearance, it is possible to utilize the global templates offered by Cludo. Alternatively, custom templates can be developed based on the specific needs of the website.

It is also possible to implement Cludo via API.

How to implement Cludo using a Search template

Cludo offers two global templates that can easily be implemented by copying and pasting code snippets onto the website. This solution is a safe and easy way to implement Cludo out-of-the-box. Alternatively, more custom templates can be created, which will require a more custom code implementation. If you are having a custom solution done by Cludo, you will receive custom documentation for this, as it won’t be found in MyCludo.

Currently, two global templates are supported:

• Inline: Displays the results on a dedicated search result page that the user is directed to upon searching.
• Overlay: Displays the results in an overlay that will appear on any page upon searching.

Both templates come with default styling, but you can always add additional customizations through your own stylesheet.

How to implement the inline template

1. In the navigation, select Configuration › Search template.
2. Select the engine to install the template for in the list.
3. Select the Inline option.
4. Click the Next button.
5. Choose if the search results should also show categories and images.
6. Click the Next button.
7. Enter the URL of the search result page in the Results page URL field.
8. Click the Next button.
9. Implement the listed code snippets from the page:
   1. Add the search form where it should appear.
   2. Add the default stylesheet to the header.
   3. Add the script just before the closing body tag (</body>) on all pages.
   4. Add the search results snippet on the search results page.
10. You have now successfully implemented the inline template!

How to implement the overlay template

1. In the navigation, select Configuration › Search template.
2. Select the engine to install the template for in the list.
3. Select the Overlay option.
4. Click the Next button.
5. Choose if the search bar is already implemented or if you want to inject a new search bar in the left or right corner of the page.
6. Click the Next button.
7. Implement the listed code snippets from the page:
   1. Add the link tag to the header of all the web pages to correctly style the template.
   2. Add the script just before the closing body tag (</body>) on all pages.
8. You have now successfully implemented the overlay template!

How to style Search templates

Once a search template is implemented correctly, CSS can be used to further style the template to match the visuals of the rest of the website.
When using the global search templates like Overlay or Inline, the following CSS selectors can be used modify certain elements.

Overlay

Edit banner colors

To customize the banner colors on your search results page, add the following to the cludoSettings object in your script:

themeBannerColor: {textColor: '#HEX', backgroundColor: '#HEX'},

Replace ‘#HEX’ with the desired color codes for the text and background.

Inline

Styling the search results

.cludo-search-results-item {
  /* Insert styling */
}

.cludo-search-results-item__title-anchor {
  /* Insert styling */
}

.cludo-search-results-item__title {
  /* Insert styling */
}

.cludo-search-results-item__description {
  /* Insert styling */
}

.cludo-search-results-item__path-anchor {
  /* Insert styling */
}

Styling the search filters (categories)

.cludo-facet {
  /* Insert styling */
}

.cludo-facet__header {
  /* Insert styling */
}

.cludo-facet__value-list-item {
  /* Insert styling */
}

.cludo-facet__value-list-item.active {
  /* Insert styling */
}