No code search UI configuration with Site Search 360's new plugin

Create your site search experience with our no-code tool

Sarah Brochard
4 mins to read

The all-new Site Search 360 script version brings some long-awaited features to make your search even smoother, smarter and low code.

Welcome to the Search Designer!

You'd like to change your search interface but have no or little coding knowledge? Our latest release comes with a clever plugin configuration that solves your problem.

Whether you’re new to Site Search 360, an existing customer, or even a power user, you can immediately tailor all aspects of your search with the brand-new Search Designer. You will find this exciting tool directly in your Control Panel under Design & Publish.

Search Designer welcome interface

For those of you running on prior versions, here's why you should upgrade today:

Before

  • Whenever you wanted to add or change a configuration setting (e.g. enable filters, show/hide suggestions, change from list to grid result view, etc.), you had to go and manually adjust this in the code.
  • When we released a major search script upgrade, you had to go and manually replace the old script (e.g. v12) with the new one (v13) on your site.

Now

  • We know you're busy, so the good news is that once you've integrated this latest script and the Search Designer is running, you'll never have to edit that snippet code again!
  • All subsequent changes to your search interface and settings will be handled directly in the Site Search 360 control panel and in the Search Designer without any dev support required. All you’ll need to do is click on “Publish” to implement any subsequent changes.

Search Designer publish button

The Search Designer lets you configure the main search features and instantly preview your changes without a single line of code. The plugin's intuitive navigation layout includes:

  • A search bar with instant preview of your selected options on an interactive canvas;
  • Search Designer welcome interface

  • A top toolbar with hover buttons to efficiently navigate main search features;
  • Top feature toolbar button with useful tooltip Top feature toolbar button 2 Top feature toolbar button 3 Top feature toolbar button 4 Top feature toolbar button 5 Top feature toolbar button 6

  • A scrollable sidebar menu organized in clear sections with specific options for each search element, and helpful smart tooltips.

Now, let's explore the plugin's foolproof features.

Smart features & enhanced user experience

The Search Designer takes you on a step-by-step search implementation journey through advanced features.

Spotlight on usability

The General section is the most relevant to your search’s overall appearance and usability. It includes the following options:

  • Style: Color your search interface elements, change your loading animation and select your search interface language here.
  • Search bar: Choose the search bar type and its position on the page relative to other elements (header, footer, etc.), enable or disable search suggestions, and change the placeholder text.
  • How to show results: Select ‘overlay’, ‘embed’ or ‘fullscreen’ display mode for your search results.
  • Tracking: Link your search to Google Analytics, Google Tag Manager, add a query parameter, and enable Site Search 360 cookies.

The Search Field section manages the styling of specific search elements, such as:

  • Search box: Add a color to the box background, search query and search icon.
  • Search button: Style your search button and color it.
  • General: Round the corners of your search box, add a border color or change the font size of the placeholder text.
  • Voice search: Toggle the voice search on or off.

Powerful suggestions

The mere search suggestion dropdown is a thing of the past.

With the Search Designer, the suggestions feature has become really powerful. You can now mix and match different suggestion blocks:

  • Autocomplete queries (based on popular searches or a manually curated list)
  • Best-matching results can be restricted to a specific group (e.g. only show suggestions from Products and FAQs and hide Blog and News)
  • Search history (previous searches, user-specific)
  • Custom (any custom-defined link with any anchor text e.g. "Check our latest anti covid measures" or queries “People often search for: olympics latest news, medal count”)

So, if you upgrade, you'll be able to benefit from the same advanced level of search suggestions, which we've implemented on the Site Search 360 website:

Customize suggestions by adding blocks to empty state

Let's take a closer look at the Suggestions section and its key options for enhancing your search suggestions and their appearance.

  • Empty state: Customize the layout of the suggestions your searchers will see before they start typing in a search query. Simply add blocks such as 'Search history' or a custom preview. Customize suggestions by adding blocks to empty state
  • Query-based: Customize the suggestions your searchers will see after they start typing a query. Drag and drop content blocks such as 'Search history', 'Autocomplete queries', 'Best-matching results' or a custom block. Customize suggestions by adding blocks to empty state
  • General: Further tailor autocomplete and suggested results. Select, for instance, the number of characters your visitors need to enter in the search box before triggering auto-suggestions and suggested results.
    You can also decide whether you want to show or hide images for suggestions on mobile devices. This is also where you'll find the option to edit the CTA button label, and so much more.

Further useful functionalities

The Results section allows you to adjust the usability of the results window. This is where you can fine-tune:

  • Navigation: Group results, allow infinite scrolling, open results in a new tab, and more.
  • Filters: Make filters visible or hide them.
  • Highlighting: Choose whether to highlight partial or exact matching search terms in the results.
  • Result Groups: Show or hide result groups.

The Layout section allows you to tailor the appearance of the result thumbnails and the results window, with separate options for desktop and mobile configurations.

Last but not least, you can easily configure advanced settings, such as additional CSS, callbacks, or templates, through Advanced Configuration.

Advanced configuration settings in search designer

For reminder, once the new code is applied, you won't have to do this ever again as it'll be automatically upgraded.

For a deeper dive into the Search Designer and its powerful features, check the documentation which is directly accessible from your Control Panel.

Enriched content extraction

We know the importance of visuals when it comes to searching for the right product or service. Hence, we've given you granular control over your data structuring with enriched content extraction.

More specifically, the latest script comes with Alternative Images Extraction, allowing you to display multiple images within a search result card.

Alternative images extraction option in Control Panel

For e-commerce customers running on the latest script, we have even more developments in store.

E-commerce search made easy

We understand the importance of making it easier for customers to find what they need on an e-commerce site. So, we're introducing a new search feature: product variants visualization.

Product variants visualization

Instead of going back and forth between results, or clicking on yet another button, your store visitors can now seamlessly flick through variants of a product either with an image slider or with multiple thumbnails directly on the results page (depending on your store configuration). This neat feature considerably improves their shopping experience, and saves them precious time from search to cart.

Image slider element for improved shopping experience

With our sleek makeover, you can now see all features at a glance, update your search user interface without code, and take full control of your Site Search 360 search implementation.

Haven't explored our new plugin configuration yet? You might be missing out on Site Search 360's new low-code features and advanced configuration options. Just log in to your Control Panel to check the latest improvements and start now by going to Design & Publish.

Our support team is here to help you. Get a free test account in the new control panel today.

Interested in knowing more about our amazing site search solutions? Check us out or feel free to reach out for more information.


If you like what we do, join us on Twitter, LinkedIn, and Facebook.

On the hunt for better search?

Test Site Search 360 for your domain and take a free trial to see for yourself how effortless excellent site search can be.