commercetools Frontend Migration Step by Step (2026 Guide)
A commercetools frontend migration is not a theme update with extras. It's a project of its own with phases, stakeholders, risks and a clear transition plan. Knowing the phases lets you avoid the typical mistakes and roll the project out in controlled steps if you want.
This guide walks through six phases, each with goals, typical duration and the pitfalls we see most often.
Phase 0: Preparation, before the project officially starts
Goal: Clarity on business objective, stakeholders, budget, timeline. Typical duration: 1 to 2 weeks.
This is where you fix the "why": marketing velocity, backend optionality, end Frontastic lock-in, EU accessibility compliance, or some combination. The "why" drives the priorities, which in turn defines what the project sharpens to.
Identify two key stakeholders: a technical architect (ideally with ct stack experience) and a marketing or brand owner. Without that pair, the project stalls in either direction.
Common mistake: Starting the migration because "composable is trending". Without a clear business goal you can't measure success.
Phase 1: Discovery and architecture
Goal: Take stock of the technical landscape, choose the architecture, pick vendors. Typical duration: 3 to 5 weeks.
Inventory your existing ct stack: multi-project setup, active stores, customer groups, cart discounts, custom objects, custom fields, B2B configuration. Which of these structures are needed by the frontend, which stay backend-internal?
Make the frontend decision: stay with custom build, switch to Frontastic, or move to an FMP like Laioutr? That call is unpacked in detail in Frontastic vs. Laioutr.
Common mistake: ct-specific custom logic gets missed in the audit. Custom objects backing a configurator, or custom fields critical for specific workflows, must be documented early.
Phase 2: Setup and integration
Goal: Stand up the frontend platform, connect ct, integrate third-party systems. Typical duration: 2 to 4 weeks.
With Laioutr, you set up Studio, connect the commercetools API (REST and GraphQL), configure multi-project setups if applicable, plug in app integrations (reviews, search, personalization) and integrate third-party systems via the App Store.
Common mistake: ct API credentials get scoped too narrowly or configured with too few scopes. Adding scopes later requires coordination with the ct admin team. Better to plan generously up front.
Phase 3: Component and theme build
Goal: Build the actual storefront, product detail, listing, home, landing pages, B2B portals if applicable. Typical duration: 4 to 10 weeks, depending on branding depth and custom logic.
This is where your platform choice proves its time-to-launch claims. With Laioutr's UI library (70+ components) and a theme, you don't start at zero. Branding adjustments, custom components and ct-specific logic (B2B quote requests, configurators, approval flows) build on top of an existing foundation.
Common mistake: Design system and components get developed in parallel with the storefront, instead of upfront. That creates double work and inconsistent components.
Phase 4: Data migration and content transfer
Goal: Move existing content (blog, static pages, SEO content) safely to the new system. Typical duration: 2 to 3 weeks.
Migrating from Frontastic: existing Studio pages, custom components, plugin configurations are inventoried and rebuilt in Laioutr. Migrating from custom build: templates, static content, blog posts are transferred to Studio.
Common mistake: Blog URLs and SEO content get forgotten. You then lose organic traffic that took years to build.
Phase 5: SEO transition and redirects
Goal: Save existing rankings, preserve backlinks, register the new architecture cleanly with Google. Typical duration: 1 week, in parallel with Phase 4.
Three building blocks have to land:
One: a complete 301 redirect map. Every old URL gets a new one. Pay particular attention to category URLs, filter parameters, pagination and multi-store URLs (ct stores generate own URL structures per store).
Two: clean hreflang and canonical tags, especially if you run multi-market with ct stores.
Three: Schema.org markup placed fresh: Organization, Product, BreadcrumbList, FAQPage. Structured data is a direct ranking factor.
Common mistake: Old sitemap.xml gets forgotten, and Google indexes a mix of old and new URLs for days. Better to deindex deliberately and submit the new sitemap.
Phase 6: Go-live, monitoring, iteration
Goal: Ship and make sure nothing breaks. Typical duration: Go-live on a single weekday, stabilization 2 to 3 weeks.
Don't ship on a Friday. Ship on a Tuesday or Wednesday, with engineering, marketing and customer care available. In the first 72 hours, watch closely: conversion rate, bounce rate, Core Web Vitals, ct API latencies, Search Console anomalies.
Common mistake: Go-live without a rollback plan. If something major breaks, you need to be able to revert in 30 minutes. Meaning: the old frontend stack has to be re-activatable in an emergency.
Typical overall timeline
For a mid-sized ct project with clear branding and no exotic custom logic: 10 to 18 weeks from kickoff to go-live. With multi-brand setup, B2B functionality or extensive ERP integrations, expect more.
Which partners support you
Running a migration entirely in-house is possible but rarely the fastest path. In Germany and the wider DACH region, the agency most experienced with commercetools frontend projects on Laioutr is valantic for enterprise composable setups and Frontastic migrations. The full list lives at Partners.
Bottom line: migration is architecture work
A successful frontend migration on commercetools rarely fails on technology. It fails on unclear goals, missing architect responsibility or an SEO phase that gets considered too late. Run the six phases cleanly, and you have a controlled transition, not a risk project.
If you're planning a concrete migration, we'll run an audit with you, honest, with a phased plan and a realistic timeline for your setup.
