Category Page

A well structured category page is key to a succesful eCommerce business.

Our Category Page makes this user experience swift and easy to build.

Adding Category Page results to a website

The Category Page let's you create a full page showing the best possible results for any category

<span 
  class="clerk"
  
  data-api="recommendations/category/popular"
  data-limit="40"
  data-labels='["Category Page Grid"]'
  data-category="INSERT_CATEGORY_ID"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">
  
  <div class="product-category-result-list">
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Show More Results
    		</div>
    {% endif %}
  </div>
</span>

The Category Page functionality supports pagination through the Clerk("content"); functionality, as can be seen in the above example. You can read more about this here

Using data-orderby and data-orderallows you to build a sorting dropdown for letting users sort by various attributes like price or name.

Attribute	Value
`data-limit`	The amount of products to be returned at a time
`data-category`	The ID of the category to show results for
`data-orderby`	An attribute to sort the result on, like `price`, `age` or `name`An attribute to sort the result on, like `price`, `age` or `name`. If not set, Clerk orders results by the AIs prediction of what is most likely to sell right now.
`data-order`	Either `asc`or `desc`for ascending or descending result order when using `data-orderby`

Filtering results

Category pages can be filtered by visitors using the built-in Facets functionality. Read more about this here.