> ## 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로 깨진 Cart Editor 레이아웃을 고치는 방법

> 커스텀 코드 추가 후 앱 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>

Custom HTML 필드에 접근할 수 있도록 브라우저의 개발자 도구를 사용해 레이아웃을 일시적으로 고치는 다음 단계를 따르세요.

<div id="step-1-open-devtools">
  ## 1단계: DevTools 열기
</div>

1. Upcart 앱에서 Cart Editor를 여세요
2. 페이지 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 **Inspect**를 선택하거나 다음 키를 누르세요:

   * `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>` 블록을 직접 추가하지 마세요
* HTML 필드에 CSS를 추가하는 대신 **Custom CSS** 섹션을 사용하세요
* 확실하지 않으면 항상 Sandbox 모드에서 변경 사항을 미리 확인하세요