--- title: Modify Display Markup slug: template-js/modify-display-markup docTags: createdAt: 2022-06-02T13:18:36.000Z --- :::hint{type="warning"} **IMPORTANT**** : The methods within this article are being replaced!** Please review the following **updated** guides for efficient customization: - [Set Template](docId:6YVX9naw6AX68WYguCOB7) - Modify Request : [Overview](docId:_ndrEPmgAUhYltIlXkG-o) - Modify Response: [Overview](docId\:k-USIa-fv-m380BqcAw7P) - Modify Recommendations: [Overview](docId\:O03QERB3F-sY0BHba64Af) ::: To modify a Klevu Template, a new template is created to replace the default instance at a specific position within the interface framework. Then during powerUp, 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 :::hint{type="danger"} Please see [Custom Overrides](docId:_bc3GcThleEaToYujDtuE) for the prerequisite details on preparing for Klevu JS overriding. ::: ## 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 by appending 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=\***\&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 \
\<%=helper.render('**landingProductBadge**', scope, data, dataLocal) %> \
::: 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 \ you will find Klevus template \
container(s) that include the scripted micro-templates. The micro-templates will all be of `type="template/klevu"` and will all contain a unique `id` e.g. :::BlockQuote \
\ \ . . . \
::: ### Template Assignment The template `id` is assigned to the template `name` during the rendering process. In this example, Klevu will use the HTML within the script `id` **searchResultProductBadge **where called to render by the `name` **landingProductBadge** :::BlockQuote setTemplate( klevu.dom.helpers.getHTML("**#searchResultProductBadge**"), "**landingProductBadge**", true ); ::: :::BlockQuote \<%=helper.render('**landingProductBadge**', scope, data) %> ::: :::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` ::: ## Create the new template After locating the template you wish to overwrite, it is often easiest to clone the script block and give it a unique `id`. Then apply any modifications you like. For example, the default template for displaying a product badge ... :::BlockQuote \ ::: ... Becomes ... :::BlockQuote \ ::: Please see [Template Engine](docId\:rv82o3-Jm6NxXz8ibauUq) for further details about available data elements and options. ## Attaching the override Assign the new template `id` to the target render `name` within a previously established custom event listener. :::BlockQuote klevu.coreEvent.attach("myLandingPageOverride", \{ name: "attachToMyLandingPageOverride", fire: function () \{ // OVERRIDE DEFAULT KLEVU MARKUP // ASSIGN a new template here for product badge message **klevu.search.landing.getScope().template.setTemplate( klevu.dom.helpers.getHTML("#myCustom\_searchResultProductBadge"), "landingProductBadge", true ); ** klevu(\{ powerUp: \{ landing: true } }); } }); ::: Please see [Custom Overrides](docId:_bc3GcThleEaToYujDtuE) for details on preparing for Klevu Template overriding. ### Example 1 (landing) Search landing page micro-template override displaying a custom badge message. Replaces the default markup at the `landingProductBadge` position. :::CodeblockTabs JavaScript ```typescript ``` ::: ### Example 2 (quick) QuickSearch micro-template override displaying a custom badge message. Replaces the default markup at the `klevuQuickPromotionBanner` position. :::CodeblockTabs JavaScript ```typescript ``` ::: ### Example 3 (catnav) Category page micro-template override displaying a custom badge message. Replaces the default markup at the `landingProductBadge` position. :::CodeblockTabs JavaScript ```typescript ``` ::: ###