HTML templates for custom results and banners

The following templates match the default look and feel of the search results rendered with our latest search script. You can use them to further adjust the styling and structure.

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

Tip: if you want your custom results to perfectly match the styling of the rest of your results, you can use our Custom result editor instead of manually editing the HTML snippets.

How to add custom HTML result snippets

  1. Go to the Result Manager and create a new Result Mapping.

  2. Start typing the search term(s) for which you'd like to display a custom result or a banner and click +Add custom result or +Add banner above results.

    adding custom result from a mapping

  3. Now click +Create new custom result or select an existing one from your Custom result library.

  4. In the editor window select the HTML option and paste your HTML into the Result HTML field. If you'd like the banner to be displayed as an autocomplete suggestion, make sure to provide a separate HTML snippet in the Suggestion HTML field as well:

Template examples

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>

Adding a custom banner - the template below is optimized for grid layouts with left-side filters. If you're showing results in a list, you might want to adjust the styles:

Please note: banners aren't always properly rendered inside the Result Manager. Save your mapping and test it in the Search Preview to see the banner.

<div id="custom-result">
   <a href="{LINK}"><img src="{IMAGE_URL}"></a>
</div>
<script>
    window.sxQuery('#custom-result').parents('.ss360-suggests', true).addClass('ss360-suggests--custom');
</script>
<style>
.ss360-suggests--custom img {
    max-width: 100%;
}

 .ss360-suggests--custom {
    grid-column: 1/5; 
}
@media (max-width: 1199px) {
    .ss360-suggests--custom {
        grid-column: 1/4;
    }
}
 @media (max-width: 991px) {
    .ss360-suggests--custom {
        grid-column: 1/3;
    }
}
  @media (max-width: 767px) {
    .ss360-suggests--custom {
        grid-column: 1/2;
    }
}
</style>