Skip to main content

​
Descripción general

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.

​
Qué causa el problema

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.

​
Arreglo temporal usando las herramientas de desarrollador

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.

​
Paso 1: Abre DevTools

  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)

​
Paso 2: Encuentra el contenedor del diseño roto

  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:
  3. Sube seis niveles en la jerarquía hasta llegar a:

​
Paso 3: Desactiva la posición fija

  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.

​
Elimina el HTML inválido

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:
  1. Copia el contenido en otro lugar como respaldo y luego elimínalo
  2. Guarda tus cambios

​
Confirma que está arreglado

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

​
Mejores prácticas para prevenir este problema

  • 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