FAQ

Hide Category slider #

When a Clerk.io Recommendation is added to a category page that contains a low amount of products, it will show the same products on the page.

To avoid this, you can hide the Recommendation on category pages, by adding an if statement to the Recommendation design code.

Change the number in the if statement to the minimum amount of products needed to show the Recommendation.

{% if products.length > 7 %}
 
 <!-- Recommendation code -->

{% endif %}

E.g.:

{% if products.length > 7 %}
<div class="clerk-wrapper">
    <div class="clerk-headline-wrapper">
        <h2 class="clerk-headline">{{headline}}</h2>
    </div>
    <div class="clerk-slider-wrapper">
        <div class="clerk-slider">
            {% for item in products %}
            <div class="clerk-slider-content">
                <!-- START PRODUCT CARD -->
                <!-- END PRODUCT CARD -->
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

This approach only hides the slider, but still counts towards your Recommendation usage. For a few categories, this method works well.

However, if you have many categories with low amount of products, we recommend blocking the slider injection at the server level instead.

Recommend compatible products #

Clerk’s AI recommends products based on what is most likely to be bought together. This works well for most stores, but some catalogues contain products that must be physically or technically compatible — like car parts, electronics components, or machine spare parts.

In these cases, a product being popular is not enough. It also has to fit the product a customer is looking at.

The solution is to tag your products with attributes that define compatibility, and then use dynamic filtering to restrict recommendations to only matching products.

Clerk’s AI will still determine which products are the best to show, but only within the subset that passes the filter. This means you get the best of both worlds — intelligent ranking within a compatible selection.

Adding attributes #

The attributes you need depend on how compatibility works in your catalogue. They should be synced to Clerk as part of your product data, either through your integration or via the API.

You can verify that your attributes are available by going to Data > Products and browsing any product.

Here are three common patterns, ranging from simple to advanced.

Single attribute #

If all products from the same vendor are guaranteed to be compatible, add the vendor as an attribute on each product. Then filter recommendations to only show products with the same vendor.

In your embed code, define a variable containing the current product’s vendor and use it as a filter:

<span class="clerk"
      data-template="@product-page-alternatives"
      data-products='["CURRENT_PRODUCT_ID"]'
      data-filter="vendor = $product_vendor">
</span>

var product_vendor = "ACME Corp";

This ensures that a customer viewing a product from ACME Corp will only see recommendations from the same vendor.

Multiple attributes #

Sometimes a single attribute is not enough. For example, a car part might need to match both the make and model of a vehicle.

You can combine multiple conditions in a single filter:

<span class="clerk"
      data-template="@product-page-alternatives"
      data-products='["CURRENT_PRODUCT_ID"]'
      data-filter="make = $product_make and model = $product_model">
</span>

var product_make = "Toyota";
var product_model = "Corolla";

Only products matching both the make and model will be shown.

Compatibility groups #

In more complex catalogues, each product has a unique list of other products it is compatible with, and this cannot be captured by shared attributes alone.

The solution is to compute a group identifier based on the set of compatible product IDs, and store it as an attribute. Products that share the exact same set of compatible items will get the same identifier, allowing you to filter by it.

For example, if products A, B and C are all compatible with each other, you could compute a hash from their sorted IDs and store it as a compatibility_group attribute on each of them. Then filter by it:

<span class="clerk"
      data-template="@product-page-alternatives"
      data-products='["CURRENT_PRODUCT_ID"]'
      data-filter='compatibility_group = $product_group'>
</span>

var product_group = "a1b2c3d4";

This approach works well when compatibility relationships come from an external database or PIM system. The hash should be recomputed whenever the compatibility data changes, and synced to Clerk along with the rest of your product data.

Tip: If a product can belong to multiple compatibility groups, store the identifiers as a list attribute and use the in operator instead of =. Read more about filter syntax.

Choosing the right approach #

Start with the simplest approach that covers your use case. You can always add more attributes later if you need finer control.

For a deeper look at all the ways you can use filters in embed codes, see Dynamic Filtering.