Skip to main content

​
높이

Height 설정은 공지 바가 얼마나 두껍게 보일지 제어해요. Slim, Normal, Thick 세 가지 옵션이 있어요. Slim은 드로어를 더 컴팩트하게 유지해 카트 콘텐츠를 위한 공간을 확보해요 — 특히 작은 화면에서 유용해요. Normal은 둘의 중간이에요. Thick은 더 큰 시각적 강조를 주어 메시지가 고객에게 돋보이도록 해줘요.

​
위치

Position 설정을 사용해 공지 바가 카트 드로어 안에서 Before products 또는 After products 중 어디에 표시될지 선택하세요.
  • Before products는 바를 카트 본문 상단, 헤더 바로 아래에 배치해요.
  • After products는 바를 카트 본문 하단, 푸터 바로 위에 배치해요 — 노트와 업셀 모듈도 그곳에 배치되어 있다면 그 아래에요.
상품 위와 아래에 배치된 공지 바를 비교하는 두 개의 Upcart 카트

​
타이머 지속 시간

일정 시간 후 공지가 만료되도록 하려면 Timer duration 필드에 카운트다운을 설정하세요. MM:SS 형식을 사용해요 — 5분이면 05:00, 30초면 00:30이에요. 초는 00–59여야 하며, 그보다 높은 값은 거부돼요. 카운트다운은 공지 텍스트에 타이머 변수가 포함되어 있을 때만 작동해요. 시간이 다 되면 전체 공지 바가 카트에서 자동으로 제거돼요.
기본 제공되는 카운트다운 타이머는 세션 기반이며 설정된 분 단위 시간에서부터 카운트다운해요. 특정 시각에 리셋되는 반복 또는 일일 카운트다운(예: 매일 오후 2시까지 카운트다운)은 지원하지 않아요. 이 기능은 현재 Upcart에서 사용할 수 없어요.

​
공지 텍스트

이 섹션에서는 공지 배너에 표시되는 메시지를 입력하고 서식을 지정할 수 있어요. 입력 필드 위의 서식 바를 사용해 텍스트의 특정 부분에 굵게, 기울임, 밑줄, 색상 옵션을 적용할 수 있어요. 색상을 적용할 때는 컬러 피커 스와치를 사용하거나, 피커 아래 텍스트 필드에 헥스 코드(예: #DDDDDD)를 입력하거나 붙여넣을 수 있어요. 공지 텍스트 편집기에서 텍스트 스타일링을 위해 열린 색상 선택기
Announcement Text 필드는 하이퍼링크를 지원하지 않아요 — 서식 툴바에 링크나 URL 버튼이 없고, 붙여넣은 <a> 태그나 Markdown 링크는 저장 시 제거돼요. 공지를 클릭 가능하게 만들거나 링크를 포함하려면 대신 Custom HTML 모듈을 사용하세요(아래 참조).
기본 Announcement Text 필드는 하이퍼링크를 렌더링하지 않기 때문에, Custom HTML로 링크를 삽입해 공지 바를 대체하거나 보완할 수 있어요:
  1. Upcart > Cart Editor > Settings > Custom HTML로 이동하세요.
  2. HTML Location을 Above announcements/rewards(공지 바 위에 표시) 또는 Below header/announcements/rewards(공지 바 바로 아래에 표시)로 설정하세요.
  3. 링크가 포함된 스니펫을 붙여넣으세요. 예:
  4. Save를 클릭한 다음 라이브 카트에서 테스트하세요.
Custom HTML 위치와 스타일링에 대한 자세한 내용은 Custom HTML과 Custom CSS를 참조하세요. Upcart 지원팀은 커스텀 코드를 작성하거나 디버깅하지 않아요 — 코드 작성에 도움이 필요하면 Shopify Expert에게 문의하세요. 카운트다운 기능을 사용한다면 타이머 변수를 메시지에 직접 삽입하세요. V2 카트에는 {{timer}}, V1 카트에는 {TIMER}를 사용하세요. 메시지에 타이머 카운트다운 변수가 추가된 공지 텍스트 필드

​
중요

타이머 변수(V2는 {{timer}}, V1은 {TIMER})는 복사-붙여넣기 대신 직접 입력해 주세요. 이렇게 하면 라이브 카트에서 타이머가 올바르게 표시되지 않게 하는 숨겨진 서식 문제를 피할 수 있어요.

​
글꼴 크기

슬라이더를 사용해 공지 텍스트의 크기를 10px부터 24px까지 제어할 수 있어요. 이를 통해 모바일과 데스크톱 경험 모두에서 가독성을 확보할 수 있어요.

​
색상

Background Color는 공지 바의 전체 채우기 색상을 정의할 수 있게 해줘요. Border Color는 배너 위아래의 가로선을 조정해 스타일이 적용된 컨테이너 느낌을 줄 수 있어요.

​
고급 타이머 설정

추가 기능이 필요하다면 JavaScript를 사용해 카운트다운 타이머를 커스터마이징할 수 있어요. 스크립트는 Custom HTML 모듈이 아닌 “Scripts (Before Load)” 섹션에 추가하세요. 이는 보안 제한이 아니라 로드 타이밍 요구 사항이에요 — Custom HTML도 스크립트를 실행하지만, 카트의 로드 이벤트에 안정적으로 연결하기에는 너무 늦게 실행돼요. “Scripts (Before Load)” 섹션은 카트가 로드되기 전에 코드를 실행하므로 upcartSubscribeCartLoaded 같은 콜백이 올바르게 작동해요. 예시 코드:
레거시 참고: window.upcartOnCartLoaded는 여전히 작동하지만 지원 중단(deprecated)되었으며 콘솔 경고를 기록해요. 새로운 스크립트에는 모두 upcartSubscribeCartLoaded를 사용하세요. 코드의 배치와 문법을 신중하게 테스트하세요. 일부 플랫폼 제한이 스크립트 처리 방식에 여전히 영향을 줄 수 있어요.