---
title: Get started with Salesforce B2B Commerce for Visualforce
slug: '2925'
canonical_url: https://docs.coveo.com/en/2925/
collection: coveo-for-commerce
source_format: adoc
---
# Get started with Salesforce B2B Commerce for Visualforce

[.version.c4sc.c4sc-edition.pro-enterprise]
[Pro and Enterprise editions^,role=version-tag](https://www.coveo.com/en/pricing/sitecore)


Coveo for Salesforce B2B Commerce for Visualforce lets you grow your revenue by making B2B and D2C buying experiences relevant and personal, with Enterprise-grade AI-powered search and product recommendations technology.

This section explains how to [index](https://docs.coveo.com/en/204/) the necessary objects and how to create a Coveo-powered search page within Salesforce B2B Commerce for Visualforce.

> **Important**
>
> The earliest version of Salesforce B2B Commerce for Visualforce (formerly CloudCraze) that's supported by Coveo is 4.12.

> **Note**
>
> Contact [Coveo Support](https://connect.coveo.com/s/case/Case/Default) to get started with Salesforce B2B Commerce for Visualforce.

## Prerequisites

To take advantage of Coveo for Salesforce B2B Commerce for Visualforce in your Salesforce organization, you must:

. [Install Salesforce B2B Commerce for Visualforce](https://help.salesforce.com/articleView?id=b2b_commerce_install.htm&type=5) in your Salesforce organization.

. [Set up a Salesforce storefront](https://help.salesforce.com/articleView?id=b2b_commerce_setup.htm&type=5) in your Salesforce organization.

> **Note**
>
> When you reach the **Load Storefront Data from a Static Resource** step, if you have your own set of data or you plan to use your own set, choose the **Minimum data required to start building a storefront** option.

. [Install the Coveo for Salesforce application](https://docs.coveo.com/en/1102/).

. [Configure the Coveo for Salesforce application](https://docs.coveo.com/en/1153/).

. [Create a dedicated Salesforce crawling user](https://docs.coveo.com/en/1052#prerequisite-create-a-dedicated-salesforce-crawling-user).

## Indexing Salesforce B2B Commerce for Visualforce

### Step 1: Configure your B2B and D2C Commerce sources

To configure your B2B and D2C Commerce sources, you must create two separate sources (that is, one for the custom `Product` objects and another for the custom `Order` objects).

In order for your source to benefit from the group of functionalities that promote the [personalization feature](https://docs.coveo.com/en/m5kd0347/), it needs to be [Stream API enabled](https://docs.coveo.com/en/2006#enable-coveo-personalization-as-you-go).

#### Add a source for the `Product` objects

. On the [**Sources**](https://platform.cloud.coveo.com/admin/#/orgid/content/sources/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/content/sources/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/content/sources/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/content/sources/)) page, click **Add source**.
. [Add a Salesforce source](https://docs.coveo.com/en/1052#add-a-salesforce-source) linked to your Salesforce organization with the B2B and D2C Commerce content and specify the following configuration information:

> **Important**
>
> While you can use a Salesforce source to index your [catalog data](https://docs.coveo.com/en/obcf0333/) and create a [catalog entity](https://docs.coveo.com/en/3143/), you won't be able to fully leverage Coveo's commerce AI capabilities, such as [Coveo Personalization-as-you-go](https://docs.coveo.com/en/m5kd0347/).
> 
> To fully leverage these capabilities, you must use the [Catalog source](https://docs.coveo.com/en/l5if0244/) to index your catalog data instead of a Salesforce source.
> Note that there are other [alternatives to the Catalog source](https://docs.coveo.com/en/3448#alternatives-to-the-catalog-source), but require special configurations.
 .. **Source name**: Enter a significant name.
This source will index your `Product` objects.
 .. **Schema version**: Select the **Current** version in the dropdown menu.
 .. **Objects**:
  *** Unselect **Service Cloud**.
  *** Select **B2B Commerce for Visualforce (Products)** to index the custom [`Product`](https://developer.salesforce.com/docs/atlas.en-us.noversion.b2b_commerce_dev_guide.meta/b2b_commerce_dev_guide/ccrz%5F%5FE_Product%5F%5Fc.htm) and [`PriceListItem`](https://developer.salesforce.com/docs/atlas.en-us.noversion.b2b_commerce_dev_guide.meta/b2b_commerce_dev_guide/ccrz%5F%5FE_PriceList%5F%5Fc.htm) objects (that is, `ccrz__E_Product__c` and `ccrz__E_PriceList__c`, respectively).

> **Note**
>
> The `Product` object retrieves information related to the `Categories`, `Inventory_Items`, `ProductMedias`, and `Specs` child objects.
. Click **Add source**.

> **Note**
>
> Product spec fields are automatically selected when you add a source for the `Product` objects.

#### Add a source for the `Order` objects

. On the [**Sources**](https://platform.cloud.coveo.com/admin/#/orgid/content/sources/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/content/sources/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/content/sources/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/content/sources/)) page, click **Add source**.
. [Add a Salesforce source](https://docs.coveo.com/en/1052#add-a-salesforce-source) linked to your Salesforce organization with the B2B and D2C Commerce content and specify the following configuration information:
 .. **Source name**: Enter a significant name.
This source will index your `Order` objects.
 .. **Schema version**: Select the **Current** version in the dropdown menu.
 .. **Objects**:
  *** Unselect **Service Cloud**.
  *** Select **B2B Commerce for Visualforce (Orders)** to index the custom [`Order`](https://developer.salesforce.com/docs/atlas.en-us.noversion.b2b_commerce_dev_guide.meta/b2b_commerce_dev_guide/ccrz%5F%5FE_Order%5F%5Fc.htm) and [`OrderItem`](https://developer.salesforce.com/docs/atlas.en-us.noversion.b2b_commerce_dev_guide.meta/b2b_commerce_dev_guide/ccrz%5F%5FE_OrderItem%5F%5Fc.htm) objects (that is, `ccrz__E_Order__c` and `ccrz__E_OrderItem__c`, respectively).
. Click **Add source**.

### Step 2: Create a catalog entity to support Commerce entitlements

. On the [**Catalogs**](https://platform.cloud.coveo.com/admin/#/orgid/commerce/catalogs/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/commerce/catalogs/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/commerce/catalogs/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/commerce/catalogs/)) page, click **Add catalog**.
. [Add a catalog entity](https://docs.coveo.com/en/3139#add-a-catalog-entity) for your [product source](https://docs.coveo.com/en/2925#add-a-source-for-the-product-objects).
. [Create a new catalog configuration](https://docs.coveo.com/en/3139#catalog-configuration).
. Once your catalog entity is created, [push your catalog data into the source](https://docs.coveo.com/en/p48b0322/).
This ensures that the catalog entity is properly registered.

## Integrating Coveo in your B2B and D2C for Visualforce Storefront

### Step 1: Create a Visualforce page for your Salesforce B2B and D2C Commerce Storefront search page

You must first [Create a Visualforce page](https://help.salesforce.com/articleView?id=pages_creating.htm&type=5) for your Salesforce B2B and D2C Commerce Storefront search page:

. In Salesforce, under **Setup**, search for and select **Visualforce Pages** (**Build** > **Develop** > **Visualforce Pages**).
. On the **Visualforce Pages** page, select **New**.
. Give your new component a **Label**;
the **Name** should be filled automatically.
. On the **Visualforce Markup** tab, enter the following code:

```xml
 <apex:page sidebar="false" showHeader="false" standardStylesheets="false" applyHtmlTag="false">
     <CoveoV2:SearchInterface name="<YOUR_COMMERCE_INTERFACE_PAGE_NAME>" catalog="<YOUR_CATALOG_ID>"></CoveoV2:SearchInterface>
 </apex:page>
```

Where you replace:

 ** `<YOUR_COMMERCE_INTERFACE_PAGE_NAME>` with the name of your Commerce interface.
 ** `<YOUR_CATALOG_ID>` with the ID of your [catalog entity](https://docs.coveo.com/en/3143/).

. Click **Save**.

> **Notes**
>
> * All attributes and options of the `SearchInterface` section are mandatory.
> However, you may want to wait before putting the `catalogId` if you want to create your search page with more than only products.
> * You may notice that the Interface Editor toolbox is slightly out of place in your Visualforce community.
> You can fix the issue by injecting the following CSS:
>  
> ```css
  <style>
      .toolbox-container > div {
          margin-left: -7em;
      }
  </style>
```

### Step 2: Configure a Coveo for Salesforce B2B and D2C Commerce Storefront search page

. Access the Visualforce page you created in [the previous step](#step-1-create-a-visualforce-page-for-your-salesforce-b2b-and-d2c-commerce-storefront-search-page) (see [View and Edit Visualforce Pages](https://help.salesforce.com/articleView?id=pages_edit.htm&type=5)).
. On your Visualforce page **Page Detail** subpage, click **Preview**.
. In the webpage that opens, click **Set up a search page** to build your Coveo-powered search interface.
. Click **Create page**.

### Step 3: Create a "Subscriber Pages" object

Use [this procedure](https://help.salesforce.com/articleView?id=sf.b2b_commerce_subscriber_page.htm&type=5) to create your **CC Subscriber Page**.

> **Important**
>
> Note the value you assigned for the **Page Key** field as you'll need it later on.

### Step 4: Add the Coveo Searchbox in your Salesforce B2B and D2C Commerce Storefront search page

You must create a Visualforce page for your Commerce Search box:

. In Salesforce, under **Setup**, search for and select **Visualforce Pages** (**Build** > **Develop** > **Visualforce Pages**).
. On the **Visualforce Pages** page, select **New**.
. In the **Label** box, type `SearchBox`;
the **Name** should be filled automatically.
. On the **Visualforce Markup** tab, enter the following code:

```xml
 <apex:page docType="html-5.0" sidebar="false" showHeader="false" standardStylesheets="false" cache="false" applyHtmlTag="false">
     <CoveoV2:JsSearch
             catalog="YourCatalogId"
             stylesheet="CoveoFullSearchNewDesign.css"/>

     <!-- Declare a template containing the CoveoSearchbox -->
     <script id="coveoSearchbox" type="text/template">
     <div id="searchbox" style="z-index:20;min-height:100%;background:white;
 ">
         <div class="CoveoSearchbox" data-enable-query-syntax="true"></div>
     </div>
     </script>
     <script>
     jQuery(function ($) {
         // Inject the template declared before in place of the `.search_form` element that's contained in the productSearchView section.
         CCRZ.uiProperties.productSearchView.desktop.tmpl = 'coveoSearchbox';
         CCRZ.uiProperties.productSearchView.phone.tmpl = 'coveoSearchbox';

         // When the productSearchView section is refreshed, initialize the Searchbox.
         CCRZ.pubSub.once('view:productSearchView:refresh', function (event, args) {
             var root = document.getElementById('searchbox');
             if (root) {
                 Coveo.initSearchbox(root,'/DefaultStore/ccrz__CCPage?pageKey=coveo&CoveoStorefront=DefaultStore');
             }
         });
     });
     </script>
 </apex:page>
```

Where you replace:

 ** `YourCatalogId` with the ID of your [catalog entity](https://docs.coveo.com/en/3143/).
 ** `coveo` (next to `pageKey=`) with the page key created in [step 3](#step-3-create-a-subscriber-pages-object).
 ** `DefaultStore` (next to `CoveoStorefront=`) with the name of the Storefront in which you want the Coveo Searchbox.

. Click **Save**.
. From the **CC Admin** tab, access your Storefront **Configuration Settings**, and add your new page as a PageInclude, on Header Include End (see [Page Includes](https://help.salesforce.com/articleView?id=sf.b2b_commerce_page_include.htm&type=5) and [Sample Gross Layout Override](https://help.salesforce.com/articleView?id=sf.b2b_commerce_gross_layout_override.htm&type=5)).

Your configurations should look as follows:

[cols="a,a", frame=none, grid=none]
|===
| ![New Page Setting configuration screen in Salesforce](:coveo-for-salesforce/new-page-setting-1.png)
| ![New Page Setting configuration screen in Salesforce](:coveo-for-salesforce/new-page-setting-2.png)
|===

### Step 5: Refresh your configuration cache

Once you're done with the previous steps, you must [refresh your configuration cache](https://help.salesforce.com/articleView?id=b2b_commerce_configuration_cache.htm&type=5) to take advantage of Coveo for B2B and D2C Commerce in your organization.

## What's next?

Learn how to [display product pricing in a B2B and D2C search page](https://docs.coveo.com/en/1243/).

Learn about common [Coveo for Salesforce customizations](https://docs.coveo.com/en/1181/).