Moving to commercetools Frontend

When moving to commercetools Frontend, there's a lot you might want to take with you from your old eCommerce project setup, like product data, code, designs, and so on. This article will go through what you can take with you, how you can do it, and which external systems are involved.

Product data

If you're not starting a brand new business and aren't yet using the headless backend system, you'll want to take your existing data with you from your previous project setup. Such data will probably include the product catalog database, with product variants, categories, attributes, and so on.

Since we don't store this data, you'll need to look to your future headless eCommerce system to get this data. Many headless eCommerce systems come with import tools that can connect directly to your deprecated system or import in standardized formats.

If your target system doesn't support an import, you'll need to implement a transfer mechanism using your source and target system's APIs.

User data

We also don't store user data, such as accounts, passwords, addresses, carts, orders, or wishlists. So, you'll need to use the same import process as product data.

Our customers often ignore migrating existing carts and wishlists because it's too much effort. Providing a voucher with a small discount to your customers who lose their cart or wishlist might mitigate their frustration or even revive old customer relations.

It's impossible to migrate your customer passwords because they're stored in an encrypted way that's impossible to recover for security reasons. Two options to manage this are:

  • Ignore it and let your customers use the recover password function when they try to log in
  • Send a bulk mail to your customers about the system change and proactively ask them for password recovery to re-activate their account

User sessions

It's 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 you with a lot of flexibility regarding your URL scheme for static (for example, landing pages) and dynamic pages (for example, product detail pages), you can:

Still, it mightn't be entirely possible — or even desired — to keep the URL scheme of your old system. To maintain a decent search engine score, commercetools Frontend provides you with a mechanism to manage redirects in the studio (see our redirects in the studio article).

If you want to import a large list of redirects, you can contact our Support team to do an initial import for you using a CSV file. Find out more about adding bulk redirects in our redirects article.

Content

commercetools Frontend allows you to store simple text and Markdown annotated rich text as page content, providing you with basic content management facilities. There's no way to import this information into the studio. So, you'll need to copy and paste the content manually, which should be feasible for smaller content pieces.

If your site consists of large content blocks or a large number of content pages, you can also create an extension to serve content from a headless Content Management System (CMS) to commercetools Frontend. Or serve the content from an arbitrary source (for example, a database or plain text files). See the extensions article for more information.

commercetools Frontend doesn't provide you with a mandatory way to structure your site navigation. Instead, you're free to implement it in a Frontend component specifically to your needs. This should also allow you to transfer your existing navigation structure by, for example:

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

JavaScript/ReactJS components

If you developed your previous project in ReactJS, chances are that you can re-use these within your project. The general precondition is that your components aren't hardbound to an application structure and have their logic 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 deal as an adapter towards the Frontend component API.

You can copy the existing source code to your GitHub customer repository (see the coding guide article for where to put your code or source it as a dependence on your project.

CSS

If you bring UI components into your project, these will probably already have a CSS codebase. 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 component CSS. If you decide to copy our UI library, you can continue using this CSS by adding it to the library.

See the styling your site article for more information.

Still confused?

You can sign up for a guided demo, and our engineers will answer all your questions.