Skip to main content

​
概述

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

​
问题的成因

此问题通常在商家进行以下操作时出现：
  • 插入结构不完整的 <style> 或 <script> 标签
  • HTML 标签未闭合或不匹配
  • 向 Custom HTML 字段添加了破坏布局的内容
结果是 Cart Editor 变得无法阅读或无法使用，甚至可能导致用户无法编辑或滚动页面。

​
使用开发者工具进行临时修复

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

​
第 1 步：打开 DevTools

  1. 在 Upcart 应用中打开 Cart Editor
  2. 右键点击页面任意位置并选择检查，或按下：
    • Cmd + Option + I（Mac）
    • Ctrl + Shift + I（Windows）

​
第 2 步：找到损坏的布局容器

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

​
第 3 步：禁用固定定位

  1. 选中 .Polaris-Frame__Content 后，查看 Styles 标签页
  2. 找到 position: fixed 属性并取消勾选
这样应该就能解锁页面，让你再次滚动浏览布局。

​
删除无效的 HTML

现在布局可以正常访问了：
  1. 滚动到 Custom HTML 字段
  2. 查找可能导致问题的损坏 HTML 或内嵌 CSS
通常会破坏布局的内容示例：
  1. 将内容复制到其他地方作为备份，然后删除它
  2. 保存你的更改

​
确认已修复

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

​
预防此问题的最佳实践

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