커스텀 HTML

Upcart의 Custom HTML 섹션을 사용하면 카트 드로어의 다양한 위치에 커스텀 코드를 삽입할 수 있어요.
<script> 태그로 JavaScript를 작성하고 Upcart의 Public API를 사용해 카트와 상호 작용할 수도 있어요(예: upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)).

위치 안내

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

작동 방식

HTML Location 드롭다운으로 카트 레이아웃 내에서 코드가 표시될 위치를 선택할 수 있어요. 선택에 따라 해당 카트 영역에 코드가 삽입돼요. 이를 사용해 다음을 추가할 수 있어요:

커스텀 메시지
신뢰 문구
앱 연동
분석 스니펫
스타일링 훅
개인화된 오퍼나 할인이 포함된 배너 같은 프로모션 콘텐츠
고객 신뢰를 높이는 제품 보증 문구

동적 토큰

모든 Custom HTML 필드 안에서 다음 토큰을 사용해 실시간 카트 데이터를 삽입할 수 있어요:

토큰	렌더링되는 내용
`{{UPCART_SUBTOTAL}}`	스토어 통화로 형식이 지정된 현재 카트 소계

예시:

<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>

이 토큰은 **Scripts (Before Load)**를 제외한 모든 HTML 위치 필드에서 작동하며, 해당 위치에서는 대신 JavaScript API를 사용해야 해요. 이것이 Custom HTML 필드에서 사용할 수 있는 유일한 동적 토큰이에요.

사용 가능한 HTML 위치


위치	설명
Above announcements/rewards	카트 상단, 카트 헤더 아래.
Below header/announcements/rewards	공지사항이나 리워드 바 바로 아래.
Between each line item	카트의 모든 제품 아래에 삽입돼요.
Below cart items	카트 라인 아이템 바로 아래, 하단 모듈 위.
Above footer/add-ons	카트 아이템과 업셀 아래, 애드온 위.
Above checkout button	푸터 안, 체크아웃 버튼과 소계 바로 위.
Below checkout button	푸터 안, 체크아웃 버튼 바로 아래.
Bottom of cart	드로어의 맨 아래(푸터 바깥).
On empty cart screen	”Your cart is empty” 텍스트 옆에 표시돼요.
Scripts (Before Load)	카트가 로드되기 전에 JavaScript를 실행하는 보이지 않는 영역. 트래킹, 조건부 로직, 커스텀 동작에 적합해요.

커스텀 CSS (선택 사항)

다음 경로에 있는 Custom CSS 편집기로 HTML에 스타일을 지정할 수 있어요:
Upcart > Cart Editor > Settings > Custom CSS 예를 들어, 빈 카트 정렬을 조정하려면:

[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }

시작하기

장바구니 모듈

장바구니 설정

고정 장바구니 버튼

멀티카트

사용자 지정

분석

연동 및 호환성

요금 및 계정

문제 해결

위치 안내

작동 방식

동적 토큰

사용 가능한 HTML 위치

커스텀 CSS (선택 사항)

​위치 안내

​작동 방식

​동적 토큰

​사용 가능한 HTML 위치

​커스텀 CSS (선택 사항)

위치 안내

작동 방식

동적 토큰

사용 가능한 HTML 위치

커스텀 CSS (선택 사항)