---
title: "Connecting PIM products to e-commerce products | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/api/backoffice/connecting-ecommerce-products/"
---

# Connecting PIM products to e-commerce products

> Learn how to connect a PIM product to an e-commerce product in your tenant programmatically by using the BackOffice API.

You can create connections between PIM products and products in your e-commerce system. This article explains how to integrate a PIM product with an e-commerce system of the  **Custom** type using the BackOffice API.

## Using the API

Before you start, ensure your app has the necessary credentials to make API calls:
1. In your tenant, go to **Settings** > **External apps** and register your app.
2. Implement authentication in your app as described in the [Authorization](https://customerscanvas.com/docs/hub/dev-center/api/auth.md) article.

## C# API Client

To use the C# API client, initialize it with the required configuration:

```csharp
var httpClient = new HttpClient();
var backOfficeApiConfiguration = new Aurigma.BackOfficeApi.ApiClientConfiguration()
{
    ApiUrl = BACKOFFICE_API_URL,
    AuthorizationToken = AUTH_TOKEN
};
var storefrontsApiClient = new StorefrontsManagementApiClient(backOfficeApiConfiguration, httpClient);
var productReferencesApiClient = new ProductReferencesManagementApiClient(backOfficeApiConfiguration, httpClient);
```

## Connecting PIM Products to E-Commerce Products

To connect a PIM product to an e-commerce product:
1. Create a custom storefront.
2. Create a product reference for the PIM product.

### Example

```csharp
// Create a custom storefront
var storefront = await storefrontsApiClient.CreateCustomStorefrontAsync(
    tenantId: TENANT_ID,
    body: new CreateCustomStorefrontDto()
    {
        Name = "Test Storefront",
        ApiKey = "Test-Api-Key",
        ApiKeyHeaderName = "Test-Api-Key-Header",
        ShopUrls = [ "http://localhost" ]
    });

// Create a product reference
var productReference = await productReferencesApiClient.CreateAsync(
    tenantId: TENANT_ID,
    storefrontId: storefront.Id,
    body: new CreateProductReferenceDto()
    {
        ProductId = PRODUCT_ID,
        ProductReference = "test-storefront-product",
        ProductReferenceName = "Test Storefront Product",
        ProductReferenceType = ProductReferenceType.Product
    });

// Verify the created reference
var productReferences = await productReferencesApiClient.GetAllAsync(
    tenantId: TENANT_ID,
    storefrontId: storefront.Id,
    productId: PRODUCT_ID);
```

:::note
The `ProductReference` field is an arbitrary string representing the e-commerce product ID.
:::