Design & Publish - Lightspeed integration

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. All you need to do after introducing new changes is press "Publish":

Publish button

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:

search designer general tab

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

    easily style your Site Search 360 search bar

    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:

    primary and secondary colors affecting different elements

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 you install our app, we check if your website 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.

  • 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

These settings are related to autocomplete (or search-as-you-type) results which are generated differently from search results and appear under the search box before the search is initiated.

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

This tab is all about the technical side of how your results are displayed.

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:

    all results + other tabs hidden

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

    other tab renamed

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

  • filters and their values are automatically extracted from your Lightspeed data, 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.

  • If there are categories on your site that don’t have any products in them or the product categories contain non-product pages (FAQs, contact info, etc.), you can hide them from the search.

  • configure zero-result page behavior when no result is returned for a particular query.

Layout

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

search designer layout tab

Let us showcase some possible configurations:

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

layout example - masonry

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

layout example - grid

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

layout example - list

In addition to the above basic options, you can also easily customize which Data Points to show, which are extracted from your Lightspeed database, as well as customize the CTA button:

Advanced Configuration

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

advanced configuration options in search designer

Publish changes

If you choose to tinker with any of these settings after the search is initially activated, don’t forget to update your configuration by pressing the “Publish” button in the top right corner of the screen. The changes will be instantly reflected on your site.

Right next to it you will find the “Fullscreen preview” button. It will open a separate window with the exact same preview you see on the right side of the screen in “Design & Publish” but larger - to perfectly imitate how the search would look and function once it’s activated or updated.