Result templates

Use Search.io's standard result template or pick one of the professional custom templates as a starting point to create a truly unique look and feel for your site.

To get started,

• Select the Custom option for the Search result template setting in the Search Designer configuration sidebar.

• Click edit

Available templates

Choose from a number of different templates, inspired by some of the worlds most popular sites. Use the template as is, or as a starting point to create your own unique search results.

Out of the box templates

Template editor

Customizing the templates will require basic HTML and CSS knowledge, as well as a general understanding of template languages.

Search.io uses an extremely lightweight, yet flexible template engine called Tempura. We won't be covering details on the syntax of Tempura in this guide. Please head over to the Tempura syntax documentation for more details on how to use the language.

The template editor is composed of two section. The Editor on the left and a preview section on the right. The preview will update in realtime when editing the template.

Template editor

Templating Utilities

Field variables

Fields on the record can be references as variables in the template. To display the title of a product and link it to the product page via the url field, use fhe following template code:

<h3 class="item__title">
    <a href="{{ url }}">
        {{ title }}
    </a>
</h3>

Tip: Type {{ in the editor to open up the variable autocomplete menu.

Custom objects

Aside from the standard field variables, a few custom objects are available to make working with templates more convenient.

productPrice

The display of prices can get complicated with different discounts across variants. To make it easier to work with prices, we have introduced a simple productPrice object with two properties. Use this object to display prices that can automatically adjust depending on the selected variant.

• displayPrice - The price or the discount price if there is a sale

• originalPrice - The original price if there is a sale (undefined otherwise)

productStatus

The productStatus object makes it easy to determine specific product states and adjust the result template accordingly. You can use it to add a banner if an item is on sale or for new arrivals. It also supports a number of string properties with internationalization support.

• onSale - Whether that product is on sale. In the case of multiple variants, this will be true if at least 1 of them is on sale.

• variantOnSale - Whether the selected variant of a product is on sale.specific

• newArrival - The product has been added within the last 30 days.

• outOfStock - The product is out of stock (including all variants).

• onSaleText - The localized text to show when a product is on sale.

• newArrivalText - The localized text to show when a product is a new arrival.

• outOfStockText - The localized text to show when a product is out of stock.

Helper functions

When using custom templating, a number of helper functions are available to help you in working with common data, they are:

• join - join an list of strings

• date - format the ISO date string into human-readable string (UTC only)

See the following template code for examples of how to use helper functions

<div class="item__details">
    <p>{{#join items=["this", "is", "convenient"]}}</p>
    <p>{{#join items=["1st", "2nd", "3rd"] joiner=", "}}</p>

    <p>{{#date value=published_at}}</p>
    <p>{{#date value=published_at format="DD/MM/YYYY"}}</p>
</div>

Custom attributes

Templates also support custom html attributes that magically add dynamic functionality to the template.

data-search-image-hover

When added to the image tag containing the product image, the data-search-image-hover will automatically create a hover effect showing a variant image.

<img data-search-image-hover src="{{image_url}}" />

The image hover effect only works if no variant images are shown (see below).

data-search-variants

The data-search-variants attribute is designed to be added to an empty div. When added to the template, it will show a row of product variants (where available). On hover, the product image, price and other data can be updated to reflect the variant details.

   <div data-search-variants></div>

How To Guides

Take a look at our How To guides for examples on how to customize your result templates.

• Add a sales banner