Search Designer - Design & Publish

General

The General tab is the most crucial, as this is where you build the groundwork for your search. Let's have a look at some of the most important configurations here:

• The primary and secondary colors are a quick way to style your search interface elements so they match your website's color palette.

  Primary color (style.accentColor) modifies the color of the clickable elements such as result titles, the "See More" results button and hover effects. If you select the option to "add a search bar to your website", the primary color will also affect the search button with the magnifying glass icon – this is part of the default Site Search 360 styling:

  Secondary color (theme.accentColor) becomes noticeable on filters when they're positioned on top, the quick-delete bar showing selected filters, and "Add to cart" or "View page" buttons if you enable them in your search results:

Please note: primary and secondary colors will NOT affect your existing search bar as we do not override the search input styles brought by your website theme or template, or your manually-added styles. Any existing search bar on your website can trigger the Site Search 360 results as long as you specify its CSS selectors correctly.

• Search box & Search button selectors point at the search bar on your site.

  When we load your website in the Search Designer preview, we check if this particular page already has a search input and if it does, we automatically detect its selectors to connect our search engine to them. Feel free to replace or add more selectors to cover multiple search bars if necessary.

  If you have previously added our default HTML code snippet to show a Site Search 360 box and button, the default #searchBox and #searchButton selectors are correct and you don't have to change anything.

  <section role="search" data-ss360="true">
     <input type="search" id="searchBox" placeholder="Search…">
     <button id="searchButton"></button>
  </section>

• Show results: select how Site Search 360 results should be displayed on your site. The three options are:

  • Overlay

  • Embed

  • Fullscreen

• Trigger: the element that will open up the search window. Example: .search-icon

Suggestions

If you have enabled suggestions in the General section, you'll be able to configure empty state suggestions and query-based suggestions, as well as general suggestions settings.

Empty State Suggestions

Empty state suggestions are the suggestions your searchers will see before they start typing in a search query. You could already suggest popular queries, search history, etc. to your users to help offer helpful suggestions or information to your site's visitors.

• Layout options - there're four layout options to choose from, as shown in the screenshot below:

  

• Content block options - you could simply drag and drop the desired content blocks to the the suggestion configurator on the right. Click on the pencil icon to customize the block.

  • Search history - we show previously searched terms personalized to every searcher. Once clicking on the pencil icon, you'll be able to configure the maximum number of searched terms shown, and whether to show to the heading, etc.

    

  • Custom recommendations - you could direct your searchers to the most important results on your site by adding predefined links or search queries. Do remember to define the suggested querie and/or links by clicking the +Add button.

    

    Like search history, you can also configure whether or not to show an icon or heading of this block.

    

After setting up the empty state suggestions, your site's visitors would be able to access the suggested searches, results or search history, like ours do:

Query-Based Suggestions

Query-based suggestions are suggestions your searchers will see once they start typing.

• Layout options - same as empty state suggestions, there're four layout options to choose from, as shown in the screenshot below:

  

• Content block options - same as empty state suggestions, you could simply drag and drop the desired content blocks to the the suggestion configurator on the right. Click on the pencil icon to customize the block. There're however more options for query-based suggestions:

  • Search history - previously searched terms personalized to every searcher. Once clicking on the pencil icon, you'll be able to configure the maximum number of searched terms shown, and whether to show to the heading, etc.

    

  • Best-matching results - top hits for the given search query, like our default suggestions do. There're a few configuration options:

    • Result group - whether the results should come from a single group or not

      

    • Result group label(s) - how the result group names are displayed: none, tabs, chips, or titles.

      

    • Max. number of entries

    • Image position - where the result images are shown: left, top or hide images.

      

    • Layout - whether to show results in list or grid layout

    • Data points - which data points to be shown

  • Autocomplete queries - popular search terms that match the first characters of the user query. Auto-suggested searches can be populated automatically or they can come from a manually curated list. The list can be set up in Result Manager -> Autocomplete queries.

  • Custom recommendations - you could direct your searchers to the most important results on your site by adding predefined links or search queries. Do remember to define the suggested querie and/or links by clicking the +Add button.

    

In the suggestions -> general section, you can tweak things pertaining to your search suggestions and their appearance, if empty state and/or query-based suggestions aren't configured.

Here's an example of a custom setup:

Results

The Results tab allows you to adjust the functional side of the results window.

This is where you can:

• choose between tabs design. Flat tabs design is enabled by default as shown below:

• show or hide the "All Results" and "Other" tabs. Here's an example where both tabs are hidden:

• rename the Uncategorized results tab (by default it's called "Other"). In this example, we renamed the "Other" tab into "Non-Food":

• configure how many results should be shown per page or, if you don't feel like splitting results into pages, you can enable infinite scrolling instead.

• if you have configured filters (available for Holmes plan and higher), you can enable them here and choose whether you'd like to show them in a left-side panel or on top of your search results.

• configure which result groups to be shown

• if you're on a paid plan, you can show related queries and configure how to show them. By default, related queries are shown when no result is returned for a particular query.

• in addition to "related queries", there're a few other options to show on the no-results page:

  • Search box

  • Popular search results

  • Popular search queries

  • Custom HTML

  • Fuzzy search results

  • Related queries

  • Bullet points

  You can add more blocks to show the above item(s) as it fits

Layout

Finally, the Layout tab is where you can customize the appearance of the results window, with separate options for desktop and mobile views.

Let us showcase some possible configurations:

1. Displaying in masonry mode on desktop; only thumbnails and URLs are shown:

1. Displaying results in a grid on desktop; snippets, URLs, and Data Points are hidden:

1. Displaying results as a list on desktop; snippets, URLs, and Data Points are shown:

Wrapping Up

Once you're ready to install our script, simply click "Publish" to get your code snippet:

Insert it right before the closing </body> tag, and you should be all set!

You can always access the full configuration object to further adjust your setup. The Advanced tab of the Search Designer enables you to edit settings that go beyond by available Search Designer controls:

• add custom CSS to further adjust the styling

• configure custom callbacks to change the default search behavior

• set up a custom result template to control every element of your search UI

• directly edit your ss360Config object by adding advanced configuration options