Skip to main content

Customize Your Lightspeed Search Design

Use the Search Designer to adjust colors, placeholders, search suggestions, result layout, and other elements of your search interface. Open it in your Site Search 360 Control Panel under Design & Publish:

The Search Designer works in two steps:

  1. Design. Configure the main search features without code and see the changes instantly in the interactive preview on the right.

  2. Publish. After making changes, press "Publish":

    Publish button

The sections below cover each Search Designer tab.

General​

The General tab sets the groundwork for your search. These are the most important settings:

search designer general tab

Primary and secondary colors​

The primary and secondary colors style your search interface elements to match your website's color palette.

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

    easily style your Site Search 360 search bar

  • Secondary color (theme.accentColor) appears on filters positioned on top of the results, 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

The primary and secondary colors don't affect your existing search bar. Site Search 360 doesn't override the search input styles from your website theme or template, or styles you added manually. Any existing search bar on your website can trigger Site Search 360 results, as long as you specify its CSS selectors correctly.

Search bar and display settings​

  • Search box and Search button selectors point at the search bar on your site. When you install the app, Site Search 360 checks whether your website already has a search input. If it does, the app detects its selectors automatically and connects the search engine to them. You can replace these selectors or add more to cover multiple search bars.
  • Show results sets how Site Search 360 results appear on your site. The three options are:
  • Trigger is the element that opens the search window, for example .search-icon.

Suggestions​

The Suggestions tab controls autocomplete (search-as-you-type) results. Suggestions appear under the search box before the search is submitted, and they're generated differently from search results.

Suggestion tab

Use this tab to adjust most aspects of your search suggestions and how they look. Here's an example of a custom setup:

Suggestions preview

Results​

The Results tab controls how the results window works.

Result tab

In this tab, you can:

  • Show or hide the "All Results" and "Other" tabs. In this example, both tabs are hidden:

    all results + other tabs hidden

  • Rename the uncategorized results tab, which is called "Other" by default. In this example, the "Other" tab is renamed to "Non-Food":

    other tab renamed

  • Set how many results to show per page, or enable infinite scrolling instead of pagination.

  • Enable filters and choose whether to show them in a left-side panel or on top of your search results. Filters and their values are extracted automatically from your Lightspeed data.

  • Hide categories from the search, for example categories without products, or product categories that contain non-product pages such as FAQs or contact info.

  • Configure what the results page shows when a query returns no results.

Layout​

The Layout tab customizes how the results window looks, with separate options for desktop and mobile views.

search designer layout tab

Some example configurations:

  1. Results in masonry mode on desktop, showing only thumbnails and URLs:

    layout example - masonry

  2. Results in a grid on desktop, with snippets, URLs, and Data Points hidden:

    layout example - grid

  3. Results as a list on desktop, with snippets, URLs, and Data Points shown:

    layout example - list

You can also choose which Data Points to show (Data Points are extracted from your Lightspeed database) and customize the CTA button:

Layout tab - part 2

Advanced Configuration​

The Advanced tab gives you access to the full configuration object, so you can adjust settings that go beyond the 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.
  • Edit your ss360Config object directly by adding advanced configuration options.

advanced configuration options in search designer

Publish changes​

When you change any of these settings after the search is activated, press Publish in the top right corner of the screen to update your configuration. The changes appear on your site immediately.

Next to it, the Fullscreen preview button opens a separate window with the same preview shown on the right side of Design & Publish, but larger. Use it to see exactly how the search will look and work once it's activated or updated.

Publish