Excluding Products

Exclude Specific Products

To avoid recommending products already in the shopping cart, simply add the attribute data-exclude to the recommendation embed codes.

The content of data-exclude should be a list of the product IDs you don't want to be shown in the recommendations - ie. the products in the customer's shopping cart.

<span class="clerk"
  data-template="@clerk-complementary"
  
  data-exclude="[45654]">
</span>

<span class="clerk"
  data-template="@clerk-complementary"
  
  data-exclude="[123, 456]">
</span>

Exclude Duplicates

🚧

Be aware of slower load times

Using this feature forces the loading of multiple Clerk.io recommendations one after each other, instead of at the same time, thus adding a extra weight to the page load time.

Make sure the tradeoff in load time is worth avoiding the duplicates.

Clerk.js provides a simple way to prevent duplicates across multiple recommendations sliders on the same page.

This is done by adding the data-exclude-from attribute on the Clerk Block wherever you want to remove the duplicate from. The value of the attribute should be a CSS selector to the other block to prevent duplicates from.

In the example below, the .clerk-2 slider excludes any product that is in the .clerk-1 slider, and the .clerk-3 slider excludes any products that are in either .clerk-1 or .clerk-2.

<span class="clerk clerk-1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk clerk-2"
  data-exclude-from=".clerk-1"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk clerk-3"
  data-exclude-from=".clerk-1,.clerk-2"
  data-template="@clerk-banner-3">
</span>

You can also limit the exclusion to only show the first n products (a smart move if you have a slider with 20 products but where only 4 are visible at a time).

This is done via the :limit(n) option (where n is the first number of products you want to exclude from).

Here is the same example as above, but where the exclusion id only regards the first 5 products.

<span class="clerk clerk-1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk clerk-2"
  data-exclude-from=".clerk1:limit(5)"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk clerk-3"
  data-exclude-from=".clerk-1:limit(5),.clerk-2:limit(5)"
  data-template="@clerk-banner-3">
</span>