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

# So behebst du ein defektes Cart-Editor-Layout durch ungültiges HTML

> Die App-Oberfläche reparieren, falls sie nach dem Hinzufügen von benutzerdefiniertem Code fehlerhaft erscheint.

<div id="overview">
  # Überblick
</div>

Wenn ungültiges oder fehlerhaftes HTML in das Custom-HTML-Feld des Cart Editors eingefügt wird, kann das das Layout beschädigen und die Editor-Oberfläche unbenutzbar machen. Diese Anleitung zeigt dir, wie du das Layout vorübergehend reparierst, damit du den fehlerhaften Code sicher entfernen und die volle Funktionalität wiederherstellen kannst.

<div id="what-causes-the-issue">
  ## Was das Problem verursacht
</div>

Dieses Problem tritt normalerweise auf, wenn ein Händler:

* `<style>`- oder `<script>`-Tags ohne korrekte Struktur einfügt
* HTML-Tags nicht schließt oder falsch verschachtelt
* Layout-zerstörende Inhalte in das Custom-HTML-Feld einfügt

Infolgedessen wird der Cart Editor unlesbar oder unbenutzbar und kann Benutzer daran hindern, die Seite zu bearbeiten oder überhaupt zu scrollen.

<div id="temporary-fix-using-developer-tools">
  ## Vorübergehende Lösung mit den Entwicklertools
</div>

Folge diesen Schritten, um das Layout mit den Entwicklertools deines Browsers vorübergehend zu reparieren, damit du auf das Custom-HTML-Feld zugreifen kannst.

<div id="step-1-open-devtools">
  ## Schritt 1: DevTools öffnen
</div>

1. Öffne den Cart Editor in der Upcart-App
2. Klicke mit der rechten Maustaste irgendwo auf die Seite und wähle **Untersuchen**, oder drücke:

   * `Cmd + Option + I` (Mac)
   * `Ctrl + Shift + I` (Windows)

<div id="step-2-find-the-broken-layout-container">
  ## Schritt 2: Den defekten Layout-Container finden
</div>

1. Klicke im Tab **Elements** der DevTools auf das Auswahlwerkzeug (obere linke Ecke der DevTools)
2. Fahre mit der Maus über das Layout des Cart Editors und finde den grün hervorgehobenen Bereich links neben dem Einstellungsfeld. Er sollte folgendermaßen beschriftet sein:

   ```
   .Polaris-Page__Content--fullWidth
   ```
3. Gehe sechs Ebenen in der Hierarchie nach oben, bis du Folgendes erreichst:

   ```
   .Polaris-Frame__Content
   ```

<div id="step-3-disable-the-fixed-position">
  ## Schritt 3: Die fixe Positionierung deaktivieren
</div>

1. Sieh dir mit ausgewähltem `.Polaris-Frame__Content` den Tab **Styles** an
2. Finde die Eigenschaft `position: fixed` und deaktiviere sie

Das sollte die Seite entsperren und dir wieder ermöglichen, durch das Layout zu scrollen.

<div id="remove-the-invalid-html">
  ## Das ungültige HTML entfernen
</div>

Da das Layout jetzt wieder zugänglich ist:

1. Scrolle zum Feld **Custom HTML**
2. Suche nach fehlerhaftem HTML oder eingebettetem CSS, das das Problem verursacht haben könnte

Beispiel dafür, was typischerweise das Layout beschädigt:

```
<style>  
  body {  
    background: red;  
  }  
</style>
```

1. Kopiere den Inhalt als Backup an einen anderen Ort und lösche ihn dann
2. Speichere deine Änderungen

<div id="confirm-its-fixed">
  ## Bestätigen, dass es behoben ist
</div>

Nach dem Speichern sollte der Cart Editor wieder normal geladen werden. Wenn das Problem weiterhin besteht, prüfe erneut auf verbliebene ungültige Tags oder wende dich an den Händler, um zu klären, was hinzugefügt wurde.

<div id="best-practices-to-prevent-this-issue">
  ## Best Practices zur Vermeidung dieses Problems
</div>

* Füge nur vollständiges und gültiges HTML ein
* Vermeide es, Inline-`<style>`-Blöcke direkt in HTML-Bereiche einzufügen
* Verwende den Abschnitt **Custom CSS**, anstatt CSS in HTML-Felder einzufügen
* Sieh dir deine Änderungen im Zweifelsfall immer im Sandbox-Modus in der Vorschau an