# Moving to commercetools Frontend

When moving to commercetools Frontend, you might want to take many things with you from the setup of your legacy project setup, like product data, code, and designs. This page will go through what you can take with you, how you can do it, and which external systems are involved.

## Product data

commercetools Frontend does not store product data, therefore you should integrate Frontend with a headless commerce system to get product data. Frontend comes with an [extension for commercetools commerce APIs](/frontend-development/using-the-commercetools-extension.md). If you need to migrate your product data from your legacy system, data import features are available.

## Customer data

commercetools Frontend does not store customer data, such as accounts, passwords, addresses, carts, orders, or wishlists. Like for product data, you should integrate Frontend with a headless commerce system to manage this data. The out-of-the-box integration with commercetools commerce APIs helps you with it.

## User sessions

It is not possible to migrate user sessions due to privacy restrictions. We recommend that you either ignore this issue or put a prominent banner about your re-launch on your home or landing pages.

## URLs

commercetools Frontend provides flexibility regarding your URL scheme for static pages (for example, landing pages) and dynamic pages (for example, product detail pages).

With commercetools Frontend you can:

- Rebuild the URL paths for static pages [in the Site builder](/frontend-studio/page-folders.md).
- Manipulate the standard URL scheme for [dynamic pages](/frontend-development/developing-a-dynamic-page-extension.md).

However, you might want to change your old URL scheme. In such cases, you can [manage redirects in the Studio](/frontend-studio/redirects-in-the-studio.md) to maintain a good search engine score. Furthermore, if you need to add many redirects to your commercetools Frontend project, you can [upload a CSV file in the Studio](/frontend-studio/redirects-in-the-studio.md#add-bulk-redirects).

## Content

Content management and delivery is a pivotal consideration when migrating to a new solution for digital commerce. Depending on your needs we recommend considering whether to use a headless CMS together with commercetools Frontend.

For further information, see [Using commercetools Frontend with headless CMSs](/frontend-development/frontend-and-headless-cms.md) and [Integrating commercetools Frontend with a headless CMS](/frontend-development/integration-of-frontend-with-headless-cms.md)

## Navigation structure

The recommended way to transfer your existing navigation structure to commercetools Frontend is to model it using the [group](/frontend-development/schemas.md#group) schema field type as any combination of commerce categories and a [tree](/frontend-development/schemas.md#tree) field type, as in the following example.

```json title="Example of navigation schema"
{
  // Other schema properties.
  "schema": [
    {
      // ...
      "fields": [
        {
          "label": "Top categories",
          "field": "topCategories",
          "type": "group",
          "itemLabelField": "name",
          "min": 1,
          "max": 5,
          "fields": [
            {
              "label": "Category name",
              "field": "name",
              "type": "string",
              "translatable": false,
              "required": true
            },
            {
              "label": "Navigation tree",
              "field": "tree",
              "type": "tree"
            }
            //...
        },
        // ...
      ]
    },
  ]
  // Other schema properties.
}
```

If this approach is not suitable for you, you can implement the navigation structure in a Frontend component specific to your needs. This also lets you transfer your existing navigation structure, for example, by:

- Hard-coding the navigation structure into JavaScript code.
- Implementing an extension to a micro service that serves the navigation structure.
- Retrieving navigation from the page folder tree.

## JavaScript/ReactJS components

If you developed your previous project in ReactJS, you might want to re-use your components. To do so, your components must not be hardbound to an application structure and their logic must be well encapsulated. Ideally, you have a set of presentational components as a UI component library. You can wrap this into Frontend components that hold the logic and work as an [adapter](https://en.wikipedia.org/wiki/Adapter_pattern) towards the Frontend component API.

You can copy the existing source code to your GitHub customer repository (see [Customer repository structure](/frontend-development/developer-guide.md) and [Coding guide](/frontend-development/coding-guide.md) for further informarion) or source it as a dependence on your project.

## CSS

If you bring UI components into your project, they will probably already have the related CSS code. You only need to ensure that your CSS works well with our grid system.

If you include the components using Yarn, webpack will automatically include your components' CSS code. If you decide to copy commercetools Frontend's UI component library, you can continue using your CSS by adding it to the library.

For further information, see [Styling your site](/frontend-development/styling-your-site.md).

## Want to know more?

You can sign up for a [guided demo](https://commercetools.com/contact/commercetools-frontend) to discover more on commercetools Frontend.

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Decisions to consider](/frontend-development/decisions-to-consider.md)
- [Next page: Integrating commercetools Frontend with a CMS](/frontend-development/integration-of-frontend-with-headless-cms.md)
- [Search documentation and API specs](/search.md)