Register
Sign in
Home › F.A.Q.

Q&A

Synonyms — How Do They Work?

You can add a list of synonyms to the control panel on the project editing page.
Words and their synonyms are divided by commas, and the synonyms themselves are divided into new lines.

Example:

  • phone,smartphone
  • phone,mobile phone
  • phone,mobile

Synonym Creation Rules
Acceptable synonym constructions:

  • One word,one word
  • One word,many words
  • ‘one word,one word’ example:
  • phone,smartphone

‘one word,many words’ example:

  • smartphone,mobile phone

Word order matters
There is a one-way link between synonyms.
For example:

  • Saw,chainsaw

In this case, when you search for a saw, the result will include chainsaws.
However, if you search for a chainsaw, you will get nothing but chainsaws.
To display all saws as a result of a ‘chainsaw’ query, you have to add a new link:

  • chainsaw,saw

The letter case doesn’t matter.

Can I change the appearance for the search result?

There are Vue.JS templates created at the product page display level.
You can create your own template at each category level and override CSS styles.

What is the response speed?

On average, it takes less than 100 ms to respond to a request.

How can I insert the code?

There are several ways to insert the code:
directly into the HTML code of the page, or via Google Tag Manager.

What products does the search module show?

Search results include all products transferred using the YML feed that you specified in project settings in the control panel.

How can I change the style of a search module, for instance, link colors and fonts?

CSS customization

  • all classes start with l-ss-c-*
  • all page styles are described as

<style class=”l-ss-styles”>
.l-ss-c-search-input {
border: 1px dashed #000;
}
</style>
will be copied inside the elements

  • all wrappers host elements have classes

l-ss-c-host-wrapper
l-ss-c-host-wrapper-is-[type] -> l-ss-c-host-wrapper-is-search-input

l-ss-c-is-mobile – detected mobile device

l-ss-c-is-phone-only-small

l-ss-c-is-phone-only-small – screen size >= 100px
l-ss-c-is-phone-only – screen size >= 599px
l-ss-c-is-tablet-portrait-up – screen size >= 600px
l-ss-c-is-tablet-landscape-up – screen size >= 900px
l-ss-c-is-desktop-up – screen size >= 1200px
l-ss-c-is-big-desktop-up – screen size >= 1800px

l-ss-c-host-wrapper-is-ready

  • all root elements within an element caste can have classes

l-ss-c-[name], ex. l-ss-c-search-popup

l-ss-c-is-not-responsive – no meta tag
l-ss-c-is-mobile – detected mobile device

l-ss-c-is-phone-only-small – screen size >= 100px
l-ss-c-is-phone-only – screen size >= 599px
l-ss-c-is-tablet-portrait-up – screen size >= 600px
l-ss-c-is-tablet-landscape-up – screen size >= 900px
l-ss-c-is-desktop-up – screen size >= 1200px
l-ss-c-is-big-desktop-up – screen size >= 1800px

Sample code for installation on the site

<div>
    <div id="search-node" class="input-lg"></div>
</div>

<script>
    (function (e, t, n, o, c) {
        e[c] = e[c] || function () {
            (e[c].a = e[c].a || []).push(arguments);
        }, e[c].h = o, e[c].n = c, e[c].i = 1 * new Date, s = t.createElement(n), a = t.getElementsByTagName(n)[0], s.async = 1, s.src = o, a.parentNode.insertBefore(s, a);
    })(window, document, 'script', 'https://cdn.searchbooster.io/v1/init.js', 'searchbooster');

    searchbooster({
        theme: 'base',
        apiUrl: '//api2.searchbooster.io',
        popup: {
            search: true
        },
        apiKey: 'QWERTY-QWERTY-000-000-qwerty123456', #unique service activation key
        initialized: function(SearchBooster) {
            SearchBooster.CombinedSearchInput.mount('#search-node'); #search-node serach element on  your site
        },
    });
</script>

<div id="search-node" class="input-lg"></div> #div on your site, which is a search field
© 2020 - SearchBooster.io