Milano Calçados
Fashion and footwear · 2024 · 5 months
Migration from VTEX CMS to VTEX IO: a faster store, ready for headless, across a chain of 33 stores in 5 states.
High-performance storefronts, built to convert.
Decoupled frontend, technical SEO and UX on par with the best stores, with VTEX FastStore, Shopify Hydrogen, Salesforce Composable Storefront and Next.js on any API-first engine.
Headless separates the storefront from the commerce engine. The front-end team works on a modern stack, the platform keeps handling catalog, orders and payments, and each layer evolves at its own pace.
The layers of a headless stack
Front end at the edge, an API layer with a stable contract and the commerce engine as the brain behind every order. Each layer has a clear responsibility and evolves on its own.
Web and PWABrowser and installable app
Edge infrastructureCDN, SSG/ISR and cache
Storefront (head)Next.js, Remix or Hydrogen
App and POSSame APIs, another head
Headless CMSContent and landing pages
API layerVersioned REST and GraphQL
Commerce engineCatalog, orders, inventory
ERP and taxIntegrations unchanged
WMS and TMSWarehouse and transportation
- Web and PWABrowser and installable app
- Edge infrastructureCDN, SSG/ISR and cache
- Storefront (head)Next.js, Remix or Hydrogen
- Headless CMSContent and landing pages
- App and POSSame APIs, another head
- API layerVersioned REST and GraphQL
- Commerce engineCatalog, orders, inventory
- ERP and taxIntegrations unchanged
- WMS and TMSWarehouse and transportation
Reference architecture. The framework and CMS change according to the commerce platform and the stack the company already uses.
What we deliver in headless
Four fronts handled by the same squad, from the storefront to operations after go-live.
Headless storefront
Decoupled frontend on a modern stack, running at the edge and consuming the platform's APIs.
- Storefronts in Next.js, Remix, Astro and Hydrogen.
- VTEX FastStore, Shopify Hydrogen and Salesforce Composable Storefront.
- Visual customization without the constraints of a theme.
- Independent deploys on Vercel, Netlify or Cloudflare.
Technical SEO and performance
Pre-rendered HTML, dynamic metadata and structured data on every page.
- SSG and ISR for thousands of product and category pages.
- AVIF and WebP images with lazy loading.
- schema.org and structured data in search results.
- Core Web Vitals measured with real users, not just in the lab.
PWA and multichannel
The same API layer serves web, app, PWA and point of sale.
- Offline-first PWA with native installation.
- Mobile app and POS on the same commerce APIs.
- Headless CMS in place of the native visual editor.
- Integrations with ERP, WMS, TMS and tax systems preserved.
Continuous operations
After go-live, the storefront becomes a product, with a dedicated squad and improvements every sprint.
- Discovery, A/B testing and funnel optimization.
- Personalization, recommendations and AI applied to the storefront.
- Continuous monitoring and incident response.
- New components delivered every sprint.
The right framework for your context
The choice comes from the commerce platform, the maturity of the front-end team and the type of catalog, not from a preference for a stack.
VTEX FastStoreVTEX's official composable stack, built on Next.js and GraphQL, with SSG and ISR and native integration with VTEX APIs.
Shopify HydrogenRemix-based framework with Oxygen hosting, for Shopify Plus brands that want their own storefront.
Salesforce Composable StorefrontThe official reference architecture for Salesforce Commerce Cloud, formerly PWA Kit, built in React with SCAPI.
Next.js CommerceVercel's open source commerce template. Flexible, runs on any headless engine.
RemixFull-stack framework focused on web fundamentals, with a good developer experience and progressive enhancement.
AstroIslands architecture, with minimal client-side JavaScript. Suited to content and light commerce.
Full-stack or headless: what changes
Six dimensions to compare the platform's native storefront with a decoupled front end.
Performance
In full-stack, speed depends on the theme and installed apps. In headless, pre-rendered HTML and edge caching.
Visual customization
Limited to the platform theme in full-stack; free in headless, component by component.
Technical SEO
Depends on the theme in full-stack. In headless, metadata, structured data and rendering are under the team's control.
Learning curve
Low in full-stack. Medium to high in headless, which requires mastery of SSR, ISR, edge caching and streaming.
Multichannel
Limited in full-stack. Native in headless, with the same API layer serving web, app and point of sale.
Independent deploys
In full-stack, front end and back end ship together. In headless, each layer has its own deploy cycle.
Where headless is already running
One public case and scenarios delivered by CCX, described without identifying the clients.
Read case
Multi-brand fashion
Delivered scenario · VTEX FastStore
A fashion group with three brands migrated from a monolithic CMS to FastStore.
Food retail
Delivered scenario · PWA with VTEX checkout
A regional chain implemented a headless PWA with VTEX checkout: an installable app and offline mode for areas with poor connectivity.
From assessment to storefront in production
- 1
Technical assessment
In up to two sessions, at no cost: architecture, framework, roadmap and estimated Core Web Vitals gains.
- 2
MVP
Home, listing and product pages live in 8 to 10 weeks.
- 3
Full scope
Complex catalog, multiple brands, B2B and heavy integrations, in 3 to 6 months or more.
- 4
Continuous operations
Dedicated squad, A/B testing, funnel optimization and continuous monitoring.
Frequently asked questions about headless commerce
What is headless commerce?
It is an architecture model in which the frontend, the storefront, is fully decoupled from the commerce backend. The storefront consumes APIs to display catalog, cart, search and checkout, which makes it possible to use modern technologies such as Next.js, React or Vue without depending on the platform's native screens.
What is the advantage of going headless?
Better Core Web Vitals performance, visual freedom, the same API layer for web, app, PWA and point of sale, deploy cycles independent of the backend, and room to test and optimize the experience without touching the commerce core.
Is headless the same as composable commerce?
No. Headless separates frontend and backend; composable goes further and splits the backend into multiple services. A store can be headless with a monolithic backend (traditional VTEX with Next.js) or headless and composable (FastStore with Algolia, Contentful and Stripe). See the composable commerce page.
Is VTEX FastStore headless?
Yes. FastStore is VTEX's official headless and composable framework, based on Next.js, optimized for Core Web Vitals, with native SSG and ISR and direct integration with VTEX APIs. It is the natural next step for VTEX brands that want high performance.
Can I use Shopify Hydrogen in Brazil?
Yes. Hydrogen is Shopify's official headless framework, based on Remix, and works with Shopify Plus in Brazil. CCX already implements Hydrogen for Brazilian stores integrated with local payment methods, NF-e and ERPs.
How long does a headless project take?
Typical projects take 3 to 6 months. MVPs focused on home, listing and product pages can launch in 8 to 10 weeks. Full scopes, with a complex catalog, multiple brands, B2B or heavy integrations, usually take more than 6 months.
Doesn't SEO get worse on a headless storefront?
Quite the opposite: when well implemented, SEO improves. Next.js and FastStore use SSG and ISR to deliver pre-rendered HTML, with rich metadata, structured data and Core Web Vitals in the green.
Do I need to rebuild the ERP or SAP to migrate?
No. Headless affects the storefront and the commerce layer. Integrations with ERP, WMS, TMS and tax systems stay as they are; we replace the presentation layer and, sometimes, part of the order orchestration.
Headless commerce guide
Why headless became the standard, what it really costs and how to run the storefront after go-live.
Why headless became the standard in modern commerce
Ten years ago, using the platform's out-of-the-box storefront was an advantage: less code, lower cost and faster launch. With Core Web Vitals weighing on Google rankings, most traffic on mobile and increasingly sophisticated visual competition, the math changed.
Native storefronts rarely load fast without heavy customization, and customizing a monolith is expensive, slow and fragile. In headless, the front-end team works on a modern stack (Next.js, Remix, Hydrogen) and the commerce engine keeps doing what it does well: catalog, orders and payments.
The real trade-offs of going headless
Headless is not a free lunch. The team needs to master modern front end, with SSR, SSG, ISR, edge caching and streaming, govern API contracts and handle versioning. The initial cost goes up, and out-of-the-box platform features, such as the visual editor and native preview, give way to a headless CMS.
CCX assesses honestly whether the company has the maturity to reap the return. When it does, the gains in performance, SEO and agility are significant. When it doesn't, an optimized native storefront may be the more prudent path.
SEO and performance first
Next.js and FastStore generate thousands of product and category pages with server-ready HTML, through SSG and ISR. Images are served in AVIF or WebP with lazy loading, metadata is dynamic and schema.org structured data shows up in search results.
CCX sets up real user monitoring, with Vercel Speed Insights or Datadog, to track how the store actually behaves, not just how it performs in the lab.
Continuous operations and product evolution
Migrating to headless doesn't end at go-live. The storefront becomes an ongoing product, with a dedicated squad, discovery cycles, A/B testing, funnel optimization and new components every sprint.
CCX offers post-go-live operating models that cover evolution and incident response. PWA, offline mode, experiments, personalization, recommendations and AI become simpler to deploy on this stack.
Design your headless storefront with CCX.
Thirty minutes with a CCX engineer, at no cost, to review your current architecture and leave with a framework, a delivery roadmap and an estimate of Core Web Vitals gains.