# 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 <a href="#available-templates" id="available-templates"></a>

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](https://3882858970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVeIbtsTcQaqaNeKzLbbU%2Fuploads%2Fl9KdZG91SAAVHbCy01L8%2Ftemplates.png?alt=media\&token=0f74e0f7-4670-462a-aa3c-10c4b5702415)

### Template editor <a href="#template-editor" id="template-editor"></a>

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](https://github.com/lukeed/tempura). We won't be covering details on the syntax of Tempura in this guide. Please head over to the [Tempura syntax documentation](https://github.com/lukeed/tempura/blob/master/docs/syntax.md) 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](https://3882858970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVeIbtsTcQaqaNeKzLbbU%2Fuploads%2FYT6W91BCc5rbIuy8EqHo%2Ftemplate-editor.png?alt=media\&token=c5369ce5-aef4-46ec-9963-645a549d4750)

### Templating Utilities <a href="#templating-utilities" id="templating-utilities"></a>

#### Field variables <a href="#field-variables" id="field-variables"></a>

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:

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

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

#### Custom objects <a href="#custom-objects" id="custom-objects"></a>

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

```html
<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 <a href="#custom-attributes" id="custom-attributes"></a>

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.

```html
<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.

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

### How To Guides <a href="#how-to-guides" id="how-to-guides"></a>

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

* Add a sales banner