> For the complete documentation index, see [llms.txt](https://docs.search.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.search.io/documentation/fundamentals/integrating-search/result-templates.md). # 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](/files/YQQ3PPeuSg0JfpyrGDo8) ### 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](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](/files/NC8S5obiBSe8NLb4R9rM) ### 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: ```html

{{ title }}

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

{{#join items=["this", "is", "convenient"]}}

{{#join items=["1st", "2nd", "3rd"] joiner=", "}}

{{#date value=published_at}}

{{#date value=published_at format="DD/MM/YYYY"}}

``` #### 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. ```html ``` 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
``` ### How To Guides Take a look at our How To guides for examples on how to customize your result templates. * Add a sales banner --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.search.io/documentation/fundamentals/integrating-search/result-templates.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.