Skip to main content

Earlier Version Upgrade

We've bundled everything Site Search 360 has to offer into one file — a single script that makes maintaining your search easier than ever.

Previously, you had to manually update the ss360Config object every time you wanted to change something about your search — for example, changing the default colors, enabling filters, or upgrading the script itself. With the Search Designer, you won't have to touch your codebase again.

Setting up Your Search Designer​

The upgrade process is free and takes four steps.

Step 1: Configure Your Search Designer​

Go to the Design & Publish tab of your SS360 Control Panel with the built-in Search Designer, where the unique setup of your search project is stored. To configure your search, you can do any of the following:

  • Import from existing site: provide a link to a page on your site where SS360 is already running. For instance, your homepage if you've implemented the search bar anywhere in the header, or your search results page (e.g., https://yoursite.com/search-results). Everything you've configured is copied to the Search Designer as separate features, which you can then adjust at any time.
  • Start from scratch: perfect if you want a blank canvas and total creative freedom to explore all configuration and styling options rather than build on your existing configuration.
  • Import an ss360Config object: the most complex option, but the one that gives you, as a developer, full control. Like "Import from existing site," it creates your new Search Designer configuration based on the old one, but you'll need to manually paste your existing configuration.

If you've set up any custom callbacks, they won't be imported automatically. Add them to Advanced Configuration (the last tab in the Search Designer's left-side panel).

Setup options

Step 2: Customize Your Settings​

Try out different settings in the left-side panel — add voice search, configure search suggestions, change the result layout, and more. Preview your changes instantly on the right side of the screen.

Some of the functions of our Search Designer and a preview of what your search might look like

Step 3: Publish Your Changes​

Once you're done, click "Publish" in the top-right corner of the screen to get the new script for your website.

Step 4: Update Your Site's Script​

Go to your site and replace the existing SS360 scripts with one line of our latest JavaScript code (which you won't need to edit or replace again).

Your script will change from this:

<script>
   /* Create a configuration object */
   var ss360Config = {
      /* Your Site ID that usually equals the domain you signed up with */
      siteId: 'mysiteid',
      /* A CSS selector that points to your search box */
      searchBox: {selector: '#searchBox'},
   };
</script>
<script src="https://cdn.sitesearch360.com/v13/sitesearch360-v13.min.js" async></script>

to this:

<script async src="https://js.sitesearch360.com/plugin/bundle/0000.js"></script>

The script must go before the closing </body> tag. The last four digits vary from project to project, so use your own line of code rather than pasting the one from this guide onto your website.

Using Existing Search Bar(s) vs. Adding a New One​

You can use the Search Designer with either a new search bar or an existing one.

To replace your old search bar, use the "Add a search bar to my site" option — the script injects it before or after a specific element on your website, such as your site's header:

Injecting a search bar with Site Search 360 code

The "Use the existing search bar" option isn't better or worse — it depends on your preferences and needs. If you have multiple search bars, use this option, and make sure the CSS selectors point to all search boxes that should connect to Site Search 360.

Connecting your search to multiple search bars

If you've previously added the default code snippet for a search field and want to keep it, leave its configuration untouched when you replace your old SS360 script with the new one. The following code must stay present in your HTML:

<section role="search" data-ss360="true">
<input type="search" id="searchBox" placeholder="Search…">
<button id="searchButton"></button>
</section>

Advanced Configuration Options​

The Search Designer also includes options for more technical users.

The "Advanced Configuration" tab lets you override the default style of the search box by customizing "Additional CSS", and add custom callbacks.

If the Search Designer controls don't cover a setting you need, add it manually under "Plugin Configuration", where your entire configuration can be viewed and edited.

Advanced Configuration options

Why Is It Worth Upgrading?​

Here's a quick comparison of what's changed.

Before:

  • Every time you wanted to add or change a configuration setting (e.g. enable filters, show/hide suggestions, switch from list to grid view), you had to manually edit your website's code.
  • Every major script upgrade (e.g. v12 to v13) required manually replacing the old script with the new one.

Now:

  • After you replace the old scripts with one line of code, all subsequent changes to your search interface and settings are handled directly in the SS360 Control Panel and Search Designer. Click "Publish" and the changes are implemented instantly — no dev support required.
  • Our team can help you faster, since we no longer need to comb through your website's code — everything is available for analysis directly on our platform.
  • All new features and bug fixes are deployed to this latest script only; v13 and older versions are no longer as thoroughly maintained.

To learn more about the Search Designer's features, see our blog post.

If anything's still unclear or you need help with the installation process, reach out to us.