Content

Options

Add content to your website with ease.

General #

Website Content makes it easy to work with Recommendations and Search results.

The Designs are stored at Clerk.io, and you only need to insert a small embed code into the page where you want products to show. This can be done by using the Embedded Code section or the Injection section.

Any number of Content blocks can be based on a single Design, or you can create separate Designs for each Content.

You can check your existing Content, and create new ones, by clicking on Search/Recommendations and then Content in the side-menu:

Each unique Content block is controlled by its own settings. You can choose a unique name for all Content blocks, which will also function as its tracking label.

Each Content block’s Settings page is divided into four sections that you can access by clicking Edit Content.

Name your content #

Controls the Name and tracking Labels for the Content block.

Choose product logic #

Defines which type of products should be displayed in the Content.

You can also control whether any Filters should be applied, if, for example you only want to show products above or below or certain price, or from a specific brand.

Select design #

This lets you choose how many products to show, and which Design to base the Content on. If you have a title/headline variable in your design, you can add the titles to be shown for the Content here as well.

Insert into website #

Content blocks are attached to an embedcode which enables them to be rendered on all pages where you have inserted Clerk.js. You can either simply insert the embedcode where you want this Content to be shown or use our injection feature.

Note that embed codes might need variables like product IDs, category IDs or email, depending on the logic.

Using embedded code #

Embed code is a small snippet of code that you can insert into your website. It can be found by selecting Using embedded code:

Using injection #

Injection is a feature that allows you to insert content blocks into your website without having to add the embed code manually. It is done by selecting Using injection:

Below is a description of the different injection options:

Option	Description
Unique CSS selector to identify it	Insert a unique CSS selector that will identify the content block on the page. Choose also where it should be injected; After, Before, Inside or Replace.
Exclude Duplicates	Choose if you want to exclude products that are already shown in other clerk content blocks on the same page.
Category ID, Product ID, Email CSS Selector	If the logic is set to show products from a specific category, product or email address, you can insert the CSS selector of the category, product or email ID here.
Category, Product, Email attribute	If the logic is set to show products from a specific category, product or for a specific email address, you can insert the attribute that contains the category, product or email value here. E.g. if the attribute is `value-category="category-123"`, you would insert `"value-category"` in this field.
Extract Category ID, Product ID, Email ID from attribute removing the string	If the attribute that contains the category, product or email address value is part of a longer string, you can insert the part to be removed here. E.g. if the attribute is `value="category-123"` and you want to extract the ID, you would insert `"category-"` in this field.

Headlines #

Managing headlines is easy with the standard setup in Content.

On the Edit Content page, click Select Design to see the Headline input-field:

Change the text in the Headline box and click Save.

The change will be displayed immediately after when you refresh your webshop.

Dynamic text field tags #

Our standard designs use tags for setting different headlines for each Content.

These tags can be be used in any text field in Design Editor designs, and anywhere in code designs.

Tags have the syntax {{ variable }} and can have any name you choose.

Start by going to Designs and click Edit Design for the one you want to change:

On the Edit Design page, insert a headline tag with {{ headline }} in the HTML Section:

Click Save & Close and you will be able to write a Headline from your Content tab.

You can add as many text-fields as you want, Headline is just an example.

Anything you write in HTML Section with the {{ variable }} syntax will be usable as an input-field from Content.

These tags can also be used in any text field in a Design Editor design

Removing duplicated products #

Using this feature forces the loading of multiple Clerk.io recommendations one after another, instead of at the same time, thus adding an extra weight to the page load time.
Make sure the tradeoff in load time is worth avoiding the duplicates.

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

One is to use the Exclude Duplicates option in the Inject Content section, selecting the Clerk content that you want to exclude duplicates from- either by choosing it from the list or specifying a CSS selector:

The other option is by adding the data-exclude-from attribute on the Clerk block that you want to remove the duplicates from. The value of the attribute should be a CSS selector for the other block to prevent duplicates from.

In the example below, the .clerk2 slider excludes any product that is in the .clerk1 slider, and the .clerk3 slider excludes any products that are in either .clerk1 or .clerk2 sliders.

<span class="clerk clerk1"
  data-template="@clerk-banner-1">
</span>

<span class="clerk clerk2"
  data-exclude-from=".clerk1"
  data-template="@clerk-banner-2">
</span>

<span class="clerk clerk3"
  data-exclude-from=".clerk1,.clerk2"
  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 only four are visible at any one 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 from above, but where the exclusion ID only regards the first five products.

<span class="clerk clerk1"
  id="clerk1"
  data-template="@clerk-banner-1">
</span>

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

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

Excluding specific products #

To avoid showing certain products, simply add the attribute data-exclude to an existing embedcode.

This should be a list of the product IDs that you don’t want to be shown in the block.

For example:

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