Skip to main content

​
Shadow DOM이 하는 일

Render Cart in Shadow DOM 설정을 켜면, Upcart는 스타일과 스크립트를 스토어의 나머지 부분과 분리하는 독립된 공간을 만들어요. 이는 다음을 의미해요:
  • 테마의 전역 CSS가 Upcart의 디자인을 덮어쓸 수 없어요.
  • Upcart의 스타일도 테마에 영향을 주지 않아요.
  • 다양한 기기와 테마에서 카트가 일관되게 유지돼요.
Shadow DOM은 카트가 의도한 대로 보이고 작동하도록 도와주는 카트 주변의 “보호막”이라고 생각하면 돼요.

​
이런 일이 발생하는 이유

Shopify와 서드파티 테마에는 Upcart의 모양이나 동작에 의도치 않게 영향을 줄 수 있는 전역 CSS와 JavaScript가 포함된 경우가 많아요. Render Cart in Shadow DOM 설정은 Upcart의 카트 드로어를 자체 보호 환경 안에 격리하여 이러한 충돌을 방지하는 데 도움을 줘요. 활성화하면 테마 업데이트나 커스텀 코드 변경과 관계없이 Shadow DOM이 카트 디자인과 레이아웃을 일관되게 유지해요. 다만 테마나 서드파티 앱이 카트 요소에 직접 접근해야 하는 경우, 이 격리로 인해 통합에 어려움이 생길 수 있어요.

​
기술적 고려 사항

본인이나 개발자가 JavaScript로 Upcart 내부의 요소를 수정해야 한다면, 올바른 document 참조를 사용하는 것이 중요해요:
  • Upcart 내부의 요소를 대상으로 할 때는 upcartDocumentOrShadowRoot를 사용하세요.
  • Upcart 외부의 요소(예: Shopify 테마의 헤더나 푸터)를 대상으로 할 때는 document를 사용하세요.
Shadow DOM이 격리되어 있어도 Upcart는 Public API와 헬퍼 함수를 통해 테마 및 다른 앱과 상호작용할 수 있는 방법을 제공해요.

​
문제 해결 및 제한 사항

대부분의 경우 Shadow DOM을 활성화하면 CSS 및 레이아웃 충돌이 자동으로 해결돼요.
하지만 여전히 문제가 발생할 수 있는 몇 가지 시나리오가 있어요:
  • 가격 앱: 다른 앱이 카트 내부에서 가격이나 체크아웃 동작을 직접 수정해야 하는 경우, Shadow DOM은 외부 스크립트로부터 Upcart의 내부 구조를 숨기기 때문에 이를 어렵게 만들 수 있어요.
  • 테마 수준 JavaScript: document.querySelector()를 사용하는 커스텀 스크립트는 Shadow DOM이 활성화된 동안 카트 요소를 찾지 못할 수 있어요.
이러한 통합을 위해 스토어 동작을 테스트해야 한다면 일시적으로 비활성화할 수 있어요. 카트 에디터를 열고 Settings → Cart settings로 이동한 다음 Advanced Settings를 펼치고 Render cart in shadow DOM 체크를 해제하세요.