Build UI
Templates Customizations

Template Reference

7min

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

Use the charts below to quickly reference the default template associations

Note: When viewing the reference URL in the browser, use view-source to see the templates default markup

QuickSearch

Script Template ID

Render Name

#klevuQuickTemplateBase

klevuTemplateBase

#klevuQuickProducts

klevuQuickProducts

#klevuQuickProductBlock

klevuQuickProductBlock

#klevuQuickNoResultFound

klevuQuickNoResultFound

#klevuSearchPersonalizations

klevuSearchPersonalizations

#klevuQuickTemplateResultsHeadingTitle

klevuQuickTemplateResultsHeadingTitle

#klevuQuickProductBlockTitleHeader

klevuQuickProductBlockTitleHeader

#klevuQuickAutoSuggestions

klevuQuickAutoSuggestions

#klevuQuickPageSuggestions

klevuQuickPageSuggestions

#klevuQuickCategorySuggestions

klevuQuickCategorySuggestions

#klevuQuickTemplatePagination

klevuQuickTemplatePagination

#klevuQuickPromotionBanner

klevuQuickPromotionBanner

#kuTemplatePopularSearches

kuTemplatePopularSearches

#kuTemplateRecentSearches

kuTemplateRecentSearches

#klevuQuickTrendingProductBlock

klevuQuickTrendingProductBlock

#klevuTrendingProducts

klevuTrendingProducts

#klevuQuickRecentViewedProductBlock

klevuQuickRecentViewedProductBlock

#klevuRecentViewedProducts

klevuRecentViewedProducts

#klevuTemplateNoResultFoundQuick

noResultsFoundQuick

#klevuQuickNoResultsFoundBanners

quickNoResultsFoundBanners

#kuQuickNoResultsPopularSearches

quickNoResultsPopularSearches

#klevuQuickNoResultsPopularProducts

quickNoResultsPopularProducts

#klevuQuickNoResultsPopularProductBlock

quickNoResultsPopularProductBlock

#quickSearchResultProductStock

quickProductStock

#searchResultProductVATLabelQuick

searchResultProductVATLabelQuick

#klevuQuickTemplateFilters

klevuQuickTemplateFilters

#klevuQuickTemplateSortBy

klevuQuickTemplateSortBy

#kuTemplateQuickResultsViewSwitch

kuTemplateQuickResultsViewSwitch

#klevuQuickTemplateTabResults

klevuQuickTemplateTabResults

#klevuQuickOtherContent

klevuQuickOtherContent

#klevuQuickTemplateContentBlock

klevuQuickTemplateContentBlock

#klevuQuickImageSearchContent

klevuQuickImageSearchContent

#klevuQuickProductRating

klevuQuickProductRating



Search Result Page

Script Template ID

Render Name

#klevuLandingTemplateBase

klevuTemplateLanding

#klevuLandingTemplateResults

results

#klevuLandingTemplateProductBlock

productBlock

#klevuLandingTemplateResultsHeadingTitle

klevuLandingTemplateResultsHeadingTitle

#klevuLandingTemplatePagination

pagination

#klevuLandingTemplateFilters

filters

#klevuLandingTemplateTopFilters

filtersTop

#landingPageProductAddToCart

landingPageProductAddToCart

#landingPageProductColorSwatches

landingProductSwatch

#quickViewProductColorSwatches

quickViewProductSwatch

#landingSearchResultProductStock

landingProductStock

#searchResultProductVATLabel

searchResultProductVATLabel

#klevuLandingTemplateSortBy

sortBy

#klevuLandingTemplateLimit

limit

#klevuLandingTemplateTabResults

tab-results

#klevuLandingTemplateContentBlock

contentBlock

#searchResultProductBadge

landingProductBadge

#klevuLandingPromotionBanner

klevuLandingPromotionBanner

#klevuLandingTemplateNoResultFound

noResultsFoundLanding

#klevuLandingNoResultsFoundBanners

landingNoResultsFoundBanners

#kuNoResultsPopularSearchesLanding

noResultsLandingPopularSearches

#klevuNoResultsPopularProductsLanding

noResultsLandingPopularProductsTemplate

#kuFilterTagsTemplate

kuFilterTagsTemplate

#kuTemplateLandingResultsViewSwitch

kuTemplateLandingResultsViewSwitch

#klevuLandingTemplateSearchBar

klevuLandingTemplateSearchBar

#klevuQuickImageSearchContent

klevuQuickImageSearchContent

#landingImageRollover

landingImageRollover

#klevuLandingTemplateInfiniteScrollDown

klevuLandingTemplateInfiniteScrollDown

#klevuLandingImageSearchUploadBanner

klevuLandingImageSearchUploadBanner

#klevuLandingImageSearchUploadBanner

klevuLandingImageSearchUploadBanner

#klevuLandingProductRating

klevuLandingProductRating

#klevuLandingProductRatingCount

klevuLandingProductRatingCount



Category Page

Script Template ID

Render Name

#klevuLandingTemplateBase

klevuTemplateLanding

#klevuLandingTemplateResults

results

#klevuLandingTemplateProductBlock

productBlock

#klevuLandingTemplateResultsHeadingTitle

klevuLandingTemplateResultsHeadingTitle

#klevuLandingTemplatePagination

pagination

#klevuLandingTemplateFilters

filters

#klevuLandingTemplateTopFilters

filtersTop

#landingPageProductAddToCart

landingPageProductAddToCart

#landingPageProductAddToCart

landingPageProductAddToCart

#landingPageProductColorSwatches

landingProductSwatch

#quickViewProductColorSwatches

quickViewProductSwatch

#landingSearchResultProductStock

landingProductStock

#searchResultProductVATLabel

searchResultProductVATLabel

#klevuLandingTemplateSortBy

sortBy

#klevuLandingTemplateLimit

limit

#searchResultProductBadge

landingProductBadge

#klevuLandingPromotionBanner

klevuLandingPromotionBanner

#klevuLandingTemplateNoResultFound

noResultsFoundLanding

#klevuLandingNoResultsFoundBanners

landingNoResultsFoundBanners

#kuNoResultsPopularSearchesLanding

noResultsLandingPopularSearches

#klevuNoResultsPopularProductsLanding

noResultsLandingPopularProductsTemplate

#kuFilterTagsTemplate

kuFilterTagsTemplate

#kuTemplateLandingResultsViewSwitch

kuTemplateLandingResultsViewSwitch

#klevuLandingTemplateSearchBar

klevuLandingTemplateSearchBar

#klevuQuickImageSearchContent

klevuQuickImageSearchContent

#landingImageRollover

landingImageRollover

#klevuLandingTemplateInfiniteScrollDown

klevuLandingTemplateInfiniteScrollDown

#klevuLandingProductRating

klevuLandingProductRating

#klevuLandingProductRatingCount

klevuLandingProductRatingCount



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.
https://www.yourdomain.com/search/q=*&klib_global_templateHints=true

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

klib_global_templateHints=true
klib_global_templateHints=true