Skip to main contentOverview
All PureClarity components can be edited using the inbuilt HTML & CSS templates. Templates gives
you full control over the look and feel of merchandising and email. You can edit the default
templates for each PureClarity component and create your own themes.
For help on checking the templates on your site, have a look at our Developer Debug Mode.
PureClarity provides default templates for the following content types:
The PureClarity template language implements a large subset of the
HandlebarsJS language and with more advanced helpers from
Just Handlebars Helpers.
Handlebars allows you to access properties and objects within the templates, for example
{{Title}} can be used to display the title of the product.
The full set of objects and properties for each content type can be found in the
Objects & Properties section.
Each template contains HTML and CSS which can be edited in the PureClarity Admin Console. To edit
the templates follow the paths below:
- Settings > Template Editor
Templates are version controlled. Using the Developer Debug bar you can log in and preview a
campaign. It is recommended that as templates are being developed and checked for styling, the
preview mode is used.
In the HTML templates, object properties and logical expressions are identifiable by using double
curly brackets, e.g. {{#if linkLocation}}, as outlined by the HandlebarsJS specification. These
expressions populate the component with data at render-time or allow for conditions and looping,
for example over an array, and give you control over what PureClarity shows in the style that suits
your site. When displaying properties with double brackets the value is escaped. This is obviously
problematic if your value contains HTML. To display a value without any encoding use triple
brackets, e.g. {{{title}}}.
All templates are built using the data outlined in
Objects & Properties section
General Properties
There are a couple of general properties that exist within recommender templates:
{{uniqueId}} is a general property that is available within all recommender templates and is a
unique reference. In our default template we use this alongside a JavaScript snippet to allow for
the scrolling of items within a recommender.
{{clickEvt}} is a property that is available on each item in a recommender template. This should
be applied to the mousedown event of the containing DIV element for each item, for example the DIV
that contains each product. It is important that this is added to recommender templates as this
helps PureClarity to track when a user interacts with an item, and thus attribute click through
events to a users activity. 