---
title: "Academy App"
canonical_url: "https://academy.laioutr.com/en/apps/connect-vtex"
locale: en
meta:
"og:title": "Academy App"
---
[Go to home](https://academy.laioutr.com/en)
- [Apps](https://academy.laioutr.com/en/bereiche/apps)
- [Commerce platforms](https://academy.laioutr.com/en/leitfaeden/commerce-platforms)
- [Connect VTEX](https://academy.laioutr.com/en/apps/connect-vtex)
# Connect VTEX
The VTEX app connects VTEX as the commerce backend of Laioutr. Orchestr brings the VTEX catalogue data into the unified data model, and Studio shows it in the Sections.
## Before you start
- Plan
- Any Laioutr plan plus a VTEX account
- Role
- Developer role on the environment
- Duration
- 8 min
### Prerequisites
- Admin access to the VTEX account
- API credentials from VTEX
Last reviewed on October 15, 2026
Connects VTEX as the commerce backend. Orchestr brings VTEX data into the unified data model so Sections and Blocks in Studio render it without VTEX-specific changes.
## How it works
1. Create API credentials for the connectionWhere: VTEX admin · Role: VTEX admin · Duration: 10 min
2. Install the app from the catalogueWhere: Laioutr Cockpit, Apps · Role: Developer · Duration: 2 min
3. Enter, test and save values under ConfigurationWhere: Laioutr Cockpit, Configuration · Role: Developer · Duration: 5 min
4. Deploy the environment and check data in StudioWhere: Laioutr Cockpit and Studio · Role: Developer, content manager · Duration: 10 min
## Common errors
- The configuration cannot be saved.
- **Cause:** A required setting is empty.
- **Fix:** Fill in the field Cockpit names and save again.
- Test connection reports refused credentials.
- **Cause:** The VTEX credentials are wrong, expired or lack sufficient permissions.
- **Fix:** Check or regenerate the credentials in the VTEX admin and enter them.
- New credentials have no effect on the storefront.
- **Cause:** Saved settings only apply from the next deployment of the environment.
- **Fix:** Rebuild the environment with Deploy.
VTEX is a commerce platform for brands and retailers with large catalogues. The VTEX app connects a VTEX account to Laioutr so that VTEX serves as the commerce backend of the storefront. As with all commerce apps, Orchestr maps the data into the unified Laioutr data model. Sections for product lists, product detail pages and search therefore work with VTEX just like with any other backend.
The app is installed from the Cockpit catalogue like any other. The VTEX credentials go in per environment under **Configuration**, so stage and main can work with different values. The feature set keeps growing; new capabilities arrive with new app versions that can be checked on stage first.
For teams coming from an existing VTEX frontend, VTEX remains the leading system for catalogue and orders while Laioutr takes over the frontend.
## Step by step
1. 1 ### Step 1: Prepare credentials
Create the API credentials for the connection in the VTEX admin or request them from the responsible VTEX team.
2. 2 ### Step 2: Install the app
In Cockpit under **Apps**, add the VTEX app to the project with **Install** in the **Ecommerce** tab.
3. 3 ### Step 3: Enter and test the values
Open **Configuration** in the environment menu, enter the values, check them with **Test connection** and store them with **Save settings**.
4. 4 ### Step 4: Deploy and check
Rebuild the environment with **Deploy**, then check in Studio that products and categories appear in the preview.
## Check the result
The connection test reports success, and Studio shows products and categories from VTEX whose names, prices and images match the VTEX admin.
## Frequently asked questions
Does VTEX remain the leading system?
Yes. Catalogue and orders stay in VTEX; Laioutr reads the data through the app and renders it in the frontend.
How do new VTEX app features reach the project?
Through new app versions. Switch the version in the environment **Package Management**, check it on stage first, then promote it to main.
Which fields does the app ask for?
The form under **Configuration** shows the fields. An orange dot marks missing required settings.
## Related
- [Find, install and configure apps](https://academy.laioutr.com/en/artikel/find-install-and-configure-apps)6 min
Apps are listed in the Cockpit catalogue under Apps, installed per environment and set up under Configuration. The storefront uses them from the next deployment onwards.
- [Enter credentials and test the connection](https://academy.laioutr.com/en/artikel/enter-credentials-and-test-the-connection)5 min
App credentials are entered per environment under Configuration, checked with Test connection and stored with Save settings. They take effect with the next deployment.
- [Check live data in Studio](https://academy.laioutr.com/en/artikel/check-live-data-in-studio)5 min
The Studio preview shows real data from connected apps. On dynamic pages such as the product detail page, the Preview Data field selects which product the preview shows.
- [Create projects and dev and stage environments](https://academy.laioutr.com/en/artikel/create-projects-and-dev-and-stage-environments)6 min
A project is created in the organisation settings under Projects and starts with the live environment main. Further environments such as stage or dev are created in the project under Environments as a copy of an existing one.
## [Commerce platforms](https://academy.laioutr.com/en/leitfaeden/commerce-platforms)
Search this guide
1. [Connect Shopify](https://academy.laioutr.com/en/apps/connect-shopify)10 min
2. [Connect Shopware with the checkout plugin](https://academy.laioutr.com/en/apps/connect-shopware-with-the-checkout-plugin)12 min
3. [Connect VTEX](https://academy.laioutr.com/en/apps/connect-vtex)8 min
4. [Connect Sylius](https://academy.laioutr.com/en/apps/connect-sylius)8 min
5. [Connect JTL-Wawi](https://academy.laioutr.com/en/apps/connect-jtl-wawi)8 min
6. [Connect B2B Sellers for Shopware](https://academy.laioutr.com/en/apps/connect-b2b-sellers-for-shopware)8 min
7. [Connect Magento 2](https://academy.laioutr.com/en/apps/connect-magento-2)10 min In preparation
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-vtex#webpage",
"name": "Academy App",
"url": "https://academy.laioutr.com/en/apps/connect-vtex",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/apps/connect-vtex#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/apps/connect-vtex#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-vtex#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-vtex#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/apps/connect-vtex"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-vtex#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Apps",
"item": "https://academy.laioutr.com/en/bereiche/apps",
"position": 2
},
{
"@type": "ListItem",
"name": "Commerce platforms",
"item": "https://academy.laioutr.com/en/leitfaeden/commerce-platforms",
"position": 3
},
{
"@type": "ListItem",
"name": "Connect VTEX",
"item": "https://academy.laioutr.com/en/apps/connect-vtex",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-vtex#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Does VTEX remain the leading system?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Catalogue and orders stay in VTEX; Laioutr reads the data through the app and renders it in the frontend.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-vtex#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "How do new VTEX app features reach the project?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Through new app versions. Switch the version in the environment Package Management, check it on stage first, then promote it to main.
"
}
},
{
"@id": "https://academy.laioutr.com/en/apps/connect-vtex#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Which fields does the app ask for?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The form under Configuration shows the fields. An orange dot marks missing required settings.
"
}
}
]
}
```