Ecommerce platform for Headless CMSs
Commerce Layer is the fastest, most flexible, developer-friendly commerce platform to use with any headless CMS.
Headless at the core
Headless commerce works cohesively with a headless CMS because both systems operate independently of traditional front-end constraints, offering flexibility and efficiency. A headless CMS manages and delivers content through APIs. Similarly, Commerce Layer manages and delivers commerce data through a single API, enabling consistent and optimized information distribution across various platforms.
Content vs commerce
Commerce Layer specializes in handling commerce data such as pricing, promotions, and inventory. Headless CMSs excel at managing content data such as product copy, headlines, or images. Coupling Commerce Layer to a headless CMS is the most natural way to build a product page.
Managing the catalog
Unlike other commerce platforms, at Commerce Layer we believe that rich product data shouldn't sit in the commerce platform. We suggest building the product catalog in the CMS because it excels at managing editorial content, including product descriptions
Which CMS to use with Commerce Layer?
Commerce Layer and headless CMSs serve the product page in parallel. The question of technical compatibility is not an issue. However, an integration can be useful if you use your CMS to structure your catalog and want to sync SKU data from Commerce Layer. Since most CMSs provide RESTful and/or GraphQL APIs, you can build such an integration. We also provide direct integrations.
Let's build a site with your CMS of choice
How to build an ecommerce website with a headless CMS and Commerce Layer.
- Select your headless CMS.
- Define your content model.This step is crucial because it dictates how you organize, store, and retrieve content. The content model includes the types of content (articles, blog posts, landing page, etc.) and their attributes (title, description, images).
- Establish your product catalog model. The product catalog model includes the type of content (product) and their attributes (size, color etc…).
- Create your Commerce Layer account and populate it with your commerce data. Input product details like SKUs and pricing.
- Populate the CMS with product content such as product descriptions. If you are migrating or replatforming, you can use a script to populate products in both platforms. You can also use an ERP to keep SKU data in sync across your content and commerce platform.
- Choose a frontend technology. Modern JavaScript frameworks and libraries like React, Vue.js, or Angular are popular choices due to their component-based architectures and robust ecosystems.
- Fetch content from the CMS and display it on your website using the CMS’s content delivery API.
- Fetch commerce data from Commerce Layer. You can display Commerce Layer data by using our API, SDK, React components, or whatever tool you want.
- With your content successfully integrated into your frontend, the next steps involve styling your site with CSS, adding interactivity with JavaScript, and optimizing the user experience.
- Deploy your website to your hosting provider.
Sync SKUs between the CMS and Commerce Layer
Explore different solutions to sync your SKUs between Commerce Layer and CMSs
In order to sync SKUs between the CMS and Commerce Layer, you can export your SKU codes from one platform and import them to the other. You can easily build a script to automate this export/import process. The SKU code is the key information to share, but you can also pass other information such as prices or description.
You can create products first in the CMS catalog and then use the API to create products in Commerce Layer.
In order to sync SKUs between the CMS and Commerce Layer via the API, you should start by creating SKUs in your CMS and use the API to create the SKU in Commerce Layer. Once the product is created in Commerce Layer, you manually edit the Commerce Layer-only fields in Commerce Layer. Alternatively, you can add commerce-specific fields in your CMS and send them to Commerce Layer for creation.
The most scalable solution to sync SKUs between the CMS and Commerce Layer is to use an ERP or a database, leveraging webhooks and an API.
Commerce Layer has direct integrations with some CMSs to keep your SKUs and related information in sync between both platforms at all times. You can explore our list of integrations here.
Content Management Systems Integrations
Contentful helps digital teams assemble content and deliver experiences faster. Launch new digital products, build new channels, and enter new markets with a headless content platform.
A headless content as a service (CaaS) platform that focuses on the intuitiveness of the user experience, extreme scalability, best-in-town customer service, and high-quality integrations with modern web frameworks.
The first headless content management and federation platform. With the industry's most versatile GraphQL content APIs and a novel approach to external data sourcing via API extensions, it enables use cases beyond simple 'headless CMS' capabilities.
A unified content platform that powers a variety of digital experiences.
Storyblok is a headless content management system that empowers 100,000 + developers and content teams to create better content experiences across any digital channel.
A modern CMS that lets companies deliver targeted content at scale, with a built-in personalization engine that simplifies the development of exceptional customer experiences that engage and convert.
Contentstack is a composable digital experience platform assembled from a series of best-of-breed solutions. These solutions work together via APIs to deliver content and digital experiences to customers in a more agile and flexible way than a single, integrated, and essentially monolithic platform.