Skip to main content
기본 제공 디자인 설정만으로 충분하지 않을 때, 직접 커스텀 CSS를 추가해 장바구니의 스타일을 지정하세요.

​
추가 위치

카트 에디터에서 Cart settings → Custom CSS를 여세요. 여러분의 CSS는 장바구니 전체에 적용되며 장바구니의 기본 스타일 이후에 로드되므로, 여러분의 규칙이 우선해요.

​
공개 클래스만 대상으로 하세요

장바구니의 공개 cart-external-* 클래스를 사용해 스타일을 지정하세요. 에디터가 이를 자동 완성하고 나머지에 대해서는 경고해요:
  • cart-external-*: 공개적으로 지원되는 대상이에요. 이것을 사용하세요. 자체 스타일이 없으므로, 오로지 여러분의 CSS가 연결될 수 있도록 존재해요.
  • cart-internal-*: 장바구니 자체의 내부 구조로, 모든 기본 스타일이 여기에 있어요. 에디터는 이를 대상으로 하는 선택자를 오류로 표시해요. 모든 기존 장바구니가 이에 의존하기 때문에 함부로 변경되지는 않지만, 이는 여러분과의 계약이 아니라 장바구니 측에서 변경할 수 있는 영역이에요. 대신 대응하는 cart-external-* 클래스로 스타일을 변경하세요.
  • 에디터가 인식하지 못하는 다른 cart-* 클래스는 경고로 표시돼요.
마크업에서 cart-internal-* 클래스를 보게 될 거예요. 모든 블록의 기본 커스텀 템플릿에도 포함되어 있어요. 이는 정상이에요: 블록의 기본 외관을 만들어 주는 요소니까요. 여기서의 규칙은 이 패널에서 여러분이 작성하는 선택자에 관한 것이지, 장바구니가 렌더링하는 클래스명에 관한 것이 아니에요.블록의 DOM 구조를 변경하는 커스텀 템플릿을 작성한다면, 어떤 클래스명을 유지하고 어떤 것을 제거해야 하는지 커스텀 템플릿 스타일링을 참고하세요.

​
Shadow DOM: 장바구니는 독립적이에요

스토어프론트에서 장바구니 전체는 자체 shadow DOM 안에 렌더링돼요. 이는 다음을 의미해요:
  • 테마의 CSS가 장바구니 안으로 새어 들어갈 수 없고, 장바구니의 CSS도 밖으로 새어 나갈 수 없으므로, 커스텀 CSS는 자동으로 장바구니 범위로 한정되어 사이트의 나머지 부분과 충돌하지 않아요.
  • 선택자는 장바구니 내부의 요소와 클래스를 참조해야 해요. 장바구니 밖의 페이지 요소를 겨냥한 선택자는 안으로 미치지 않아요.
같은 경계가 JavaScript에도 적용돼요: document.querySelector도 드로어 안을 볼 수 없어요. 장바구니 요소에 접근하려는 스크립트는 shadowRoot를 통해야 하며, 동일한 cart-external-* 클래스를 대상으로 해요.

​
디자인 설정을 대신 사용해야 할 때

색상, 둥근 모서리, 간격, 너비에는 기본 제공 디자인 설정이 더 간단하고 안전하므로, 그것이 다루지 못하는 부분에만 커스텀 CSS를 사용하세요.

​
다음 단계

  • 디자인 설정: 기본 제공 스타일링 컨트롤로, 가장 먼저 시도해 볼 것이에요.
  • 커스텀 템플릿: CSS만으로 불가능할 때 블록의 마크업을 완전히 대체해요.
  • Cart SDK: 외관이 아닌 동작을 위한 것이에요.