---
title: "StorefrontJS | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/ui-framework/storefrontjs/"
---

# StorefrontJS

> StorefrontJS is a JavaScript library compiled into **storefront.main.js**. This library is a part of the Storefront SDK and is designed to simplify the process of integrating e-commerce solutions with Customer's Canvas Hub. StorefrontJS allows you to accept identifiers of the product and the customer of an online store, implement the configuration load, and manage all the necessary calls to the editor to control the personalization process.

## Purpose

This library allows you to:

- Obtain information about the [PIM products](https://customerscanvas.com/docs/hub/dev-center/concepts/pim.md) and product workflows.
- Load the [editor](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/about-design-editor.md) to be displayed on the client's page.
- Process the editing completion event.
- Restore the editing process.

## Application

The compiled StorefrontJS script is used for creating custom integrations, loading workflow files, and starting the personalization process. There are also ready-made integrations built on StorefrontJS for e-commerce systems such as:

- Shopify
- nopCommerce
- WooCommerce
- Magento
- BigCommerce

## Placing of StorefrontJS in your system

This is how the StorefrontJS script can be integrated into your system.

```mermaid
graph TB
  subgraph Your application
    fr(Frontend scripts) --> stjs(StorefrontJS)
  end
  stjs--Get workflow-->bo(CCHub)
  bo--Workflow data-->stjs
  stjs--->ed(Editors)
```

1. The compiled `storefront.main.js` script is loaded into your application and connected from the desired page.
2. The client scripts in your application refer to the global `Aurigma` object and start working with StorefrontJS.
3. Then, the script obtains the integration information, workflow, and links to editors and scripts from Customer's Canvas Hub.
4. After that, the required applications are loaded according to the product specification.
5. The personalization results from the editors are processed in your application.

## Where do I get the StorefrontJS script?

You can refer to **storefront.main.js** from our CDN.

```html
<script src="https://staticjs.blob.core.windows.net/back-office/storefront/1.2.36/storefront.main.js"></script>
```

For more details, you can refer to the [BackOffice Integration sample](https://github.com/aurigma/CCHSample-BackOfficeIntegration-aspnetmvc).