Note
Sample code in this article is taken from Quicksilver templates. The _Quicksilver_ Commerce sample site and installation instructions are available for [download from GitHub](🔗).
## Preparation
See [Commerce Cloud API overview](🔗) for the initialization steps. Then, continue with the steps below.
### 1. Define the recommended sections
In the _Views/Shared/\_Layout.cshtml_ view, add following sections:
recommendations-upper
recommendations-left
recommendations-right
recommendations-bottom
Example:
### 2. Add the client-side tracking script
To the _Views/Shared/\_Layout.cshtml_ view, add following @using statement to the top of file.
Then, add @Html.LoadTrackingAPI() to the <HEAD> tag, like this.
### 3. Configure the template engine to render recommended data
This section provides an example of using the _mustache.js_Â template engine to render recommended data. The following code resides inside a partial view named \_Views/Shared/\_\_ _RecommendationsTemplates.cshtml._
### 4. Render recommendation templates
In the _Views/Shared/\_Layout.cshtml_ view, render the templates created in step 3.
### 5. Render the page tracking script
To the _Views/Shared/\_Layout.cshtml_ view, add following code to render the page tracking script.
After that, the page should look like this.
## Track with custom attributes
This section explains how to create, send, then consume recommendations on a page with custom attributes. This integration is applied to a Product package page.
### 1. Create product tracking data
### 2. Add a custom attribute
### 3. Send a tracking request and receive recommendations
In the view _Views/Packages/Index.cshtml_, use these settings to render more than one recommendation section.
The section mapping defines options to render the recommended data.
The first section mapping:
Type of productAlternativesWidget
Maximum items are 2
The HTML tag with the CSS class is recommendations-right
The second section mapping:
Type of\*\*Â \*\*productCrossSellsWidget
No maximum
The HTML tag with the CSS class is recommendations-bottom