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

# Come riparare il layout del Cart Editor rotto da HTML non valido

> Come sistemare l'interfaccia dell'app nel caso appaia rotta dopo aver aggiunto codice personalizzato.

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

Se nel campo Custom HTML del Cart Editor viene aggiunto HTML non valido o rotto, questo può compromettere il layout e rendere l'interfaccia dell'editor inutilizzabile. Questa guida ti mostra come riparare temporaneamente il layout per poter rimuovere in sicurezza il codice rotto e ripristinare la piena funzionalità.

<div id="what-causes-the-issue">
  ## Cosa causa il problema
</div>

Questo problema si verifica di solito quando un merchant:

* Inserisce tag `<style>` o `<script>` senza una struttura corretta
* Lascia tag HTML non chiusi o non corrispondenti
* Aggiunge contenuti che rompono il layout nel campo Custom HTML

Di conseguenza, il Cart Editor diventa illeggibile o inutilizzabile e può impedire agli utenti di modificare o persino di scorrere la pagina.

<div id="temporary-fix-using-developer-tools">
  ## Correzione temporanea con i Developer Tools
</div>

Segui questi passaggi per riparare temporaneamente il layout usando i Developer Tools del tuo browser, così da poter accedere al campo Custom HTML.

<div id="step-1-open-devtools">
  ## Passaggio 1: Apri i DevTools
</div>

1. Apri il Cart Editor nell'app Upcart
2. Fai clic destro in un punto qualsiasi della pagina e seleziona **Inspect**, oppure premi:

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

<div id="step-2-find-the-broken-layout-container">
  ## Passaggio 2: Trova il contenitore del layout rotto
</div>

1. Nella scheda **Elements** dei DevTools, clicca sullo strumento di selezione (angolo in alto a sinistra dei DevTools)
2. Passa il mouse sul layout del Cart Editor e trova la sezione evidenziata in verde a sinistra del pannello delle impostazioni. Dovrebbe essere etichettata:

   ```
   .Polaris-Page__Content--fullWidth
   ```
3. Sali di sei livelli nella gerarchia finché non raggiungi:

   ```
   .Polaris-Frame__Content
   ```

<div id="step-3-disable-the-fixed-position">
  ## Passaggio 3: Disattiva la posizione fissa
</div>

1. Con `.Polaris-Frame__Content` selezionato, guarda nella scheda **Styles**
2. Trova la proprietà `position: fixed` e deselezionala

Questo dovrebbe sbloccare la pagina e permetterti di nuovo di scorrere il layout.

<div id="remove-the-invalid-html">
  ## Rimuovi l'HTML non valido
</div>

Ora che il layout è di nuovo accessibile:

1. Scorri fino al campo **Custom HTML**
2. Cerca eventuale HTML rotto o CSS incorporato che potrebbe aver causato il problema

Esempio di ciò che tipicamente rompe il layout:

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

1. Copia il contenuto altrove come backup, poi eliminalo
2. Salva le modifiche

<div id="confirm-its-fixed">
  ## Verifica che sia risolto
</div>

Dopo il salvataggio, il Cart Editor dovrebbe caricarsi di nuovo normalmente. Se il problema persiste, controlla di nuovo se ci sono tag non validi rimasti oppure contatta il merchant per confermare cosa era stato aggiunto.

<div id="best-practices-to-prevent-this-issue">
  ## Best practice per prevenire questo problema
</div>

* Inserisci solo HTML completo e valido
* Evita di aggiungere blocchi `<style>` inline direttamente nelle posizioni HTML
* Usa la sezione **Custom CSS** invece di aggiungere CSS nei campi HTML
* Visualizza sempre in anteprima le modifiche in modalità Sandbox se non sei sicuro