Skip to main content
⚠️ 중요 공지 이 커스터마이징은 Upcart 장바구니 모듈의 버전 1에서만 작동해요. 최근에 장바구니를 버전 2로 업그레이드하셨다면 이 커스터마이징이 작동하지 않을 수 있어요. 마이그레이션 가이드에서 제공하는 버전 2용 새 선택자를 사용하셔야 해요. 커스터마이징이 예상대로 작동하지 않는 경우, 직접 장바구니를 버전 1로 되돌릴 수 있어요. Cart Editor에서 왼쪽 메뉴 상단의 Cart version 드롭다운을 사용해 V1.0 (Legacy) 를 선택하세요. 이 드롭다운은 장바구니의 모든 모듈이 V2에 있을 때 표시돼요. 현재 모듈 버전 2를 위한 새로운 커스터마이징 템플릿을 준비하고 있으며, 곧 제공될 예정이에요.

개요

이 커스터마이징을 사용하면 특정 제품이 장바구니에 있을 때 리워드 바와 같은 장바구니의 특정 부분을 숨길 수 있어요. 특정 SKU에 대해 장바구니 경험을 단순화하거나 특정 프로모션이 특정 상품과 함께 표시되지 않도록 하고 싶을 때 유용해요. 이 설정은 제품 ID를 사용해 장바구니에 어떤 제품이 있는지 감지하고, 일치하는 제품이 발견되면 선택한 요소를 숨겨요. Upcart 에디터에서 커스텀 HTML과 CSS를 사용해 이 로직을 적용하게 돼요.

언제 사용하나요

  • 프로모션 상품이 장바구니에 있을 때 리워드 바 숨기기
  • 제품 유형에 따라 커스텀 콘텐츠 블록, 신뢰 배지 또는 업셀 섹션 숨기기
  • 특정 상품에 대해 더 깔끔하거나 맞춤화된 체크아웃 흐름 유지
이 방식은 HTML과 JavaScript에 대한 기본 지식이 필요해요.

1단계: 제품 ID 찾기

  1. Shopify Admin > Products로 이동하세요
  2. 대상으로 지정할 제품을 클릭하세요
  3. URL에서 /products/ 뒤에 있는 숫자 제품 ID를 복사하세요
예시:
이 ID들은 표시 여부를 제어하는 JavaScript 배열에서 사용하게 돼요.

2단계: 커스텀 HTML 추가

  1. Upcart > Cart Editor > Settings > Custom HTML로 이동하세요
  2. 아래 코드를 Above announcements/rewardsOn empty cart screen HTML 위치 모두에 붙여넣으세요
  3. productIDsToExclude의 값을 여러분의 제품 ID로 교체하세요
  4. .YOUR-CLASS-HERE를 숨기고 싶은 장바구니 요소로 변경하세요 (예: .upcart-rewards, .custom-message, .trust-badge)
레거시 참고: window.upcartOnCartLoaded 콜백은 여전히 작동하지만 더 이상 사용되지 않으며(deprecated) 콘솔 경고를 기록해요. 모든 새 스크립트에는 upcartSubscribeCartLoaded를 사용하세요.

3단계: 선택적 폴백 CSS

장바구니가 완전히 로드되기 전에 요소가 숨겨지도록 하고 싶다면, Custom CSS 섹션에 다음을 추가하세요:
참고: 이 방법은 JavaScript가 실행될 때까지 모든 사용자에게 요소를 일시적으로 숨길 수 있어 깜빡임이 발생할 수 있어요. 대부분의 경우 JavaScript 방식에 의존하는 것이 더 좋아요.

최종 결과

설정이 완료되면:
  • 장바구니에 지정된 제품 중 하나가 포함되어 있으면 대상 장바구니 요소(예: 리워드 바)가 숨겨져요
  • 그렇지 않으면 요소는 계속 표시돼요
  • 이 로직을 재사용하여 제품별 규칙에 따라 다른 요소를 숨기거나 표시할 수 있어요

여전히 도움이 필요하신가요?

더 복잡한 커스터마이징의 경우 Shopify Expert와 함께 작업하시는 것을 권장해요. 장바구니 드로어 내부의 HTML, CSS, JavaScript 작업을 도와드릴 수 있어요. Shopify Experts 보기