> ## 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.

# Een kapotte Cart Editor-lay-out door ongeldige HTML herstellen

> De app-UI herstellen als deze kapot lijkt na het toevoegen van aangepaste code.

<div id="overview">
  # Overzicht
</div>

Als ongeldige of kapotte HTML wordt toegevoegd aan het Custom HTML-veld van de Cart Editor, kan dit de lay-out breken en de editorinterface onbruikbaar maken. Deze gids laat zien hoe je de lay-out tijdelijk herstelt, zodat je de kapotte code veilig kunt verwijderen en de volledige functionaliteit kunt terugzetten.

<div id="what-causes-the-issue">
  ## Wat het probleem veroorzaakt
</div>

Dit probleem treedt meestal op wanneer een merchant:

* `<style>`- of `<script>`-tags invoegt zonder de juiste structuur
* HTML-tags niet sluit of verkeerd combineert
* Content toevoegt aan het Custom HTML-veld die de lay-out breekt

Als gevolg hiervan wordt de Cart Editor onleesbaar of onbruikbaar en kan het gebruikers buitensluiten van bewerken of zelfs scrollen op de pagina.

<div id="temporary-fix-using-developer-tools">
  ## Tijdelijke oplossing met Developer Tools
</div>

Volg deze stappen om de lay-out tijdelijk te herstellen met de Developer Tools van je browser, zodat je toegang krijgt tot het Custom HTML-veld.

<div id="step-1-open-devtools">
  ## Stap 1: Open DevTools
</div>

1. Open de Cart Editor in de Upcart-app
2. Klik met de rechtermuisknop ergens op de pagina en selecteer **Inspect**, of druk op:

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

<div id="step-2-find-the-broken-layout-container">
  ## Stap 2: Vind de kapotte lay-outcontainer
</div>

1. Klik in het tabblad **Elements** van DevTools op de selector-tool (linksboven in DevTools)
2. Beweeg over de Cart Editor-lay-out en zoek de groen gemarkeerde sectie links van het instellingenpaneel. Deze zou het label moeten hebben:

   ```
   .Polaris-Page__Content--fullWidth
   ```
3. Ga zes niveaus omhoog in de hiërarchie totdat je bij het volgende komt:

   ```
   .Polaris-Frame__Content
   ```

<div id="step-3-disable-the-fixed-position">
  ## Stap 3: Schakel de fixed position uit
</div>

1. Kijk met `.Polaris-Frame__Content` geselecteerd onder het tabblad **Styles**
2. Zoek de eigenschap `position: fixed` en vink deze uit

Dit zou de pagina moeten ontgrendelen en je weer door de lay-out laten scrollen.

<div id="remove-the-invalid-html">
  ## Verwijder de ongeldige HTML
</div>

Nu de lay-out weer toegankelijk is:

1. Scrol naar het veld **Custom HTML**
2. Zoek naar kapotte HTML of ingesloten CSS die het probleem kan hebben veroorzaakt

Voorbeeld van wat de lay-out doorgaans breekt:

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

1. Kopieer de inhoud ergens anders als back-up en verwijder deze vervolgens
2. Sla je wijzigingen op

<div id="confirm-its-fixed">
  ## Controleer of het is opgelost
</div>

Na het opslaan zou de Cart Editor weer normaal moeten laden. Als het probleem aanhoudt, controleer dan opnieuw op achtergebleven ongeldige tags of neem contact op met de merchant om te bevestigen wat er is toegevoegd.

<div id="best-practices-to-prevent-this-issue">
  ## Best practices om dit probleem te voorkomen
</div>

* Voeg alleen volledige en geldige HTML in
* Vermijd het toevoegen van inline `<style>`-blokken rechtstreeks in HTML-locaties
* Gebruik de sectie **Custom CSS** in plaats van CSS toe te voegen in HTML-velden
* Bekijk je wijzigingen altijd eerst in Sandbox-modus als je twijfelt