스타일 지정 외에도, 장바구니에는 스토어프론트와의 상호 작용을 제어하는 몇 가지 동작 설정이 있어요 — 드로어가 열리는 시점, 그리고 Aftersell이 장바구니와 동기화하는 테마 요소예요.
카트 에디터에서 Cart settings를 여세요. 아래 옵션은 Behavior와 Custom selector 아래에 그룹화되어 있어요.
Open cart when an item is added는 구매자가 상품을 추가할 때마다 드로어가 자동으로 열릴지 여부를 제어해요. 기본적으로 켜져 있어요. 구매자가 직접 열기 전까지 장바구니를 닫아 두고 싶다면 끄세요.
Aftersell은 CSS 선택자를 통해 스토어프론트에 연결돼요 — 예를 들어 어떤 요소가 장바구니를 여는지, 어떤 장바구니 아이콘 수량을 동기화할지 파악하기 위해서예요. 기본 감지 기능이 가장 인기 있는 Shopify 테마(Dawn, Sense, Crave, Debut, Impulse, Horizon 등)를 지원하므로 대부분의 스토어는 이 설정을 건드릴 필요가 없어요. 테마에서 무언가가 제대로 연결되지 않을 때만 선택자를 조정하세요.
각 선택자는 동일한 세 가지 모드를 제공해요:
선택자 입력란은 Default + custom과 Custom only 모드에서만 활성화돼요.
- 브라우저(Chrome 권장)에서 스토어프론트를 여세요.
- 대상으로 삼고 싶은 요소(장바구니 아이콘, 수량 숫자, 장바구니 추가 버튼)를 마우스 오른쪽 버튼으로 클릭하고 **검사(Inspect)**를 선택하세요.
- 열린 패널에서 해당 요소를 나타내는 항목을 찾으세요(수량은 보통 장바구니 아이콘 안의
span이에요).
- 클래스(
.로 시작) 또는 ID(#로 시작)를 확인하세요 — 예: .header__cart-count span 또는 #CartCount.
- Cart settings로 돌아가 선택자를 Default + custom 또는 Custom only로 설정하고 붙여넣으세요.
- 저장한 다음 데스크톱과 모바일 모두에서 테스트하세요.
Default부터 시작하세요 — 대부분의 테마에서 설정 없이 작동해요. 여러 아이콘 중 하나만 업데이트될 때(예: 데스크톱은 되는데 모바일이 안 될 때)는 Default + custom을, 기본값이 잘못된 요소를 대상으로 할 때는 Custom only를 사용하세요. 어떤 선택자를 써야 할지 잘 모르겠다면 테마 개발자가 알려줄 수 있어요 — 코드를 작성할 필요 없이 복사해서 붙여넣기만 하면 돼요.
