Recommendations

Clerk.io offers more than 23 different types of product logics, making it possible for you to display completely automated products on any page. This article explains how to get started when using a Clerk.js setup in DanDomain Classic.

For our full Best Practices, read this article on which Recommendations to use.

Slider Setup #

Recommendations are created with Sliders that reference a Design. Below is the basic guide for setting up a Slider.

Following the steps in my.clerk.io > Settings > Setup Guides will automatically create the Sliders for our Best Practices.

Create Design #

Recommendations are shown as a slider by default. This allows customers to see more products with fewer clicks. You can either use the Design Editor to configure it visually, or use code designs.

A design can be reused for any number of Recommendations sliders you create.

Design Editor #

1. Go to Recommendations > Designs and click New Design.
2. Choose Product Slider
3. Pick a template, name it, then click Create design.
4. Adjust the design as needed.

Code Design #

1. Go to Recommendations > Designs and click New Design.
2. Choose Other designs > Blank > Code.
3. Name it, then click Create design.
4. Build your design using Liquid code.

If you want a starting design, check the Slider template further down.

Create Content #

This contains all the settings used to display the Recommendations, and make it embeddable in your website. Follow these steps for each Recommendations banner you want to create.

1. Go to Recommendations > Sliders.
2. Click New Content.
3. Give it a descriptive name. We recommend naming it based on the page and logic you want to use. E.g., “Home Page / Visitor Recommendations”.
4. In Content type, select the product logic you want to use from the dropdown. You can see an overview of all the product logics here.
5. In Design select the design you created from the dropdown and choose the number of products you want to show.
6. Click Save at the top of the screen.

Add to Website #

To add Clerk Recommendations on your website, you have two options: Injection and Embedded code.

1. Open the Insert into website tab.
2. Here you have two options:
   • Using injection allows you to insert the code by using a CSS selector.
   • Using embedded code allows you to insert the code into your website manually.
3. Pick the option that is easiest for you to use.
4. For some Logics you will see the Choose your platform dropdown. Select DanDomain Classic in these cases. This will prefill the embedcode with the correct DanDomain Classic shortcodes.

To add sync details or start a sync, go to my.clerk.io > Data > Configuration.

Follow the steps below in the DanDomain Classic backend to insert your sliders.

Pages #

Below are the specific pages where you should insert Recommendations, and which types you should use, in order to follow our Best Practices.

Homepage #

1. In my.clerk.io, create 3 Sliders with the following logics:
   • Visitor Recommendations
   • Bestsellers
   • Hot Products
2. In DanDomain Classic, go to Design > Egne Sider.
3. Under Forside, find the page showing your homepage (often your theme name + “Forside”).
4. Click Kilde to view HTML.
5. Insert the embed code where you want the slider, then click Gem.

<span class="clerk" data-template="@SLIDER_ID"></span>

Category Page #

1. In my.clerk.io, create a Slider with the logic Bestsellers In Category.
2. In the Insert into website > Choose your platform dropdown, select DanDomain Classic, and copy the embedcode.
3. In DanDomain Classic, go to Design > Egne Sider.
4. Under Vareliste, find the page for category pages (often your theme name + “Produktliste”).
5. Click Kilde.
6. Insert the embed code where you want the slider, then click Gem.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-category="CATEGORY_ID">
</span>

Product Page #

1. In my.clerk.io, create 2 Sliders with the following logics:
   • Best Alternative Products
   • Best Cross-Sell Products
2. In Insert into website > Choose your platform dropdown, select DanDomain Classic for each of them and copy the embedcodes.
3. In DanDomain Classic, go to Design > Egne Sider.
4. Under Produktkort, find the page for product pages (often your theme name + “Produktkort”).
5. Click Kilde.
6. Insert the embed code where you want the slider, then click Gem.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-products="[PRODUCT_ID]">
</span>

Add-To-Basket Step #

1. In my.clerk.io, create a Slider with the logic Best Cross-Sell Products.
2. Give it the name “Add-To-Basket / Others Also Bought”. This is important for the embedcode to work properly.
3. Click Save in the top of the page.
4. In the Clerk.io DanDomain Classic app, enable Powerstep.
5. Add the IDs of the sliders you want to show, separated by commas.
6. Click Save.

Cart Page #

1. In my.clerk.io, create a Slider with the logic Best Cross-Sell Products.
2. In the Insert into website > Choose your platform dropdown, select DanDomain Classic, and copy the embedcode.
3. In DanDomain Classic, go to Design > Egne Sider.
4. Under Kurv, find the cart page (often “Kurv” or “Lille Kurv”).
5. Click Kilde.
6. Insert the embed code where you want the slider, then click Gem.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-products="[PRODUCT_ID]">
</span>

Exit Intent #

1. In my.clerk.io, create a Slider with the logic Visitor Recommendations.
2. In the Clerk.io DanDomain Classic app, find Exit Intent.
3. Check Enabled and click Gem.

Blog Page #

1. Copy the embed code into the content page where you want it to show.
2. Replace INSER_PAGE_HERE with the page ID you want to show products for.

<span class="clerk"
  data-template="@SLIDER_ID"
  data-page="INSER_PAGE_HERE">
</span>

Starting Templates #

If you want to use code designs, these templates can get you started.

Slider Code #

This template will render a standard slider with common product information that you can tailor to your needs.