---
title: Items Per Page
slug: template-js/items-per-page
docTags: 
createdAt: 2023-06-21T17:29:55.000Z
---



The Klevu Template JS Search and Category result display has a built in default product per-page limit of 12. 

The default selectable **Items Per Page** product limit options are divisible by 12.

- 12
- 24
- 36

::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/_cMS18Y0I_GcI7fbuQyUE_screen-shot-2023-06-22-at-22131-pm.png" size="54" width="578" height="398" caption="Default Options" position="center" showCaption="true"}

When a visitor selects the desired item count value from the Template JS dropdown, the value is stored in the browser's Local Storage corresponding to the *query-type/id*.

| **Local Storage Key**      | **Description**               |
| -------------------------- | ----------------------------- |
| klv\_limits\_*productList* | The main product result array |
| klv\_limits\_*contentList* | The CMS content result array  |



## Setting Defaults

The default count can be set directly into the Local Storage using parameter for `klv_limits_[REQUEST ID]`.

**For example:** Setting the default count to **36** for each query type can be accomplished using the following method

:::BlockQuote
 /\* set default product limits \*/
  window.\_klvReady= window.\_klvReady|| \[];
  window.\_klvReady.push(function()\{
     var itemsPerPage = **36**;
     localStorage.setItem('klv\_limits\_productList', itemsPerPage);
     localStorage.setItem('klv\_limits\_contentList', itemsPerPage);
  });
:::

If you are using Infinite Scroll or Load More, the settings above will not be applied and you must modify the search request to Klevu in order to change the limit. 

We used 15 as an example, but change your limit as needed. This limit controls the items per page to display.

```javascript
window._klvReady = window._klvReady || [];
window._klvReady.push(function(){
	klevu.beforeActivation('landing,catnav', function(data, scope){
        klevu.each(data.request.current.recordQueries, function (key, query) {
            const queryID = klevu.getObjectPath(query, "id");
            if (queryID === "productList" || queryID === "contentList") {
                // change this to your desired limit
                klevu.setObjectPath(query, "settings.limit", 15);
            }
        });	
	});
});
```

## Changing Selectable Options

To change the selectable options within the Klevu Template UI, the block for `klevuLandingTempalteLimit > limit` will need to be overridden to include the new values. 

**For example :** The below snippet uses a Custom [Set Template](docId:6YVX9naw6AX68WYguCOB7) override to modify the selectable limits available in the interface as 5/10/15 with a default value of 5

```javascript
 <script type="text/javascript">
      /* Assign new templates to Klevu Options */
      klevu({
        theme: {
          setTemplates: {
            myCustomLimit: {
              scope: "full_page", // impacted scope
              selector: "#myCustom_klevuLandingTemplateLimit", // new markup block ID
              name: "limit" // template placement name
            }
          }
        }
      });
      
       /* set default product limits */
        window._klvReady= window._klvReady|| [];
        window._klvReady.push(function(){
           var itemsPerPage = 5;
           localStorage.setItem('klv_limits_productList', itemsPerPage);
           localStorage.setItem('klv_limits_contentList', itemsPerPage);
        });
      
</script>
     
<!-- new limit selection template --> 
<script type="template/klevu" id="myCustom_klevuLandingTemplateLimit">
       <div class="kuDropdown kuDropItemsPerpage">
          <div class="kuDropdownLabel"><%=helper.translate("Items per page : %s",helper.getLimit(dataLocal))%></div>
          <div class="kuDropdownOptions">
              <div class="kuDropOption kuLimit" data-value="5">5</div>
              <div class="kuDropOption kuLimit" data-value="10">10</div>
              <div class="kuDropOption kuLimit" data-value="15">15</div>
          </div>
      </div>
</script>
```