---
title: "Academy App"
canonical_url: "https://academy.laioutr.com/apps/vtex-anbinden"
locale: de
meta:
  "og:title": "Academy App"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Apps](https://academy.laioutr.com/bereiche/apps)

- [Commerce-Systeme](https://academy.laioutr.com/leitfaeden/commerce-systeme)

- [VTEX anbinden](https://academy.laioutr.com/apps/vtex-anbinden)

# VTEX anbinden

Die VTEX-App bindet VTEX als Commerce-Backend an Laioutr an. Orchestr bringt die Katalogdaten aus VTEX in das einheitliche Datenmodell, Studio zeigt sie in den Sections.

## Bevor du startest

<dl>

<dt>Tarif</dt>
<dd>Jeder Laioutr-Plan, dazu ein VTEX-Konto</dd>

<dt>Rolle</dt>
<dd>Developer-Rolle in der Umgebung</dd>

<dt>Dauer</dt>
<dd>8 Min.</dd></dl>

### Voraussetzungen

- Admin-Zugang zum VTEX-Konto
- API-Zugangsdaten aus VTEX

Zuletzt geprüft am 15. Oktober 2026

Bindet VTEX als Commerce-Backend an. Orchestr bringt die Daten aus VTEX in das einheitliche Datenmodell, damit Sections und Blocks in Studio sie ohne VTEX-spezifische Anpassung darstellen.

## So funktioniert es

1. API-Zugangsdaten für die Anbindung erzeugenWo: VTEX Admin · Rolle: VTEX-Admin · Dauer: 10 min
2. App im Katalog installierenWo: Laioutr Cockpit, Apps · Rolle: Developer · Dauer: 2 min
3. Werte unter Configuration eintragen, testen und speichernWo: Laioutr Cockpit, Configuration · Rolle: Developer · Dauer: 5 min
4. Umgebung deployen und Daten in Studio prüfenWo: Laioutr Cockpit und Studio · Rolle: Developer, Content Manager · Dauer: 10 min

## Häufige Fehler

<dl>

<dt>Die Konfiguration lässt sich nicht speichern.</dt>
<dd>**Ursache:** Eine Pflichtangabe ist leer.</dd>
<dd>**Lösung:** Das vom Cockpit genannte Feld ausfüllen und erneut speichern.</dd>

<dt>Test connection meldet abgelehnte Zugangsdaten.</dt>
<dd>**Ursache:** Die Zugangsdaten aus VTEX sind falsch, abgelaufen oder ohne ausreichende Rechte.</dd>
<dd>**Lösung:** Zugangsdaten im VTEX-Admin prüfen oder neu erzeugen und eintragen.</dd>

<dt>Neue Zugangsdaten zeigen keine Wirkung auf der Storefront.</dt>
<dd>**Ursache:** Gespeicherte Einstellungen gelten erst ab dem nächsten Deployment der Umgebung.</dd>
<dd>**Lösung:** Die Umgebung mit Deploy neu bauen.</dd></dl>

VTEX ist eine Commerce-Plattform für Marken und Händler mit großen Katalogen. Die VTEX-App verbindet ein VTEX-Konto mit Laioutr, sodass VTEX als Commerce-Backend der Storefront dient. Wie bei allen Commerce-Apps übersetzt Orchestr die Daten in das einheitliche Datenmodell von Laioutr. Sections für Produktlisten, Produktdetailseiten und Suche funktionieren deshalb mit VTEX genauso wie mit jedem anderen Backend.

Die App wird wie jede andere über den Katalog im Cockpit installiert. Die Zugangsdaten aus VTEX kommen je Umgebung unter **Configuration** hinein, sodass stage und main mit unterschiedlichen Werten arbeiten können. Der Funktionsumfang wird laufend ausgebaut, neue Fähigkeiten kommen mit neuen App-Versionen, die sich zuerst auf stage prüfen lassen.

Für Teams, die von einem bestehenden VTEX-Frontend kommen, bleibt VTEX das führende System für Katalog und Bestellungen, Laioutr übernimmt das Frontend.

## Schritt für Schritt

1. 1 ### Schritt 1: Zugangsdaten bereitstellen

   Im VTEX-Admin die API-Zugangsdaten für die Anbindung erzeugen oder beim zuständigen VTEX-Team anfragen.
2. 2 ### Schritt 2: App installieren

   Im Cockpit unter **Apps** im Reiter **Ecommerce** die App VTEX mit **Install** zum Projekt hinzufügen.
3. 3 ### Schritt 3: Werte eintragen und testen

   Im Umgebungsmenü **Configuration** öffnen, die Werte eintragen, mit **Test connection** prüfen und mit **Save settings** speichern.
4. 4 ### Schritt 4: Deployen und prüfen

   Die Umgebung mit **Deploy** neu bauen und danach in Studio prüfen, ob Produkte und Kategorien in der Vorschau erscheinen.

## Ergebnis prüfen

Der Verbindungstest meldet Erfolg, und Studio zeigt Produkte und Kategorien aus VTEX, deren Namen, Preise und Bilder mit dem VTEX-Admin übereinstimmen.

## Häufige Fragen

Bleibt VTEX das führende System?

Ja. Katalog und Bestellungen bleiben in VTEX, Laioutr liest die Daten über die App und stellt sie im Frontend dar.

Wie kommen neue Funktionen der VTEX-App ins Projekt?

Über neue App-Versionen. In **Package Management** der Umgebung die Version wechseln, zuerst auf stage prüfen und dann nach main übernehmen.

Welche Felder verlangt die App?

Die Felder zeigt das Formular unter **Configuration**. Ein orangefarbener Punkt markiert fehlende Pflichtangaben.

## Passend dazu

- [Apps finden, installieren und konfigurieren](https://academy.laioutr.com/artikel/apps-finden-installieren-und-konfigurieren)6 Min.

  Apps stehen im Cockpit unter Apps als Katalog bereit, werden je Umgebung installiert und unter Configuration eingerichtet. Die Storefront nutzt sie ab dem nächsten Deployment.
- [Zugangsdaten eintragen und Verbindung testen](https://academy.laioutr.com/artikel/zugangsdaten-eintragen-und-verbindung-testen)5 Min.

  Zugangsdaten einer App werden je Umgebung unter Configuration eingetragen, mit Test connection geprüft und mit Save settings gespeichert. Wirksam werden sie mit dem nächsten Deployment.
- [Echte Daten in Studio prüfen](https://academy.laioutr.com/artikel/echte-daten-in-studio-pruefen)5 Min.

  Studio zeigt in der Vorschau echte Daten aus den angebundenen Apps. Auf dynamischen Seiten wie der Produktdetailseite wählt das Feld Preview Data, welches Produkt die Vorschau zeigt.
- [Projekte und Umgebungen dev und stage anlegen](https://academy.laioutr.com/artikel/projekte-und-umgebungen-dev-und-stage-anlegen)6 Min.

  Ein Projekt wird in den Organisationseinstellungen unter Projekte angelegt und startet mit der Live-Umgebung main. Weitere Umgebungen wie stage oder dev entstehen im Projekt unter Umgebungen als Kopie einer bestehenden Umgebung.

## [Commerce-Systeme](https://academy.laioutr.com/leitfaeden/commerce-systeme)

In diesem Leitfaden suchen

1. [Shopify anbinden](https://academy.laioutr.com/apps/shopify-anbinden)10 Min.
2. [Shopware mit Checkout-Plugin anbinden](https://academy.laioutr.com/apps/shopware-mit-checkout-plugin-anbinden)12 Min.
3. [VTEX anbinden](https://academy.laioutr.com/apps/vtex-anbinden)8 Min.
4. [Sylius anbinden](https://academy.laioutr.com/apps/sylius-anbinden)8 Min.
5. [JTL-Wawi anbinden](https://academy.laioutr.com/apps/jtl-wawi-anbinden)8 Min.
6. [B2B Sellers für Shopware anbinden](https://academy.laioutr.com/apps/b2b-sellers-fuer-shopware-anbinden)8 Min.
7. [Magento 2 anbinden](https://academy.laioutr.com/apps/magento-2-anbinden)10 Min. In Vorbereitung

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "de",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "workTranslation": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/apps/vtex-anbinden#webpage",
      "name": "Academy App",
      "url": "https://academy.laioutr.com/apps/vtex-anbinden",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/apps/vtex-anbinden#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/apps/vtex-anbinden#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/apps/vtex-anbinden#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/apps/vtex-anbinden#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/apps/vtex-anbinden"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/apps/vtex-anbinden#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Apps",
          "item": "https://academy.laioutr.com/bereiche/apps",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Commerce-Systeme",
          "item": "https://academy.laioutr.com/leitfaeden/commerce-systeme",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "VTEX anbinden",
          "item": "https://academy.laioutr.com/apps/vtex-anbinden",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/apps/vtex-anbinden#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Bleibt VTEX das führende System?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Ja. Katalog und Bestellungen bleiben in VTEX, Laioutr liest die Daten über die App und stellt sie im Frontend dar.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/apps/vtex-anbinden#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wie kommen neue Funktionen der VTEX-App ins Projekt?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Über neue App-Versionen. In <strong>Package Management</strong> der Umgebung die Version wechseln, zuerst auf stage prüfen und dann nach main übernehmen.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/apps/vtex-anbinden#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Welche Felder verlangt die App?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Die Felder zeigt das Formular unter <strong>Configuration</strong>. Ein orangefarbener Punkt markiert fehlende Pflichtangaben.</p>"
      }
    }
  ]
}
```
