Vtex

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 VTEX.

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.

You can use the Setup Guide under Recommendations - Create a design for your recommendations sliders to quickly create a Design that has the same color scheme and style as your webshop.

Click Publish when you are happy with the styling.

You can easily change this later, under Recommendations - Designs, then click the edit button.

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.

With the Setup Guide, you can see which pages to install recommendations on, and which types to use, to get our Best Practice running. Each step of the Setup Guide focuses on a specific page of the webshop and contains information about:

  • Why recommendations are important on the page.
  • Which recommendations types to use.
  • Where on the page they should be placed.

Click for each type of recommendations you want to use and follow the steps.

Please bare in mind: by only clicking on each block of Recommendations they will turn green as if they were installed - they are not - you still need to click and follow the steps.

Add to Website #

To add Clerk Recommendations on your website, you need to configure the VTEX integration.

  1. On your store theme, add clerkiopartnerdk.integration-vtex 1.x as a theme peerDependency in the manifest.json file:
"peerDependencies": {
"clerkiopartnerdk.integration-vtex": "1.x"
}
  1. Add the clerkio_recommendations block anywhere on your store. Example: in home.json
{
  "store.home": {
    "blocks": [
      "responsive-layout.desktop#homepage",
      "responsive-layout.mobile#homepage"
    ]
  },
  "responsive-layout.desktop#homepage": {
    "children": ["clerkio_recommendations"]
  }
}
  1. Go to VTEX Site Editor, and on the right side menu a ClerkIO block will be displayed. Click on it.
Vtex block clerk recommendations
  1. Fill in the information required on the block:
    • Block Class Name: insert unique identifier for the block within the page it is used on. E.g. clerk-product-page-alternatives
    • Template Name: insert the ID provided by Clerk on the previously created Content.
    • Product Logic: match the recommendation logic to the one specified on the previously created Content on Clerk. The available product logics are:
Vtex block clerk recommendations

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. Add the clerkio_recommendations block to your homepage layout in VTEX Site Editor.
  3. Configure each block with the appropriate Template Name and Product Logic.

Category Page #

  1. In my.clerk.io, create a Slider with the logic Bestsellers In Category.
  2. Add the clerkio_recommendations block to your category page layout.
  3. Configure the block with the Template Name and set Product Logic to match your Content.

Product Page #

  1. In my.clerk.io, create 2 Sliders with the following logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Add the clerkio_recommendations block to your product page layout.
  3. Configure each block with the appropriate Template Name and Product Logic.

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. Add the clerkio_recommendations block to your add-to-basket step/page.
  5. Configure the block with the Template Name and Product Logic.

Cart Page #

  1. In my.clerk.io, create a Slider with the logic Best Cross-Sell Products.
  2. Add the clerkio_recommendations block to your cart page layout.
  3. Configure the block with the Template Name and Product Logic.

Exit Intent #

  1. In my.clerk.io, create a Slider with the logic Visitor Recommendations.
  2. Add the clerkio_recommendations block to your global layout.
  3. Configure the block with the Template Name and Product Logic, and set it to trigger on exit intent.

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 various product information, that you can tailor to your needs.