Skip to main content

개요

이 커스터마이징은 HTML, CSS, JavaScript를 사용해 장바구니에 업셀 상품만 있을 때 체크아웃을 차단해요. 업셀이 독립적인 구매가 아니라 보조 오퍼로 취급되도록 보장하여, 더 통제되고 의도적인 업셀 전략을 뒷받침해요. 이렇게 하면 업셀 제품이 특정 경계 내에서 작동하여 주요 제품의 보완 상품으로서의 역할이 강조돼요. 구현하면 업셀이 아닌 제품이 최소 하나 장바구니에 추가될 때까지 체크아웃 버튼이 비활성화돼요.

작동 방식

  • 장바구니에 업셀 상품만 있으면 체크아웃 버튼이 회색으로 표시돼요
  • 버튼 아래에 경고 메시지가 나타나요
  • 일반 제품이 추가되면 버튼이 활성화되고 경고가 사라져요 - 대상 경고 메시지를 표시하는 등, 업셀 제품이 연관된 트리거 제품과 함께만 구매되도록 보장하는 시나리오에 대한 명확한 검증을 제공해요.
이 설정은 JavaScript와 CSS에 대한 기본 지식이 있는 스토어 운영자나 개발자에게 적합해요.

1단계: 커스텀 HTML 추가

다음으로 이동하세요:
Upcart > Cart Editor > Settings > Custom HTML

Above announcements/rewards 섹션에 다음을 붙여넣으세요:

레거시 참고: window.upcartOnCartLoaded 콜백은 여전히 작동하지만 더 이상 사용되지 않으며(deprecated) 콘솔 경고를 기록해요. 모든 새 스크립트에는 upcartSubscribeCartLoaded를 사용하세요.

Below checkout button 섹션에 다음을 붙여넣으세요:

경고 메시지의 문구는 브랜드 톤에 맞게 자유롭게 조정하세요.

2단계: 커스텀 CSS 추가

다음으로 이동하세요:
Upcart > Cart Editor > Settings > Custom CSS
다음 코드를 붙여넣으세요:
이 코드는 경고 메시지의 스타일을 지정하고 체크아웃 버튼을 시각적, 기능적으로 비활성화해요.

최종 결과

설정이 완료되면:
  • 업셀이 아닌 제품이 최소 하나 장바구니에 있지 않으면 체크아웃이 차단돼요
  • 체크아웃이 비활성화된 이유를 고객에게 메시지로 안내해요
  • 매끄럽고 브랜드에 어울리는 경험을 제공해요
특히 다음에 도움이 돼요: 효과적인 업셀 전략을 이러한 기법과 결합하면 구매 과정에서 불필요한 충돌을 제거하여 전체적인 고객 쇼핑 경험도 개선돼요.
  • 실수로 업셀 단일 상품이 구매되는 것 방지
  • 업셀을 애드온 전용 제품으로 유지
  • AOV와 제품 번들링에 대한 더 나은 통제 보장

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

커스터마이징에 도움이 필요하시면, 장바구니 드로어에 HTML, CSS, 그리고 JavaScript까지 추가하는 것에 대해 Shopify Expert와 상담하시는 것을 권장해요. Shopify Experts 보기