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

# Comment réparer une mise en page cassée de l'éditeur de panier causée par du HTML invalide

> Réparer l'interface de l'application si elle apparaît cassée après l'ajout de code personnalisé.

<div id="overview">
  # Aperçu
</div>

Si du HTML invalide ou cassé est ajouté au champ Custom HTML de l'éditeur de panier, cela peut casser la mise en page et rendre l'interface de l'éditeur inutilisable. Ce guide vous explique comment réparer temporairement la mise en page afin de pouvoir supprimer en toute sécurité le code défectueux et restaurer toutes les fonctionnalités.

<div id="what-causes-the-issue">
  ## Causes du problème
</div>

Ce problème survient généralement lorsqu'un marchand :

* Insère des balises `<style>` ou `<script>` sans structure appropriée
* Laisse des balises HTML non fermées ou mal appariées
* Ajoute du contenu qui casse la mise en page dans le champ Custom HTML

En conséquence, l'éditeur de panier devient illisible ou inutilisable et peut empêcher les utilisateurs de modifier, voire de faire défiler la page.

<div id="temporary-fix-using-developer-tools">
  ## Correction temporaire à l'aide des outils de développement
</div>

Suivez ces étapes pour réparer temporairement la mise en page à l'aide des outils de développement de votre navigateur afin de pouvoir accéder au champ Custom HTML.

<div id="step-1-open-devtools">
  ## Étape 1 : Ouvrir les DevTools
</div>

1. Ouvrez l'éditeur de panier dans l'application Upcart
2. Faites un clic droit n'importe où sur la page et sélectionnez **Inspect**, ou appuyez sur :

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

<div id="step-2-find-the-broken-layout-container">
  ## Étape 2 : Trouver le conteneur de mise en page cassé
</div>

1. Dans l'onglet **Elements** des DevTools, cliquez sur l'outil de sélection (coin supérieur gauche des DevTools)
2. Survolez la mise en page de l'éditeur de panier et trouvez la section surlignée en vert à gauche du panneau de paramètres. Elle devrait être libellée :

   ```
   .Polaris-Page__Content--fullWidth
   ```
3. Remontez de six niveaux dans la hiérarchie jusqu'à atteindre :

   ```
   .Polaris-Frame__Content
   ```

<div id="step-3-disable-the-fixed-position">
  ## Étape 3 : Désactiver la position fixe
</div>

1. Avec `.Polaris-Frame__Content` sélectionné, regardez sous l'onglet **Styles**
2. Trouvez la propriété `position: fixed` et décochez-la

Cela devrait débloquer la page et vous permettre à nouveau de faire défiler la mise en page.

<div id="remove-the-invalid-html">
  ## Supprimer le HTML invalide
</div>

Maintenant que la mise en page est à nouveau accessible :

1. Faites défiler jusqu'au champ **Custom HTML**
2. Recherchez tout HTML cassé ou CSS intégré qui pourrait avoir causé le problème

Exemple de ce qui casse généralement la mise en page :

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

1. Copiez le contenu ailleurs en tant que sauvegarde, puis supprimez-le
2. Enregistrez vos modifications

<div id="confirm-its-fixed">
  ## Confirmer que c'est réparé
</div>

Après l'enregistrement, l'éditeur de panier devrait à nouveau se charger normalement. Si le problème persiste, vérifiez à nouveau la présence de balises invalides restantes ou contactez le marchand pour confirmer ce qui a été ajouté.

<div id="best-practices-to-prevent-this-issue">
  ## Bonnes pratiques pour prévenir ce problème
</div>

* N'insérez que du HTML complet et valide
* Évitez d'ajouter des blocs `<style>` en ligne directement dans les emplacements HTML
* Utilisez la section **Custom CSS** plutôt que d'ajouter du CSS dans les champs HTML
* Prévisualisez toujours vos modifications en mode Sandbox en cas de doute