> ## Documentation Index
> Fetch the complete documentation index at: https://docs.komerza.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Einführung

> Erstelle benutzerdefinierte Storefront-Templates mit der Komerza Client-Bibliothek

## Was ist Storefront-Entwicklung?

Komerza ermöglicht es dir, vollständig benutzerdefinierte Storefronts mit jeder Webtechnologie zu erstellen, die du bevorzugst. Erstelle deinen Shop mit HTML, CSS und JavaScript—oder nutze Frameworks wie React, Vue oder Svelte—und hoste ihn direkt auf der Komerza-Infrastruktur.

Dein Storefront importiert die **Komerza Client-Bibliothek**, ein leichtgewichtiges Skript, das alle E-Commerce-Funktionen übernimmt:

* **Shop & Produkte** - Abruf von Shop-Infos, Produkten, Varianten und Bewertungen
* **Warenkorb** - Verwaltung des Warenkorb-Zustands, Mengen und Auswahlen
* **Checkout** - Erstelle Bestellungen und leite zu gehosteten Zahlungsseiten weiter
* **Analytics** - Automatisches Tracking für Aufrufe und Konversionen (kein Code erforderlich)

## Warum auf Komerza aufbauen?

<CardGroup cols={2}>
  <Card title="Vollständige Design-Freiheit" icon="palette">
    Keine Vorlagen oder Themes, gegen die du kämpfen musst. Du kontrollierst
    jeden Pixel.
  </Card>

  <Card title="Kein Backend erforderlich" icon="code">
    Die Client-Bibliothek übernimmt die gesamte API-Kommunikation. Nur HTML, CSS
    und JS.
  </Card>

  <Card title="Sofortiges Hosting" icon="rocket">
    Deploye auf der Komerza-Infrastruktur oder liste im Theme-Marktplatz ein.
  </Card>

  <Card title="Schnelle Performance" icon="bolt">
    Statische Dateien laden sofort mit globaler CDN-Auslieferung.
  </Card>

  <Card title="DDoS-Schutz auf Unternehmensebene" icon="shield-halved">
    Dein Storefront bleibt unter jeder Last online. Aufgebaut auf Cloudflare für
    unübertroffene Resilienz.
  </Card>

  <Card title="Automatische Backups" icon="clock-rotate-left">
    Jede Änderung und jedes Deployment wird automatisch gesichert. Speichere bis
    zu 20 Backups auf ausgewählten Plänen.
  </Card>
</CardGroup>

## Schnellbeispiel

```html theme={null}
<!DOCTYPE html>
<html>
  <head>
    <title>Mein Shop</title>
    <script src="https://cdn.komerza.com/komerza.min.js"></script>
  </head>
  <body>
    <h1 id="store-name"></h1>
    <div id="products"></div>

    <script>
      komerza.init('deine-shop-id');

      komerza.getStore().then(response => {
        if (!response.success) return;

        const store = response.data;
        document.getElementById('store-name').textContent = store.name;

        store.products.forEach(product => {
          const variant = product.variants[0];
          document.getElementById('products').innerHTML += \`
            <div class="product">
              <h2>\${product.name}</h2>
              <p>\${variant.cost}</p>
              <button onclick="komerza.addToBasket('\${product.id}', '\${variant.id}')">
                In den Warenkorb
              </button>
            </div>
          \`;
        });
      });
    </script>
  </body>
</html>
```

## Theme-Marktplatz

Erstelle Storefronts, die andere Komerza-Händler nutzen können. Deine Vorlagen können:

* Im Theme-Marktplatz für andere Shops gelistet werden
* Mit Konfigurationsoptionen angepasst werden
* Sofort von Händlern deployt werden
* Über den Marktplatz monetarisiert werden

## Client-Bibliothek vs. API-Referenz

|                 | Client-Bibliothek            | API-Referenz                  |
| --------------- | ---------------------------- | ----------------------------- |
| **Für**         | Kunden-Storefronts           | Shop-Verwaltung               |
| **Auth**        | Öffentlich (Shop-ID)         | Privat (API-Schlüssel)        |
| **Läuft**       | Client-seitig (Browser)      | Server-seitig                 |
| **Operationen** | Stöbern, Warenkorb, Checkout | Vollständiges CRUD, Analytics |
