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.
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.
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:
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
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.
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.
How To Guides
Take a look at our How To guides for examples on how to customize your result templates.
Add a sales banner
Last updated