Search Designer - Design & Publish

Tweaking colors, placeholders, search suggestions, result layout, and other elements of your search interface has never been easier thanks to the our Search Designer tool, available directly from your SS360 Control Panel, behind Design & Publish:

1) Design. Configure the main search features without a single line of code and instantly see the changes in an interactive preview on the right.

2) Publish. What's especially neat is that once you have our latest script integrated, you'll never have to edit the code again! All you need to do after introducing new changes is press "Publish":

Let's have a quick dive into the Search Designer features and settings:

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:

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

Suggestions

In this section, you can tweak most things pertaining to your search suggestions and their appearance. 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:

  • 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.

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