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.
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.
4. 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. Simply insert the embedcode where you want this Content to be shown.
Note that embed codes might need variables like product- or category IDs , depending on the logic:
Headlines #
Managing headlines is easy with the standard setup in Content.
On the Update Content page, click Select Design to see the Headline input-field:
- Step 1: Change the text in the Headline box
- Step 2: click Update Content.
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 Update Design page, insert a headline tag with {{ headline }} in the Container Code:
Click Update Design 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 Container Code with the {{ TEXT }} 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 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 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.
HTML
<span class="clerk clerk1"
id="clerk1"
data-template="@clerk-banner-1">
</span>
<span class="clerk clerk2"
id="clerk2"
data-exclude-from=".clerk1"
data-template="@clerk-banner-2">
</span>
<span class="clerk clerk3"
id="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.
HTML
<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.
data-exclude should be a list of the product IDs that you don’t want to be shown in the block.
For example:
Exclude Products
<span class="clerk"
data-template="@clerk-complementary"
data-exclude="[45654]">
</span>