Skip to main content
📝 참고 V1 선택자는 레거시 카트 드로어 모듈을 대상으로 해요. V2로 업그레이드했다면 이 페이지의 모듈 선택자는 더 이상 일치하지 않아요 — 최신 선택자는 V2 CSS 선택자 라이브러리를 참고하세요. 알아 둘 만한 두 가지 예외가 있어요: .upcart-cart.upcart-cart-body는 모듈이 아니라 드로어 셸에 있으므로 V2에서도 계속 적용돼요. 드로어 전체를 대상으로 하는 레이아웃 수정(너비 제한, 가로 오버플로 방지)은 업그레이드 후에도 계속 작동해요.

개요

가격 숨기기, 텍스트 크기 조정, 버튼 위치 변경처럼 장바구니의 모양을 바꾸고 싶다면 여기에서 시작하세요. 이 CSS 선택자 라이브러리는 나만의 커스텀 코드로 이런 변경을 할 때 필요한 도구를 제공해요. 이 문서에는 사용 가능한 모든 CSS 선택자가 그룹으로 정리되어 있으며, 스타일 작성과 테스트에 도움이 되는 리소스 링크도 함께 제공해요.

참고

이 라이브러리는 편의를 위해 제공하지만, Upcart 지원팀은 커스텀 코드 작성이나 수정을 도와드릴 수 없어요. 이는 저희 사용자 지정 정책의 일부예요. 커스텀 코드 솔루션은 Shopify 전문가와 상담하는 것을 권장해요. Shopify 전문가 보기

Upcart CSS 선택자 사용 방법

이 문서는 Upcart 카트 드로어를 스타일링하고 사용자 지정하는 데 사용할 수 있는 CSS 선택자 라이브러리예요. 각 선택자는 헤더, 상품 행, 업셀, 리워드 모듈 등 장바구니의 특정 부분을 대상으로 해요. 이 선택자들로 다음을 할 수 있어요:
  • 요소 숨기기 또는 스타일 변경
  • 간격, 글꼴, 색상 변경
  • 스토어 브랜딩에 맞게 레이아웃 조정
CSS를 적용하려면 Cart Editor를 열고 Settings로 이동해 Custom CSS 탭을 선택한 뒤 편집기에 스타일을 붙여넣으세요.

CSS를 추가하기 전에 알아 둘 것

커스텀 스타일 작업에 들어가기 전에 순조로운 진행을 도와줄 몇 가지 팁을 소개할게요. 변경 사항을 테스트하기 쉬워지고, 예기치 못한 문제를 피하고, 장바구니를 망가뜨리지 않으면서 원하는 모양을 얻을 수 있어요.

CSS 사용자 지정 체크리스트:

  • 안전한 환경에서 테스트하세요: 가능하면 게시 전에 미리보기나 게시되지 않은 테마를 사용하세요.
  • 작게 시작하세요: 한 번에 하나씩 변경해야 무엇이 효과가 있었는지 추적하기 쉬워요.
  • 올바른 위치에 스타일을 붙여넣으세요: Upcart Editor > Settings > Custom CSS 필드에 코드를 추가하세요.
  • 검사 도구를 사용하세요: 브라우저에서 요소를 마우스 오른쪽 버튼으로 클릭하고 **검사(Inspect)**를 선택해 선택자를 실시간으로 찾고 테스트하세요.
  • 추측하지 마세요: 모든 요소가 모든 장바구니에 표시되는 것은 아니에요 — 다양한 장바구니(리워드/업셀 유무 등)로 테스트하세요.

CSS 선택자 라이브러리

아래는 Upcart에서 사용할 수 있는 모든 CSS 선택자 목록이에요. 사용자 지정하려는 대상을 쉽게 찾을 수 있도록 모듈(헤더, 상품, 업셀 등)별로 그룹화했어요. 직접 스타일을 작성할 때 참고 자료로 활용하세요.

일반 설정

디자인 모듈

헤더 모듈

본문 설정

공지 모듈

리워드 모듈

추천 모듈

구독 업그레이드 모듈

업셀 모듈

상품 설정

애드온 모듈

할인 코드 모듈

절약 금액 행

간편 결제 모듈

참고

Upcart의 간편 결제 버튼은 시각적 컨테이너 역할을 하며, 그 안의 콘텐츠와 기능은 Shopify가 전적으로 제어해요. 따라서 저희가 버튼의 동작이나 모양을 수정할 수 없어요. 자세한 내용은 간편 결제 모듈 가이드를 참고하세요.

신뢰 배지 모듈

추가 메모 모듈

Upcart 설정 모듈

스켈레톤 선택자

시작하는 데 도움이 되는 자료: