---
title: "Commerce Layer API + Laioutr"
canonical_url: "https://www.laioutr.com/en/blog/commerce-layer-api-laioutr-frontend-connection"
locale: en
meta:
description: "How the Commerce Layer REST and GraphQL APIs connect to the frontend with Laioutr."
"og:description": "How the Commerce Layer REST and GraphQL APIs connect to the frontend with Laioutr."
"og:title": "Commerce Layer API + Laioutr"
---
# Commerce Layer REST and GraphQL API + Laioutr: How the Frontend Connects
Table of contents
1. [1.What the REST and GraphQL API provides](#what-the-rest-and-graphql-api-provides)
2. [2.Laioutr is the consumer, Commerce Layer is the source of truth](#laioutr-is-the-consumer-commerce-layer-is-the-source-of-truth)
3. [3.What this means in practice](#what-this-means-in-practice)
4. [4.A configured layer, not a greenfield build](#a-configured-layer-not-a-greenfield-build)
5. [5.Performance and hosting](#performance-and-hosting)
6. [6.FAQ](#faq)
1. [1.What the REST and GraphQL API provides](#what-the-rest-and-graphql-api-provides)
2. [2.Laioutr is the consumer, Commerce Layer is the source of truth](#laioutr-is-the-consumer-commerce-layer-is-the-source-of-truth)
3. [3.What this means in practice](#what-this-means-in-practice)
4. [4.A configured layer, not a greenfield build](#a-configured-layer-not-a-greenfield-build)
5. [5.Performance and hosting](#performance-and-hosting)
6. [6.FAQ](#faq)
If you run Commerce Layer and want a modern frontend without building one from scratch, the integration question is simple: how does the frontend layer talk to Commerce Layer? This article walks through how Laioutr connects to the REST and GraphQL API and what stays where.
## What the REST and GraphQL API provides
Commerce Layer deliberately ships no frontend; the presentation layer is entirely your choice. The API serves product and catalog data, cart operations, customer accounts and checkout. Because the API is the contract, any frontend can consume it, including Laioutr.
## Laioutr is the consumer, Commerce Layer is the source of truth
Laioutr connects to the existing REST and GraphQL API as a configured layer, not a custom integration project. Commerce Layer remains the single source of truth: catalog, pricing, promotions, inventory and orders stay in the backend. There is no data duplication and no sync layer to keep consistent. The frontend requests data when it renders and sends cart and checkout actions back through the API.
## What this means in practice
- Product and category pages render from live REST and GraphQL API responses
- Cart and checkout actions go through the API, so order logic stays in Commerce Layer
- Customer accounts and order history come from the API
- B2C and B2B specifics are served through the API and rendered in Laioutr components
## A configured layer, not a greenfield build
A custom frontend has to handle every API edge case itself. Laioutr ships the commerce components and their API behaviors prebuilt, so the connect step is configuration against your schema. Marketing teams then compose [pages and campaigns](https://www.laioutr.com/en/composable-headless-frontend) on top without touching the integration.
## Performance and hosting
Laioutr serves the frontend from an EU CDN with a [Lighthouse 100 target](https://www.laioutr.com/en/product/performance-core-web-vitals) and server-side rendering for SEO. Frontend-layer caching reduces load on the Commerce Layer backend for read-heavy catalog traffic.
## FAQ
### Does Laioutr store our product data?
No. Data stays in Commerce Layer. Laioutr requests it at render time through the REST and GraphQL API; there is no duplicate datastore.
### Is the backend touched during setup?
No backend re-architecture is required. You use the REST and GraphQL API and configure the Laioutr connect layer. See the [Commerce Layer pillar page](https://www.laioutr.com/en/headless-frontend-for-commerce-layer) or [talk to our team](https://www.laioutr.com/en/contact).
More on Laioutr: [Personalization](https://www.laioutr.com/en/product/personalization).
Related reading: [BigCommerce GraphQL Storefront API + Laioutr: How the Frontend Connects](https://www.laioutr.com/en/blog/big-commerce-api-laioutr-frontend-connection) and [Pimcore GraphQL API (Datahub) and REST + Laioutr: How the Frontend Connects](https://www.laioutr.com/en/blog/pimcore-api-laioutr-frontend-connection).
---
Share this article
[Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcommerce-layer-api-laioutr-frontend-connection) [Share on X](https://x.com/intent/post?url=https%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcommerce-layer-api-laioutr-frontend-connection&text=) [Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcommerce-layer-api-laioutr-frontend-connection) [Share on Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcommerce-layer-api-laioutr-frontend-connection&description=) [Share via email](mailto:?subject=&body=%0A%0Ahttps%3A%2F%2Fwww.laioutr.com%2Fen%2Fblog%2Fcommerce-layer-api-laioutr-frontend-connection)
## More interesting articles
Practical know-how for frontend development, smart agents, and headless
[To the blog](https://www.laioutr.com/en/blogs)
[iPhone Duo and Ecommerce: What Merchants Need to Know Now
iPhone Duo goes on sale on October 23, 2026. Online stores don't need a dedicated app or a custo…](https://www.laioutr.com/en/blog/iphone-duo-ecommerce-foldable-storefront)
[Structured Product Data: How It Shows Up in Your Storefront
Structured product data means every product fact lives in a typed attribute with a unit, a stable id…](https://www.laioutr.com/en/blog/structured-product-data-pim-frontend-2026)
[44% Decide via Trial or PoC: How to Run a Storefront PoC in DACH
In DACH, software decisions are increasingly made hands-on: in the study "Software Buying in DA…](https://www.laioutr.com/en/blog/storefront-proof-of-concept-dach-buyers-2026)
[Frontend Management Platform Comparison: How to Choose the Right FMP
Choosing a frontend management platform (FMP) is less about feature lists and more about where your …](https://www.laioutr.com/en/blog/frontend-management-platform-comparison-how-to-choose-2026)
[DAM, PIM, and CMS Are Converging: What It Means for Your Storefront
DAM, PIM, and CMS vendors are moving into each other's territory, and more teams now evaluate on…](https://www.laioutr.com/en/blog/dam-pim-cms-convergence-content-hub-storefront-2026)
[Contentful Live Preview: What Your Frontend Has to Deliver
Contentful Live Preview lets editors see a draft right next to the entry editor and watch changes ap…](https://www.laioutr.com/en/blog/contentful-live-preview-frontend-perspective-2026)
[Content Governance at Scale: Product Content and Brand Assets
Content governance at scale means that roles, approvals, brand rules, asset rights and translations …](https://www.laioutr.com/en/blog/content-governance-product-content-brand-assets-frontend-2026)
[AI Agents as Frontend Operators: Architecture and Control Model
An AI agent becomes a frontend operator when it watches the running storefront, spots concrete issue…](https://www.laioutr.com/en/blog/ai-agents-as-frontend-operators-2026)
[Shopping Agents Read Your Feed: What Agentic Commerce Changes
Agentic commerce adds a new reader to your product data: shopping agents in ChatGPT, Google AI Mode,…](https://www.laioutr.com/en/blog/shopping-agents-product-feeds-agentic-data-distribution-2026)
[Server-Side Tracking in E-Commerce: Making Measurement Complete Again
Server-side tracking moves the forwarding of analytics and conversion events from the visitor's …](https://www.laioutr.com/en/blog/server-side-tracking-ecommerce-complete-measurement-2026)
[Product Image Deep Links, Not ZIP Files: Assets That Stay Current
If you still send product images to retailers, marketplaces and press as ZIP files, every package st…](https://www.laioutr.com/en/blog/product-image-deeplinks-asset-distribution-2026)
[PrestaShop 8 to 9 Upgrade Without Replatforming: Decouple the Frontend
You can take most of the risk out of the PrestaShop 8 to 9 upgrade by moving the storefront off the …](https://www.laioutr.com/en/blog/prestashop-8-to-9-upgrade-without-replatforming-2026)
[Order Management With an OMS Like fulfillmenttools: The Frontend View
An efficient order management system decides which location fulfills an order, how much stock is rea…](https://www.laioutr.com/en/blog/order-management-fulfillmenttools-oms-frontend-2026)
[No Replatforming Budget in 2026? Why the Frontend Gets Approved
If your 2026 budget has no room for a replatforming project, you are not alone, and you do not have …](https://www.laioutr.com/en/blog/no-replatforming-budget-frontend-project-approval-2026)
[Garden Retail Order Management: What Your Storefront Must Show
In garden and DIY retail, one cart can hold a parcel item, a patio set that ships by freight, live p…](https://www.laioutr.com/en/blog/garden-retail-order-management-seasonal-frontend-2026)
[](https://www.laioutr.com/en/apps/shopify)
Laioutr
[Shopify](https://www.laioutr.com/en/apps/shopify)
Shopify is a commerce platform for selling online and in physical retail.
[](https://www.laioutr.com/en/apps/shopware)
Laioutr
[Shopware](https://www.laioutr.com/en/apps/shopware)
Shopware is a flexible ecommerce platform from Europe for product catalogs and omnichannel commerce.
[](https://www.laioutr.com/en/apps/adobe-commerce)
Laioutr
[Adobe Commerce](https://www.laioutr.com/en/apps/adobe-commerce)
Adobe Commerce is an enterprise commerce platform for complex, global B2C and B2B scenarios.
Planned
[](https://www.laioutr.com/en/apps/b2b-sellers)
Laioutr
[B2Bsellers](https://www.laioutr.com/en/apps/b2b-sellers)
B2B suite for Shopware that turns an online store into a professional B2B commerce platform.
Planned
[](https://www.laioutr.com/en/apps/commerce-layer)
Laioutr
[Commerce Layer](https://www.laioutr.com/en/apps/commerce-layer)
Commerce Layer is a headless commerce platform for making inventory and catalogs available online.
[](https://www.laioutr.com/en/apps/commercetools)
Laioutr
[Commercetools](https://www.laioutr.com/en/apps/commercetools)
Commercetools is a SaaS-based headless ecommerce platform used worldwide.
[](https://www.laioutr.com/en/apps/emporix)
Laioutr
[Emporix](https://www.laioutr.com/en/apps/emporix)
Emporix is a composable, API-first commerce platform for scalable B2B and B2C scenarios.
Planned
[](https://www.laioutr.com/en/apps/hcl-software)
Laioutr
[HCL Software](https://www.laioutr.com/en/apps/hcl-software)
Enterprise suite for digital commerce and experience with extensive configurability.
Planned
[](https://www.laioutr.com/en/apps/intershop)
Laioutr
[Intershop](https://www.laioutr.com/en/apps/intershop)
Enterprise commerce platform for complex B2B and B2C business models.
Planned
[](https://www.laioutr.com/en/apps/magento-2)
Laioutr
[Magento 2](https://www.laioutr.com/en/apps/magento-2)
Widely used, extensible commerce platform for B2C and B2B scenarios.
[](https://www.laioutr.com/en/apps/oxid-eshop)
Laioutr
[OXID eShop](https://www.laioutr.com/en/apps/oxid-eshop)
OXID eShop is an extensible commerce platform for complex B2B and B2C requirements.
Planned
[](https://www.laioutr.com/en/apps/patchworks)
Laioutr
[Patchworks](https://www.laioutr.com/en/apps/patchworks)
Patchworks is a low-code iPaaS that connects ecommerce, ERP, WMS, 3PL, and marketplaces.
Planned
[](https://www.laioutr.com/en/apps/PrestaShop)
Laioutr
[Prestashop](https://www.laioutr.com/en/apps/PrestaShop)
Open-source commerce platform for small and midsize merchants in Europe and beyond.
Planned
[](https://www.laioutr.com/en/apps/saleor)
Laioutr
[Saleor](https://www.laioutr.com/en/apps/saleor)
Open-source, API-first commerce platform built on GraphQL for custom storefronts.
Planned
[](https://www.laioutr.com/en/apps/salesforce-commerce-cloud)
Laioutr
[Salesforce Commerce Cloud](https://www.laioutr.com/en/apps/salesforce-commerce-cloud)
Salesforce Commerce Cloud is a cloud-based enterprise commerce platform for businesses of any size.
Planned
[](https://www.laioutr.com/en/apps/sap-commerce-cloud)
Laioutr
[SAP Commerce Cloud](https://www.laioutr.com/en/apps/sap-commerce-cloud)
Enterprise commerce platform for complex catalogs, pricing models, and omnichannel journeys.
Planned
[](https://www.laioutr.com/en/apps/scayle)
Laioutr
[Scayle](https://www.laioutr.com/en/apps/scayle)
SCAYLE is a commerce engine that helps brands and retailers scale their business.
Planned
[](https://www.laioutr.com/en/apps/spryker)
Laioutr
[Spryker](https://www.laioutr.com/en/apps/spryker)
Composable commerce platform for sophisticated B2B and B2C business models.
[](https://www.laioutr.com/en/apps/sylius)
Laioutr
[Sylius](https://www.laioutr.com/en/apps/sylius)
Sylius is a developer-friendly ecommerce framework for B2C and B2B shopping experiences.
Planned
[](https://www.laioutr.com/en/apps/vendure)
Laioutr
[Vendure](https://www.laioutr.com/en/apps/vendure)
Vendure is a headless commerce platform for businesses with complex requirements.
Coming Soon
[](https://www.laioutr.com/en/apps/vtex)
Laioutr
[VTEX](https://www.laioutr.com/en/apps/vtex)
Cloud-native, composable commerce platform for B2B and B2C at scale.
Planned
[](https://www.laioutr.com/en/apps/websale)
Laioutr
[Websale](https://www.laioutr.com/en/apps/websale)
Stable, enterprise-ready commerce backend for complex retail environments.
Strategy call
## Ready to turn your frontend into a control layer?
Show us your stack, your roadmap, your replatforming scenario, and we'll show you how Laioutr fits, what it costs, and how fast you go live.
*"After 30 minutes, we knew Laioutr makes our replatforming feasible." - Daniel B., CEO,* [*hygibox.de*](https://hygibox.de)
[Book a demo](https://www.laioutr.com/en/contact)
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://www.laioutr.com/#identity",
"name": "Laioutr",
"legalName": "Laioutr GmbH",
"url": "https://www.laioutr.com/",
"logo": {
"@type": "ImageObject",
"url": "https://www.laioutr.com/laioutr-logo.png",
"width": 400,
"height": 400
},
"email": "info@laioutr.com",
"telephone": "+49 30 75435715",
"address": {
"@type": "PostalAddress",
"streetAddress": "Münchweilersteig 5",
"postalCode": "12559",
"addressLocality": "Berlin",
"addressCountry": "DE"
},
"vatID": "DE450905846",
"sameAs": [
"https://www.linkedin.com/company/laioutr",
"https://www.youtube.com/@Laioutr",
"https://x.com/laioutr"
]
},
{
"@type": "WebSite",
"@id": "https://www.laioutr.com/en/#website",
"url": "https://www.laioutr.com/en/",
"name": "Laioutr",
"inLanguage": "en",
"publisher": {
"@id": "https://www.laioutr.com/#identity"
}
},
{
"@type": "BlogPosting",
"@id": "https://www.laioutr.com/en/blog/commerce-layer-api-laioutr-frontend-connection#article",
"headline": "Commerce Layer REST and GraphQL API + Laioutr: How the Frontend Connects",
"description": "How the Commerce Layer REST and GraphQL APIs connect to the frontend with Laioutr.",
"image": [
"https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/cmq66tixvg4fu07mkrb9uoojb"
],
"datePublished": "2026-07-09T04:45:51.564344+00:00",
"dateModified": "2026-07-09T04:45:51.364865+00:00",
"inLanguage": "en",
"articleSection": "Insights",
"keywords": "Headless Commerce, Frontend Management, Frontend Engineering, Composable, Commerce Layer",
"author": {
"@type": "Person",
"name": "Marcel Thiesies",
"jobTitle": "Co-Founder & CEO, Laioutr",
"image": "https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/cmj01b962364n07lb0iguvts5"
},
"publisher": {
"@id": "https://www.laioutr.com/#identity"
},
"mainEntityOfPage": {
"@id": "https://www.laioutr.com/en/blog/commerce-layer-api-laioutr-frontend-connection#webpage"
},
"isPartOf": {
"@id": "https://www.laioutr.com/en/#website"
}
},
{
"@type": "WebPage",
"@id": "https://www.laioutr.com/en/blog/commerce-layer-api-laioutr-frontend-connection#webpage",
"url": "https://www.laioutr.com/en/blog/commerce-layer-api-laioutr-frontend-connection",
"name": "Commerce Layer REST and GraphQL API + Laioutr: How the Frontend Connects",
"description": "How the Commerce Layer REST and GraphQL APIs connect to the frontend with Laioutr.",
"inLanguage": "en",
"isPartOf": {
"@id": "https://www.laioutr.com/en/#website"
},
"breadcrumb": {
"@id": "https://www.laioutr.com/en/blog/commerce-layer-api-laioutr-frontend-connection#breadcrumb"
},
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/cmq66tixvg4fu07mkrb9uoojb"
},
"datePublished": "2026-07-09T04:45:51.564344+00:00",
"dateModified": "2026-07-09T04:45:51.364865+00:00",
"mainEntity": {
"@id": "https://www.laioutr.com/en/blog/commerce-layer-api-laioutr-frontend-connection#article"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://www.laioutr.com/en/blog/commerce-layer-api-laioutr-frontend-connection#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Laioutr",
"item": "https://www.laioutr.com/en/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Insights",
"item": "https://www.laioutr.com/en/blogs/insights"
},
{
"@type": "ListItem",
"position": 3,
"name": "Commerce Layer REST and GraphQL API + Laioutr: How the Frontend Connects"
}
]
}
]
}
```