Designing

Using Clerk.io to Show an Entire Category Page

See how you can use the Bestsellers in Category logic to render an entire Category with Clerk.io

IMPORTANT: Replacing your category-products requires technical knowledge of how your webshop works. We recommend getting a developer to do it for you.

Clerk.io's Bestsellers in Categories logic supports showing both Facets (filters) and sorting products .

This means that it can be used to render an entire category page.

Replacing your category products with Clerk results:

In order to do this, you must do the following:

  • Create a Grid Design in your my.clerk.io backend for showing products

  • Hide / deactivate your existing products in categories

  • Insert a Clerk.io embedcode to show products on the category pages, by dynamically inserting the ID of the category, just like you would with a recommendations banner.

A simple example of an embedcode generating a category page with Facets, and ordered by lowest prices first can be seen here:

<div id="clerk-category-filters"></div>
<ul id="clerk-category-results"></ul>

<span
    id="clerk-category"
    class="clerk"
    data-template="@category-page-results"
    data-target="#clerk-category-results"
    data-category="INSERT_CATEGORY_ID"
   
    data-facets-target="#clerk-category-filters"
    data-facets-attributes='["price","brand"]'
    data-facets-titles='{"price":"Price","brand":"Manufacturer"}'
    data-orderby="price"
    data-order="asc">
</span>

Simply replace INSERT_CATEGORY_ID with the code for printing the category ID, like .

Setting a Fallback

Since after this, Clerk.io will effectively show most products on the webshop, its important to have a Fallback option in case Clerk.io does not respond. 

While this happens very rarely, as attested by our Status Page , you can never be too sure.

An easy way of doing this is in the frontend is:

  • Using display:none; on your existing category-products

  • Using a script that uses an Event to confirm that Clerk returned products.

  • Using jQuery's .show()  method to show existing products if Clerk does not respond.

This script checks whether Clerk has responded within 750ms and if not, shows the existing products:

<script type="text/javascript">
      var clerk_response = false;
      var category_page_selector = ".category-container"

      Clerk('on','response', function(data,content){
        if (content.result.length > 0) {
            clerk_response = true;
        }
      });

      setTimeout(
        function(){
          if (clerk_response == false) {
             $(category_page_selector).show();
          }
        }
      ,750)
</script>

Simply replace your .category-container with the class or ID of your product-container HTML.

Full Shopify Example

Here is an example of how to achieve this in Shopify.

1. In my.clerk.io, go to Search -> Designs -> New Design (You need to create a grid-design similar to a Search page for your categories)

2. From the options, choose Search Page, give the Design a good name, like "Category Page Results" and click Create Design:

3. On the next screen you can style the results page to your liking using the Design Editor. When you are done, click Save Design:

4. Go to Recommendations -> Content -> New Content:

5. Name your Content "Category Page Results" and click Create Content:

6. Under Choose Product Logic, select Bestsellers in Category:

7. Under Select Design, choose a good number of products to show per page and select the Design you created.

8. Click Update Content:

9. Now go to your webshops backend, and locate the file that generates your category-pages. In Shopify, this is often:
Online Store -> Themes -> Actions -> Edit Code -> Sections -> collection-template.liquid:

10. Locate the code that contains all of the products in your category page. You can use your browsers Inspect tool to easily find this on any of your category pages:

11. There are multiple ways of hiding the existing products, but an easy way is to simply add style="display:none;"  to the container-class:

12. Now you need to embed the Clerk.io results. To make it easy, we have prepared the following embedcode that already has pre-styled facets. It will show facets based on price and vendor but this can be extended:

<div class="page-width" id="Collection">
   
    <div id="clerk-show-facets">Show/Hide filters</div>
    <div id="clerk-facets-container">
      <div id="clerk-category-filters"></div>
    </div>

    <span
        id="clerk-category"
        class="clerk"
        data-template="@category-page-results"
        data-target="#clerk-category-results"
        data-category=""
        data-facets-target="#clerk-category-filters"
        data-facets-attributes='["price","vendor"]'
        data-facets-titles='{"price":"Price","vendor":"Manufacturer"}'>
    </span>

    <ul id="clerk-category-results"></ul>

    <script>
      $("#clerk-show-facets").click(function() {
        $("#clerk-facets-container").toggle(300);
      });
    </script>
    <style>
      #clerk-show-facets {
          width: 50%;
          height: 40px;
          margin: 0px auto 20px auto;
          background-color: #2cae39;
          color: white;
          text-align: center;
          border-radius: 3px;
          line-height: 40px;
        }

      #clerk-category-results {
          display: inline-block;
          width: 100%;
      }

      #load-more-results {
          margin: 10px 10px 5px 10px;
          padding: 10px 20px;
          border-radius: 3px;
          background-color: #E8B22F !important;
          color: white;
          line-height: 1em;
          cursor: pointer;
      }


      #clerk-category-load-more-button {
          display: none;
      }

      .clerk-button-container {
          text-align: center;
      }

      .clerk-product {
          box-sizing: border-box;

          float: left;

          width: calc(25% - 10px);

          margin: 5px;
          padding: 5px;

          text-align: center;
          line-height: 1.2em;

          border: 1px solid #eee;
          border-radius: 3px;
      }

      .clerk-product img {
          max-width: 100%;
          max-height: 180px;

          margin: 5px 10px;
      }

      .clerk-product-name {
          overflow: hidden;
          color: black;
          height: 2.3em;

          margin: 5px 10px;
      }

      .clerk-price-wrapper {
          height: 20px !important;
          margin-bottom: 10px;
      }

      .clerk-new-price{
          color: black;
      }

      .clerk-product-price {
          margin: 5px;
          color: black;
          font-weight: bold;
      }

      .clerk-old-price {
          font-size: 0.8em;
          color: black;
      }

      .clerk-cta-button, .button {
          margin: 10px 10px 5px 10px;

          padding: 10px 20px;

          border-radius: 3px;

          background-color: #E8B22F !important;
          color: white !important;

          line-height: 1em;
      }

      .clerk-slider {
          list-style: none;

          width: 100%;

          margin: 10px 0;
          padding: 0;
      }

      .clerk-product > a, .clerk-product > a:hover, .clerk-product > a:visited {
          display: block;

          color: inherit;
          text-decoration: inherit;
      }

      @media only screen and (max-width : 800px) {
            .clerk-product {
                width: calc(50% - 10px);
            }
            #clerk-category-filters {
                width: 100%;
                float: left;
            }
            #clerk-facets-container {
                display: none;
            }
      }

      @media only screen and (min-width : 800px) {
          #clerk-category-results {
              width: 78%;
              float: right;
          }
          #clerk-category-filters {
              width: 20%;
              float: left;
          }
          #clerk-show-facets {
              display: none;
          }
      }
    </style>
 </div>
  <script type="text/javascript">
   var clerk_response = false;
      var category_page_selector = ".category-container"

      Clerk('on','response', function(data,content){
        if (content.result.length > 0) {
            clerk_response = true;
        }
      });

      setTimeout(
        function(){
          if (clerk_response == false) {
             $(category_page_selector).show();
          }
        }
      ,750)
  </script>

13. Insert the embedcode above of the container you have just hidden:

14. Click Save:


15. Your category results are now shown by Clerk.io:


After this step you can of course style the pages in any way you want with Designs.