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="{{ collection.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>
If not using Shopify, make sure to replace with a shortcode that inserts your category ID.
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) {
document.querySelector(category_page_selector).style.display = '';
}
}
,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="{{ collection.id }}"
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>
document.querySelector("#clerk-show-facets").addEventListener('click', function(event) {
el = document.querySelector("#clerk-facets-container");
if(el.style.display == '' || el.style.display == 'block'){
el.style.display = 'none';
} else {
el.style.display = '';
}
});
</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) {
document.querySelector(category_page_selector).style.display = '';
}
}
,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.