Skip to main content
디자인 모듈에서는 레이아웃, 브랜드 색상, 버튼 스타일 등 카트의 외관을 커스터마이징할 수 있어요.

일반

테마에서 폰트 상속하기

이 설정을 사용하면 Upcart가 Shopify 테마 설정에 정의된 폰트를 사용해요. 현재 폰트 선택을 확인하려면 Shopify 테마 편집기를 열고 Typography 섹션으로 이동하세요.

🚧 카트 미리보기 🚧

테마에서 상속된 폰트는 Upcart 미리보기 창에는 나타나지 않지만, 라이브 스토어프론트에서는 올바르게 표시돼요.

취소선 가격 표시하기

이 설정을 활성화하면 카트의 각 아이템 옆에 취소선 가격(Compare At Price라고도 불려요)이 표시돼요. 제품 페이지와 마찬가지로 할인된 가격을 반영해요. 할인 가격과 절약 금액 옆에 취소선이 그어진 원래 가격이 표시된 카트 아이템

소계 라인 활성화하기

카트에 소계 라인을 추가해요. 이 설정을 켜면 Colors 아래에 Subtotal text color 필드도 나타나서 소계를 나머지 카트 텍스트와 별도로 스타일링할 수 있어요. 설정을 끄면 해당 색상 필드가 숨겨져요.

카트 너비

드로어의 너비를 제어하며, 뷰포트별로 별도로 설정돼요:
  • 데스크톱 - Default 또는 Wide
  • 모바일 - Full(가장자리에서 가장자리까지) 또는 Nearly full(가장자리에 약간의 간격)

색상

배경 색상

푸터와 업셀 카드를 제외한 카트의 기본 배경 색상을 설정해요.

카트 강조 색상

카트 푸터와 업셀 아이템 카드의 배경 색상을 제어해요. 분홍색 업셀 카드에 카트 강조 색상이 적용된 Upcart Colors 설정

카트 텍스트 색상

별도로 제어되는 버튼 텍스트와 절약 금액 텍스트를 제외한 모든 카트 텍스트의 색상을 정의해요.

절약 금액 텍스트 색상

제품 가격 아래에 표시되는 절약 금액 텍스트의 색상을 설정해요. 절약 금액 텍스트가 마젠타색으로 강조된 카트 아이템

소계 텍스트 색상

소계 라인의 색상을 설정해요. 이 필드는 General에서 Enable subtotal line이 켜져 있을 때만 나타나요.

🚧 카트 미리보기 🚧

미리보기 편집기는 최종 스타일링을 정확하게 반영하지 않을 수 있어요. 스토어 테마에 텍스트 크기나 색상에 영향을 주는 커스텀 CSS가 포함되어 있을 수 있어요. 항상 라이브 스토어프론트에서 변경 사항을 확인하세요.

버튼 설정

Upcart는 체크아웃 버튼 전용 커스터마이징을 포함한 고급 버튼 스타일링 옵션을 제공해요. 여기에는 CSS 조정 방법과 Shopify 브랜딩 도구 연동이 포함돼요.

모서리 반경

버튼 모서리의 둥근 정도를 0px에서 40px까지 조정해요. 0은 날카로운 사각형 모서리를 만들고, 40은 슬라이더가 제공하는 가장 둥근 값이에요. 이 값은 체크아웃 버튼, 업셀 버튼, 할인 버튼, 업그레이드 버튼에 함께 적용돼요.
슬라이더는 40px에서 멈춰요. 완전한 알약 모양 버튼을 만들려면 커스텀 CSS가 필요해요 — 아래의 고급 CSS 커스터마이징을 참고하세요.
체크아웃 버튼을 둥글게 만드는 16픽셀로 설정된 모서리 반경 슬라이더

버튼 색상

다음을 포함한 카트의 모든 버튼 배경 색상을 설정해요:
  • 체크아웃 버튼
  • 업셀 “Add to Cart” 버튼
  • 할인 “Apply” 버튼
  • 구독 업그레이드 버튼. 이 버튼들의 색상은 Cart Editor에서 커스터마이징할 수 있어요. CSS 수정 같은 더 고급 커스터마이징은 고급 커스터마이징 섹션을 참고하세요.

버튼 텍스트 색상

모든 카트 버튼에 사용되는 텍스트 색상을 지정해요.

버튼 텍스트 호버 색상

고객이 마우스를 올렸을 때 버튼 텍스트의 색상을 제어해요. 예를 들어 초록색으로 설정하면 호버 시 텍스트가 초록색으로 변해요.

Continue Shopping 버튼 표시하기

카트에 Continue shopping 버튼을 추가하여, 고객이 닫기 아이콘을 사용하지 않고도 드로어를 닫고 쇼핑으로 돌아갈 수 있게 해요.

체크아웃 버튼을 위한 고급 CSS 커스터마이징

큰 폭의 디자인 변경이 필요하면 Custom CSS 코드로 체크아웃 버튼을 수정할 수 있어요:
  1. Cart Editor에서 Settings를 열고 Custom CSS 탭을 선택하세요.
  2. .checkout 같은 관련 CSS 선택자를 활용하세요. CSS 스니펫 예시: 알약 모양 버튼을 만들려면:
    검은색 테두리를 추가하려면:
    .checkout을 실제 버튼의 CSS 클래스로 바꾸세요. 호버 효과, 패딩, 텍스트 색상, 폰트 등 추가 스타일링도 가능해요.

버튼 커스터마이징을 위한 Shopify 브랜딩 연동하기

Shopify를 사용 중이라면 Shopify 관리자에서 체크아웃 버튼 디자인을 업데이트할 수 있어요:
  1. Shopify 관리자에 로그인하세요.
  2. Settings > Checkout > Customize로 이동하세요.
  3. 브랜딩 옵션을 활용하여 폰트, 둥근 정도, 색상을 수정해 일관된 디자인을 만드세요.
업셀 Add 버튼과 체크아웃 버튼이 있는 Upcart 카트 드로어 미리보기