The New Search Designer

The all-new Site Search 360 script version is now live, bringing some long-awaited features.

Note: If your CMS of choice is Weebly and you're looking to try out v14, you'll need to integrate our search manually, as the plugin is still using the old v10 script.

The most important change is the new Search Designer, now available directly from your Control Panel:

new search designer intro prompt

It's about more than just looks: the Search Designer lets you configure the main search features without a single line of code and instantly see the changes in an interactive preview on the right.

What's especially neat is that once you have the v14 script integrated, you'll never have to edit the code again! All you need to do after introducing new changes is press "Apply":

Let's have a quick dive into the new Search Designer:

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 the top filters, the quick-delete bar showing selected filters, and "Add to cart" or "View page" buttons if you enable them on 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 the display type for the Site Search 360 modal. The three types 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

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

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 in a Grid in desktop view; snippets, URLs, and Data Points are hidden:

  1. Displaying as a list in Desktop view; snippets, URLs, and Data Points are shown:

Wrapping Up

Once you're ready to install our script, simply click "Apply" 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 the settings in code form and add any configs that can't be changed within the Search Designer: