---
title: Set Template
slug: template-js/set-custom-template
docTags: 
createdAt: 2022-06-02T13:18:36.000Z
---



To modify a Klevu Template,  a new template is created to replace the default instance at a specific position within the interface framework. Then, indicate that Klevu should use the new template in place of the default.

There are three steps:

1. *Identify *which micro-template to be replaced
2. *Create* the new template
3. *Assign the override* for the appropriate template block



## Template Identification

Klevu Theme provides a working implementation of Quick Search, Search Results Landing Page and Category Pages by just including a small JavaScript asset. All of the HTML templates are injected into your page when our JavaScript Library powers up.

In order to make efficient modifications to a template, understanding the structure and syntax will be important.

### Template Name

Klevu Template JS is built on a framework of micro-templates. The micro-templates are positioned as reusable components where applicable within the base Klevu framework.

The easiest way to understand this is to enable Template Hints. There are two steps to enable Template Hints:

- set a sessionStorage variable by opening your browser's Developer Tools, going to the Console and typing the following command:
  - `sessionStorage.setItem('klv_debugMode', true);`
- Once you have ran the above command in the Console you can append the parameter `klib_global_templateHints=true` to your URL.

This will expose the micro-template positioning, each with a red border for context as well as the associated `name` used for rendering.

e.g:
https\://www\.yourdomain.com/search/?q=blue**\&klib\_global\_templateHints=true**


::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/2Dh2y1sYSh1AbImzaB5Ug_image.png" size="78" width="1040" height="780" caption="klib_global_templateHints=true" position="center" showCaption="true"}

The micro-templates use this identifier to render components in place by `name`

For Example, **landingProductBadge** can be called to render at multiple positions within the default  search templates.

:::BlockQuote
\<header ku-block data-block-id="ku\_landing\_result\_item\_header">
&#x20;   \<%=helper.render('**landingProductBadge**', scope, data, dataLocal) %>
\</header>
:::

Please see [Template Engine](docId\:rv82o3-Jm6NxXz8ibauUq)  for further details about `helper.render` and options



### Template ID

The Klevu theme reference script injects the micro-templates onto the webpage. The best way to view the generated templates is using the browser "Inspect Element" developer feature.

Within the website \<body> you will find Klevus template \<div> container(s) that include the scripted micro-templates. &#x20;

The micro-templates will all be of `type="template/klevu"` and will all contain a unique `id`

e.g.

:::BlockQuote
\<div id="klevu-landing-search-theme-templates" />
&#x20;\<script type="**template/klevu**" id="**klevuLandingTemplateBase**"> ... \</script>
&#x20;\<script type="**template/klevu**" id="**searchResultProductBadge**"> ... \</script>
. . .
\</div>
:::



### Template Assignment

The template `id` is assigned to the template `name` during the rendering process.

For example, the default Search Result Page (landing) Template uses the markup within the script  `id` **searchResultProductBadge&#x20;**&#x74;o render by the `name` **landingProductBadge.**



::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/7NZVnpXmh3CM0-9fUGln-_screen-shot-2023-05-31-at-82109-pm.png" size="38" width="282" height="299" caption="landingProductBadge" position="center" showCaption="true"}

:::hint{type="warning"}
**Note:** The render `name` is **not always** the same as the default micro-template `id`
:::

:::hint{type="success"}
Please see [Template Reference](docId\:B1sWNmiAoqOPOr679nW_O) for quick reference chart of template `id` to  name. As well as detail on how to view the default template markup.
:::

&#x20;&#x20;

## Create the New Template

After locating the template you wish to overwrite, it is often easiest to make a copy of the original script block and give the new copy a unique `id`. Then apply any modifications you like to the new copy.

:::hint{type="success"}
Please see [Template Reference](docId\:B1sWNmiAoqOPOr679nW_O) for detail on how to view the default template markup.
:::

For example, make a copy of the default template for displaying a product badge ...&#x20;

:::BlockQuote
\<script type="template/klevu" id="**searchResultProductBadge**">
&#x20;   \<%if(dataLocal.stickyLabelHead && dataLocal.stickyLabelHead != "") \{ %>
&#x20;       \<div class="kuDiscountBadge">
&#x20;               \<span class="kuDiscountTxt">
&#x20;                       \<%= dataLocal.stickyLabelHead %>
&#x20;               \</span>
&#x20;       \</div>
&#x20;   \<% } %>
\</script>
:::

&#x20;... and replace the `id` to something unique ...

:::BlockQuote
\<script type="template/klevu" id="**myCustom\_searchResultProductBadge**">
\<% console.log('Klevu dataLocal', dataLocal) %>
&#x20;   \<div class="kuDiscountBadge">
&#x20;       \<span class="kuDiscountTxt">
&#x20;           SHOW A CUSTOM BADGE!
&#x20;       \</span>
&#x20;   \</div>
\</script>
:::

:::hint{type="info"}
**Note:** The use of the `console.log` output for the `dataLocal` object has been provided here for reference. This is an easy way to review the product attributes available for use within the template on the browsers developer console.

Please see [Template Engine](docId\:rv82o3-Jm6NxXz8ibauUq) for further details about available data elements and options.
:::



## Assign the Override

Assign the new template `id` (`selector`) to the target render `name` within the Klevu options object using the following format.

:::BlockQuote
...
&#x9;descriptiveNameForTemplate: \{
&#x9; scope: "\<scope identifier(s)>",&#x20;
&#x9; selector: "\<id Of My Template>",
&#x9; name: "\<name Of Template To Replace>"
&#x9;},
...
:::

e.g.

:::BlockQuote
klevu(\{
&#x20; theme: \{
&#x20;   setTemplates: \{
&#x20;     myCustomTemplateDescription: \{
&#x20;       scope: "landing,catnav,quick",&#x20;
&#x20;       selector: "#idOfMyTemplate",
&#x20;       name: "nameOfTemplateToReplace"
&#x20;     },
&#x20;   }
&#x20; }
});
:::

Notice how the selector value is actually a CSS selector for your new template.&#x20;

## Determining Scope

**Note** that each `setTemplates` assignment requires definition within the corresponding `scope` of the override. We will chart these below.

| Scope      | Description                                               |
| ---------- | --------------------------------------------------------- |
| all        | Applies to all scope modules                              |
| quick      | QuickSearch module                                        |
| landing    | SRLP module                                               |
| catnav     | Category module                                           |
| full\_page | Both SRLP and Category modules (same as "landing,catnav") |



## Example

Search landing page micro-template override displaying a custom badge message.

Replaces the default markup at the **landingProductBadge** position for the **landing** scope only.

:::CodeblockTabs
JavaScript

```html
<script type="text/javascript">
/* Assign new templates to Klevu Options */
klevu({
  theme: {
    setTemplates: {
      myCustomProductBadges: { // unique name that only describes the template
        scope: "landing", // impacted scope
        selector: "#myCustom_searchResultProductBadge", // new markup block ID
        name: "landingProductBadge" // template placement name
      },
    }
  }
});
</script>

<!-- Create a new markup block with a unique 'id' -->
<script type="template/klevu" id="myCustom_searchResultProductBadge">
  <% console.log('Klevu dataLocal', dataLocal) %>
    <div class="kuDiscountBadge">
        <span class="kuDiscountTxt">
            MY CUSTOM BADGE!
        </span>
    </div>
</script>

```
:::

::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/QjGONpf60dUOCqJJb2enJ_screen-shot-2023-06-01-at-92328-am.png" size="42" width="355" height="401" caption="Example" position="center" showCaption="true"}





###