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

# 如何修复因无效 HTML 导致的购物车编辑器布局损坏

> 在添加自定义代码后应用界面显示异常时修复应用 UI。

<div id="overview">
  # 概述
</div>

如果在 Cart Editor 的 Custom HTML 字段中添加了无效或损坏的 HTML，可能会破坏布局，导致编辑器界面无法使用。本指南将引导你临时修复布局，以便安全地删除损坏的代码并恢复全部功能。

<div id="what-causes-the-issue">
  ## 问题的成因
</div>

此问题通常在商家进行以下操作时出现：

* 插入结构不完整的 `<style>` 或 `<script>` 标签
* HTML 标签未闭合或不匹配
* 向 Custom HTML 字段添加了破坏布局的内容

结果是 Cart Editor 变得无法阅读或无法使用，甚至可能导致用户无法编辑或滚动页面。

<div id="temporary-fix-using-developer-tools">
  ## 使用开发者工具进行临时修复
</div>

按照以下步骤，使用浏览器的开发者工具（Developer Tools）临时修复布局，以便访问 Custom HTML 字段。

<div id="step-1-open-devtools">
  ## 第 1 步：打开 DevTools
</div>

1. 在 Upcart 应用中打开 Cart Editor
2. 右键点击页面任意位置并选择**检查**，或按下：

   * `Cmd + Option + I`（Mac）
   * `Ctrl + Shift + I`（Windows）

<div id="step-2-find-the-broken-layout-container">
  ## 第 2 步：找到损坏的布局容器
</div>

1. 在 DevTools 的 **Elements** 标签页中，点击选择器工具（位于 DevTools 左上角）
2. 将鼠标悬停在 Cart Editor 布局上，找到设置面板左侧以绿色高亮显示的区域。它应标记为：

   ```
   .Polaris-Page__Content--fullWidth
   ```
3. 在层级结构中向上六级，直到到达：

   ```
   .Polaris-Frame__Content
   ```

<div id="step-3-disable-the-fixed-position">
  ## 第 3 步：禁用固定定位
</div>

1. 选中 `.Polaris-Frame__Content` 后，查看 **Styles** 标签页
2. 找到 `position: fixed` 属性并取消勾选

这样应该就能解锁页面，让你再次滚动浏览布局。

<div id="remove-the-invalid-html">
  ## 删除无效的 HTML
</div>

现在布局可以正常访问了：

1. 滚动到 **Custom HTML** 字段
2. 查找可能导致问题的损坏 HTML 或内嵌 CSS

通常会破坏布局的内容示例：

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

1. 将内容复制到其他地方作为备份，然后删除它
2. 保存你的更改

<div id="confirm-its-fixed">
  ## 确认已修复
</div>

保存后，Cart Editor 应能再次正常加载。如果问题仍然存在，请再次检查是否有残留的无效标签，或联系商家确认添加了哪些内容。

<div id="best-practices-to-prevent-this-issue">
  ## 预防此问题的最佳实践
</div>

* 只插入完整且有效的 HTML
* 避免在 HTML 位置直接添加内联 `<style>` 块
* 使用 **Custom CSS** 部分，而不是将 CSS 添加到 HTML 字段中
* 如果不确定，请务必在 Sandbox 模式下预览你的更改