Skip to main content

​
개요

Cart Editor의 Custom HTML 필드에 잘못되거나 손상된 HTML이 추가되면 레이아웃이 깨져 에디터 인터페이스를 사용할 수 없게 될 수 있어요. 이 가이드에서는 손상된 코드를 안전하게 제거하고 전체 기능을 복원할 수 있도록 레이아웃을 일시적으로 고치는 방법을 안내해요.

​
문제의 원인

이 문제는 보통 판매자가 다음과 같은 작업을 할 때 발생해요:
  • 올바른 구조 없이 <style> 또는 <script> 태그를 삽입한 경우
  • HTML 태그를 닫지 않거나 짝이 맞지 않게 남긴 경우
  • Custom HTML 필드에 레이아웃을 깨뜨리는 콘텐츠를 추가한 경우
그 결과 Cart Editor를 읽거나 사용할 수 없게 되고, 편집은 물론 페이지 스크롤조차 할 수 없게 될 수 있어요.

​
개발자 도구를 사용한 임시 수정

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

​
1단계: DevTools 열기

  1. Upcart 앱에서 Cart Editor를 여세요
  2. 페이지 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택하거나 다음 키를 누르세요:
    • 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> 블록을 직접 추가하지 마세요
  • HTML 필드에 CSS를 추가하는 대신 Custom CSS 섹션을 사용하세요
  • 확실하지 않으면 항상 Sandbox 모드에서 변경 사항을 미리 확인하세요