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

# Shopify

> Füge homie AI zu deinem Shopify-Store hinzu — der einfache Weg mit der homie Shopify App oder manuell über dein Theme.

Der einfachste Weg, homie AI zu Shopify hinzuzufügen, ist die offizielle **homie Shopify App**: installiere sie und schalte das Widget im Shopify **Theme Editor** ein — ein Klick, kein Code. Wenn du die App nicht nutzen möchtest, kannst du das Embed Script auch manuell in dein Theme einfügen.

<Note>
  Bevor du startest, brauchst du einen auf der Plattform erstellten Assistenten und Zugriff auf deinen Shopify-Admin.
</Note>

## Empfohlen: die homie Shopify App

<Steps>
  <Step title="Die homie Shopify App installieren">
    Öffne den **Veröffentlichen**-Bereich deines Assistenten auf der Plattform, wähle **Shopify** und dann **Zur Shopify App** (oder installiere die homie App direkt aus dem Shopify App Store). Sie wird mit einem Klick installiert und erfordert keine Code-Anpassungen.
  </Step>

  <Step title="Den Theme Editor öffnen">
    Wähle zurück auf der Plattform **Theme Editor öffnen**, um direkt in den Theme Editor deines Stores zu springen.
  </Step>

  <Step title="homie aktivieren und Assistent-ID eintragen">
    Schalte in den App-Embeds des Theme Editors das **homie**-Embed ein, füge deine **Assistent-ID** ein (kopiere sie aus dem Veröffentlichen-Bereich) und aktiviere sie.
  </Step>

  <Step title="Speichern">
    Klick im Theme Editor auf **Speichern**.
  </Step>
</Steps>

<Check>
  Lade deinen Store neu. Die homie Chat-Bubble erscheint unten rechts. Öffne sie und sende eine Testnachricht.
</Check>

<Note>
  Mit der Installation der App verbindest du außerdem deinen Shopify-Store, sodass dein Produktkatalog synchron bleibt und du das Conversion-Tracking aktivieren kannst. Mehr zur Daten- und Conversion-Seite findest du unter [Shopify-Integration](/de/user-guide/integrations/shopify).
</Note>

## Alternative: Embed Script manuell einfügen

Falls du den Theme Editor nicht nutzen möchtest oder kannst, füge das Embed Script manuell in dein Theme ein.

<Steps>
  <Step title="Embed Script kopieren">
    Öffne deinen Assistenten auf der Plattform, geh in den **Veröffentlichen**-Bereich - **Manuelle Installation** und kopiere das Script. Es enthält bereits deine `chatbotId`.

    <Frame>
      <img src="https://mintcdn.com/homieai/m0ZcYuq9OdpATfdE/images/Bildschirmfoto-2026-07-01-um-10.30.21.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=efc7e5b2aff6ffcc42ea1d05ba872688" alt="Veröffentlichen-Bereich der Plattform mit dem kopierbaren Shopify-Script-Snippet" lightAlt="Veröffentlichen-Bereich der Plattform mit dem kopierbaren Shopify-Script-Snippet" darkAlt="Veröffentlichen-Bereich der Plattform mit dem kopierbaren Shopify-Script-Snippet" className="dark:hidden" width="3008" height="1420" data-path="images/Bildschirmfoto-2026-07-01-um-10.30.21.png" />

      <img src="https://mintcdn.com/homieai/m0ZcYuq9OdpATfdE/images/Bildschirmfoto-2026-07-01-um-10.30.21-1.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=f7d61a520321cebacfff73001a882043" alt="Veröffentlichen-Bereich der Plattform mit dem kopierbaren Shopify-Script-Snippet" lightAlt="Veröffentlichen-Bereich der Plattform mit dem kopierbaren Shopify-Script-Snippet" darkAlt="Veröffentlichen-Bereich der Plattform mit dem kopierbaren Shopify-Script-Snippet" className="hidden dark:block" width="3008" height="1420" data-path="images/Bildschirmfoto-2026-07-01-um-10.30.21-1.png" />
    </Frame>
  </Step>

  <Step title="Themes in Shopify öffnen">
    Geh in deinem Shopify-Admin zu **Online Store → Themes**.

    <Frame>
      <img src="https://mintcdn.com/homieai/t1ZSM74lXOpzsQLS/images/integrations/shopify/shopify-first-step.png?fit=max&auto=format&n=t1ZSM74lXOpzsQLS&q=85&s=9b39ff524f22bab4ba502615929b9c65" alt="Shopify-Admin: Navigation zu Online Store Themes" width="1340" height="1058" data-path="images/integrations/shopify/shopify-first-step.png" />
    </Frame>
  </Step>

  <Step title="Theme-Code bearbeiten">
    Öffne das **•••**-Menü neben deinem aktiven Theme und wähle **Edit code**.

    <Frame>
      <img src="https://mintcdn.com/homieai/t1ZSM74lXOpzsQLS/images/integrations/shopify/shopify-secound-step.png?fit=max&auto=format&n=t1ZSM74lXOpzsQLS&q=85&s=16b06b9445bcd4e0920ed8797b2c23e0" alt="Shopify-Theme-Menü mit hervorgehobener Edit-code-Aktion" width="1340" height="1058" data-path="images/integrations/shopify/shopify-secound-step.png" />
    </Frame>
  </Step>

  <Step title="Vor dem schließenden Body-Tag einfügen und speichern">
    1. Öffne in der Seitenleiste **layout/theme.liquid**.
    2. Scrolle ganz nach unten, direkt über das schließende `</body>`-Tag.
    3. Füge das kopierte Script ein.
    4. Klick auf **Save**.

    <Frame>
      <img src="https://mintcdn.com/homieai/t1ZSM74lXOpzsQLS/images/integrations/shopify/shopify-last-step.png?fit=max&auto=format&n=t1ZSM74lXOpzsQLS&q=85&s=edf7173d23be797f40c744788eca78da" alt="theme.liquid mit dem homie-Script vor dem schließenden Body-Tag" width="1490" height="888" data-path="images/integrations/shopify/shopify-last-step.png" />
    </Frame>
  </Step>
</Steps>

```html theme.liquid theme={null}
<script
  src="https://cdn.yourhomie.ai/embed.min.js"
  chatbotId="YOUR-CHATBOT-ID"
  platform="shopify"
  defer
></script>
```

<Tip>
  Mit `platform="shopify"` leitet das Widget den Shopify-Marktkontext (zum Beispiel Land und Währung) an deinen Assistenten weiter.
</Tip>

## Fehlerbehebung

* **Keine Bubble sichtbar?** Leere deinen Cache oder öffne den Store in einem Inkognito-Fenster.
* **Mehrere Themes?** Aktiviere homie (oder füge das Script ein) in jedem Theme, das du veröffentlichst.
* **Andere Position oder Farbe nötig?** Passe das auf der Plattform unter den Erscheinungsbild-Einstellungen deines Assistenten an.

Für tiefere Konfiguration und Methoden siehe die [Client-API](/de/api-reference/client/overview).

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Shopify-Integration" icon="shopify" href="/de/user-guide/integrations/shopify">
    Synchronisiere deinen Produktkatalog und ordne Käufe Unterhaltungen zu.
  </Card>

  <Card title="Client-API" icon="code" href="/de/api-reference/client/overview">
    Konfiguriere das Widget und rufe Methoden von deiner Seite aus auf.
  </Card>
</CardGroup>