Query Mappings

How to define custom results for a query

Query mappings allow you to fully control the search behavior in response to specific search queries entered by your site visitors. This article explains how to set them up.

Let's start by opening your Site Search 360 control panel and going to the Search Control > Query Mapping section:

set up custom results for search queries
  1. Now click "New Mapping" and fill in the search term(s) for which this mapping should be applied. Type any word or expression into the "Query" field.

    Tip: your query can also be a regular expression. You can use it when you want to return the same exact results for several different queries. Separate the terms with the pipe symbol and make sure to select "Regular Expression" matching type in the next step, for example:

    search term|another search term|term3

  2. Next, select the matching type. Your choices are as follows:

    1. Match: The visitor's search query has to be a perfect match for the mapping to apply.

      If you enter "fish" as the query in step 1 and select the type "match", then the mapping will only be triggered when the visitor's query contains the word "fish" and nothing else.

    2. Phrase: The mapping will be applied if the visitor types in several search terms and the entire mapped query is among these terms (part of the search phrase).

      Taking the same "fish" query example, "fish and chips" or "fresh fish" will bring up the results you specify for "fish" in this case.

    3. Contains: The mapping will be applied if the visitor's search query contains the mapped query.

      In this case the mapping will be triggered by all incoming queries that contain "fish", including "fishing", "fishermen", but also "selfish".

    4. Regular Expression: The query defined in point 1 should be a regular expression that will match the incoming queries. This could be something like

      ^(fish hook|fishhook|catching fish)$

      You can also learn more about regular expressions.

  3. If you want to show this query in your search suggestions, switch the "Suggest this query" toggle to "YES". In this case, as soon as your searcher types the first letters of the query, they will be prompted to click on the full search term and directed to the predefined results.

    This is an extremely powerful way to customize your visitors' search experience.

  4. In step 4 you define what results are triggered by the mapped search query.There are three options available, which will be described in the following sections:

Order Results

  1. Here you see the list of content groups available for the entered query. If you haven't defined any content groups or no specific content group was matched, the standard content group "OTHER" is shown.

  2. The three horizontal bars allow you to move search results up and down in the result list, like so:

    By dragging and dropping a search result you may choose a new position for it in the list of naturally ranked search results.

  3. You can remove an unwanted result from the result list by clicking the small "x" in the top right corner of every search result.

  4. Clicking "pin results from here up" will lock the selected search result in place along with all the results above it. The results will be marked green and will stay in the exact position where you placed them.

    Please note that dragging a result will also pin the selected results (and the results above it). It is not possible to pin a search result in position 5 and leave the results in position 1-4 unpinned.

  5. You can restrict the search results to only show the pinned results with the toggle in the top right. Setting the toggle to "ON" will remove all other results and show just the pinned results to the user.

  6. Use the "Add Custom Result" button to create a featured search result or a promotional banner. Site Search 360's default CSS is not automatically applied to custom results so you have complete freedom to customize the HTML structure and define the CSS classes as you see fit.

    However, if you want your custom result snippets look like the rest of your results (v13), use one of the templates below.

    Note: your custom results can be dragged around and placed in a certain position just like natural search results. A custom result is always pinned.

Custom result HTML templates

The following templates match the default styling and structure of the search results rendered with our latest search script (v13).

Make sure to replace the {LINK}, {TITLE}, {TEXT}, and {IMAGE_URL} placeholders with the respective content.

Adding a custom result without an image:

<div class="ss360-suggests__content">
    <header class="ss360-n-section ss360-suggests__header">
        <span role="heading" class="ss360-suggests__link-wrap" aria-level="4">
            <a class="ss360-suggests__link ss360-ac-c" href="{LINK}" target="_blank">{TITLE}</a>
        </span>
    </header>
    <p class="ss360-suggests__snippet">{TEXT}</p>
</div>

Adding a custom result with an image:

<div class="ss360-suggest__image-container">
<a class="ss360-suggests__image-wrap" aria-hidden="true" tabindex="-1" href="LINK">
    <img alt="" aria-hidden="true" role="presentation" aria-label="{TITLE}" class="ss360-suggests__image" src="{IMAGE_URL}">
</a>
</div>
<div class="ss360-suggests__content">
    <header class="ss360-n-section ss360-suggests__header">
        <span role="heading" class="ss360-suggests__link-wrap" aria-level="4">
            <a class="ss360-suggests__link ss360-ac-c" href="{LINK}" target="_blank">{TITLE}</a>
        </span>
    </header>
    <p class="ss360-suggests__snippet">{TEXT}</p>
</div>

Adding a custom search suggestion without an image:

<a class="unibox__search-content unibox__search-content--link" href="{LINK}" title="{TITLE}">{TITLE}</a>

Adding a custom search suggestion with an image:

<div style="display:flex;">
    <img src="{IMAGE_URL}" width="{IMAGE_WIDTH}" height="{IMAGE_HEIGHT}" style="margin-right:16px;">
    <a class="unibox__search-content unibox__search-content--link" href="{LINK}" title="{TITLE}">{TITLE}</a>
</div>

Rewrite

Redirect to URL