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

# Cómo arreglar el diseño roto del editor de carrito causado por HTML inválido

> Cómo arreglar la interfaz de la app en caso de que aparezca rota después de agregar código personalizado.

<div id="overview">
  # Descripción general
</div>

Si se agrega HTML inválido o roto al campo Custom HTML del editor de carrito, puede romper el diseño y hacer que la interfaz del editor quede inutilizable. Esta guía te muestra cómo arreglar temporalmente el diseño para que puedas eliminar de forma segura el código roto y restaurar toda la funcionalidad.

<div id="what-causes-the-issue">
  ## Qué causa el problema
</div>

Este problema suele ocurrir cuando un comerciante:

* Inserta etiquetas `<style>` o `<script>` sin la estructura adecuada
* Deja etiquetas HTML sin cerrar o mal emparejadas
* Agrega contenido que rompe el diseño en el campo Custom HTML

Como resultado, el editor de carrito se vuelve ilegible o inutilizable y puede impedir que los usuarios editen o incluso se desplacen por la página.

<div id="temporary-fix-using-developer-tools">
  ## Arreglo temporal usando las herramientas de desarrollador
</div>

Sigue estos pasos para arreglar temporalmente el diseño usando las herramientas de desarrollador de tu navegador y así poder acceder al campo Custom HTML.

<div id="step-1-open-devtools">
  ## Paso 1: Abre DevTools
</div>

1. Abre el editor de carrito en la app de Upcart
2. Haz clic derecho en cualquier parte de la página y selecciona **Inspect**, o presiona:

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

<div id="step-2-find-the-broken-layout-container">
  ## Paso 2: Encuentra el contenedor del diseño roto
</div>

1. En la pestaña **Elements** de DevTools, haz clic en la herramienta de selección (esquina superior izquierda de DevTools)
2. Pasa el cursor sobre el diseño del editor de carrito y encuentra la sección resaltada en verde a la izquierda del panel de configuración. Debería estar etiquetada como:

   ```
   .Polaris-Page__Content--fullWidth
   ```
3. Sube seis niveles en la jerarquía hasta llegar a:

   ```
   .Polaris-Frame__Content
   ```

<div id="step-3-disable-the-fixed-position">
  ## Paso 3: Desactiva la posición fija
</div>

1. Con `.Polaris-Frame__Content` seleccionado, mira en la pestaña **Styles**
2. Encuentra la propiedad `position: fixed` y desmárcala

Esto debería desbloquear la página y permitirte volver a desplazarte por el diseño.

<div id="remove-the-invalid-html">
  ## Elimina el HTML inválido
</div>

Ahora que el diseño vuelve a ser accesible:

1. Desplázate hasta el campo **Custom HTML**
2. Busca cualquier HTML roto o CSS incrustado que pueda haber causado el problema

Ejemplo de lo que típicamente rompe el diseño:

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

1. Copia el contenido en otro lugar como respaldo y luego elimínalo
2. Guarda tus cambios

<div id="confirm-its-fixed">
  ## Confirma que está arreglado
</div>

Después de guardar, el editor de carrito debería cargar normalmente de nuevo. Si el problema persiste, revisa nuevamente en busca de etiquetas inválidas restantes o contacta al comerciante para confirmar qué se agregó.

<div id="best-practices-to-prevent-this-issue">
  ## Mejores prácticas para prevenir este problema
</div>

* Inserta únicamente HTML completo y válido
* Evita agregar bloques `<style>` en línea directamente en las ubicaciones de HTML
* Usa la sección **Custom CSS** en lugar de agregar CSS en los campos de HTML
* Siempre previsualiza tus cambios en modo Sandbox si tienes dudas