⚠️ 중요 공지 이 선택자들은 Upcart 장바구니 모듈의 Version 2(V2)에만 적용돼요. **Version 1(V1)**을 사용 중이라면 이 선택자들은 작동하지 않아요. V1 장바구니는 레거시 모듈 구조와 선택자를 다루는 **Version 1 CSS 선택자 문서**를 참고하세요. 어떤 버전을 사용 중인지 확인하려면 Cart Editor를 열고 왼쪽 메뉴 상단을 확인하세요. 장바구니의 모든 모듈이 V2인 경우에 Cart version 드롭다운이 표시돼요. 보이지 않는다면 장바구니에 아직 V1 모듈이 있는 거예요. V1에서 V2로의 마이그레이션에 대한 자세한 내용은 V2.0 마이그레이션 가이드를 참고하세요.

개요

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

참고

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

Upcart CSS 선택자 사용 방법

이 문서는 Upcart 카트 드로어를 스타일링하고 사용자 지정하는 데 사용할 수 있는 CSS 선택자 라이브러리예요. 각 선택자는 헤더, 상품 행, 업셀, 리워드 모듈 등 장바구니의 특정 부분을 대상으로 해요. 이 선택자들로 다음을 할 수 있어요:

요소 숨기기 또는 스타일 변경
간격, 글꼴, 색상 변경
스토어 브랜딩에 맞게 레이아웃 조정

CSS를 적용하려면 Cart Editor를 열고 Settings로 이동해 Custom CSS 탭을 선택한 뒤 편집기에 스타일을 붙여넣으세요.

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

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

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

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

다음 선택자들은 Upcart 장바구니 모듈의 Version 2에서 작동해요. V2에는 public과 internal 클래스 접두사를 사용하는 체계적인 명명 시스템이 도입됐어요.

V2 선택자에 대한 중요 지침

⚠️ 사용자 지정에는 public 선택자만 사용하세요

Public 선택자(upcart-public- 접두사)는 안정적인 API의 일부이며 커스텀 스타일링에 안전하게 사용할 수 있어요
Internal 선택자(upcart-internal- 접두사)는 내부 용도로 예약되어 있으며 예고 없이 변경될 수 있어요

✅ 권장: 스타일링에 public 클래스 이름을 사용하세요

/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}

❌ 금지: internal 클래스 이름을 재정의하거나 깊은 선택자를 사용하지 마세요

/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}

CSS 선택자

일반 컴포넌트


CSS 선택자	설명
`.upcart-public-skeleton`	장바구니의 일반 스켈레톤 로더 래퍼예요.
`.upcart-public-component__button`	여러 모듈에서 사용되는 일반 버튼 컴포넌트예요.
`.upcart-public-component-loader`	로딩 스피너 컴포넌트예요.
`.upcart-public-component-tag`	태그 컴포넌트 래퍼예요.
`.upcart-public-component-tag__icon`	태그 안의 아이콘이에요.
`.upcart-public-component-tag__text`	태그의 텍스트 콘텐츠예요.
`.upcart-public-component-tag__remove-button`	제거 가능한 태그 안의 제거(“x”) 버튼이에요.
`.upcart-public-component-collapse__dropdown-container`	접을 수 있는 드롭다운 섹션의 컨테이너예요.
`.upcart-public-component-collapse__expand-icon`	펼침/접힘 상태를 나타내는 아이콘이에요.
`.upcart-public-component-carousel__container`	캐러셀의 외부 래퍼예요.
`.upcart-public-component-carousel__window`	슬라이드가 스크롤되는 클리핑 윈도우예요.
`.upcart-public-component-carousel__track`	슬라이드를 담고 움직이는 트랙이에요.
`.upcart-public-component-carousel__slide`	단일 캐러셀 슬라이드예요.
`.upcart-public-component-carousel__button`	이전/다음 화살표 버튼이에요.
`.upcart-public-component-progress-bar`	일반(분할되지 않은) 진행률 바 컴포넌트예요.
`.upcart-public-component-progress-bar__track`	일반 진행률 바의 트랙이에요.
`.upcart-public-component-progress-bar__fill`	일반 진행률 바의 채워진 부분이에요.
`.upcart-public-component-progress-bar__milestone`	일반 진행률 바의 마일스톤 마커예요.
`.upcart-public-component-progress-bar__milestone-icon`	일반 진행률 바 마일스톤의 아이콘이에요.
`.upcart-public-component-progress-bar__milestone-label`	일반 진행률 바 마일스톤의 라벨이에요.

헤더 모듈


CSS 선택자	설명
`.upcart-public-header`	장바구니 헤더의 메인 컨테이너예요.
`.upcart-public-header__logo`	장바구니 헤더의 로고 이미지예요.
`.upcart-public-header__close-button`	카트 드로어를 닫는 데 사용하는 버튼이에요.
`.upcart-public-header__close-button-icon`	닫기 버튼 안에 표시되는 아이콘이에요.

공지 모듈


CSS 선택자	설명
`.upcart-public-announcement`	장바구니 내 배너 또는 공지 섹션이에요.
`.upcart-public-announcement-skeleton`	공지 바의 스켈레톤 로더예요.

메모 모듈


CSS 선택자	설명
`.upcart-public-notes`	메모 섹션의 메인 컨테이너예요.
`.upcart-public-notes__text-container`	메모 텍스트 영역의 컨테이너예요.
`.upcart-public-notes__textarea`	장바구니에 사용자 지정 메모를 추가하는 텍스트 입력 영역이에요.

할인 코드 모듈


CSS 선택자	설명
`.upcart-public-discount-code`	할인 코드 섹션의 메인 컨테이너예요.
`.upcart-public-discount-code__form`	할인 코드 입력의 폼 래퍼예요.
`.upcart-public-discount-code__input-wrapper`	할인 코드 입력 필드의 래퍼예요.
`.upcart-public-discount-code__input`	할인 코드를 입력하는 필드예요.
`.upcart-public-discount-code__suffix`	입력 필드의 접미사 요소예요.
`.upcart-public-discount-code__error`	잘못된 코드에 대한 오류 메시지 표시예요.
`.upcart-public-discount-code__button`	할인 코드를 적용하는 버튼이에요.
`.upcart-public-discount-code__skeleton`	할인 코드 모듈의 스켈레톤 플레이스홀더예요.
`.upcart-public-discount-code__skeleton-input`	할인 코드 입력 필드의 스켈레톤이에요.
`.upcart-public-discount-code__skeleton-button`	할인 코드 적용 버튼의 스켈레톤이에요.

신뢰 배지 모듈


CSS 선택자	설명
`.upcart-public-trust-badges`	신뢰 배지의 컨테이너예요.
`.upcart-public-trust-badges__image`	신뢰 배지에 사용되는 이미지 요소예요.

계층형 리워드 모듈


CSS 선택자	설명
`.upcart-public-rewards`	리워드 섹션의 메인 컨테이너예요.
`.upcart-public-rewards__message`	리워드 관련 진행 메시지를 표시해요.
`.upcart-public-rewards__bar`	리워드 진행률 바의 컨테이너예요.
`.upcart-public-component-segmented-progress-bar`	분할 진행률 바 컴포넌트예요.
`.upcart-public-component-segmented-progress-bar__segments-container`	모든 진행률 바 세그먼트의 컨테이너예요.
`.upcart-public-component-segmented-progress-bar__segment`	진행률 바의 개별 세그먼트예요.
`.upcart-public-component-segmented-progress-bar__segment-fill`	진행률 바 세그먼트의 채워진 부분이에요.
`.upcart-public-component-segmented-progress-bar__milestone`	진행률 바의 마일스톤 마커예요.
`.upcart-public-component-segmented-progress-bar__milestone--bottom`	하단에 배치된 마일스톤이에요.
`.upcart-public-component-segmented-progress-bar__milestone--top`	상단에 배치된 마일스톤이에요.
`.upcart-public-component-segmented-progress-bar__milestone--middle`	중간에 배치된 마일스톤이에요.
`.upcart-public-component-segmented-progress-bar__milestone-icon`	마일스톤에 표시되는 아이콘이에요.
`.upcart-public-component-segmented-progress-bar__milestone-label`	마일스톤의 라벨 텍스트예요.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-right`	오른쪽 정렬 마일스톤 라벨이에요.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-center`	가운데 정렬 마일스톤 라벨이에요.
`.upcart-public-rewards__skeleton`	리워드 섹션의 스켈레톤 컨테이너예요.
`.upcart-public-rewards__skeleton-message`	리워드 진행 메시지의 스켈레톤이에요.
`.upcart-public-rewards__skeleton-bar`	리워드 진행률 바의 스켈레톤이에요.

장바구니 상품 모듈


CSS 선택자	설명
`.upcart-public-cart-items`	장바구니 상품 목록의 메인 래퍼예요.
`.upcart-public-cart-item`	개별 장바구니 상품 래퍼예요.
`.upcart-public-cart-items-skeleton__content`	장바구니 상품의 스켈레톤 로더예요.
`.upcart-public-component-product-tile`	장바구니 내 개별 상품 항목의 래퍼예요.
`.upcart-public-component-product-tile__content`	상품 타일의 콘텐츠 영역이에요.
`.upcart-public-component-product-tile__image-wrapper`	상품 이미지를 감싸는 래퍼예요.
`.upcart-public-component-product-tile__image`	장바구니 내 상품의 이미지예요.
`.upcart-public-component-product-tile__info`	상품 타일의 정보 섹션이에요.
`.upcart-public-component-product-tile__header`	상품 타일의 헤더 섹션이에요.
`.upcart-public-component-product-tile__product-title`	장바구니 내 상품의 이름이에요.
`.upcart-public-component-product-tile__title-link`	상품 제목을 감싸는 링크예요.
`.upcart-public-component-product-tile__remove-button`	장바구니에서 상품을 제거하는 버튼이에요.
`.upcart-public-component-product-tile__variant`	옵션(variant) 정보 표시예요.
`.upcart-public-component-product-tile__properties`	추가 상품 메타데이터의 래퍼예요.
`.upcart-public-component-product-tile__bundle`	번들 정보 섹션이에요.
`.upcart-public-component-product-tile__product-pricing`	상품 타일의 가격 섹션이에요.
`.upcart-public-component-product-tile__price-compare-at`	원래(취소선) 가격이에요.
`.upcart-public-component-product-tile__price`	고객에게 표시되는 최종 가격이에요.
`.upcart-public-component-product-tile__price-group`	가격과 비교 가격을 감싸는 래퍼예요.
`.upcart-public-component-product-tile__savings`	장바구니 항목별 절약 금액이에요.
`.upcart-public-component-product-tile__controls`	컨트롤 섹션(수량 등)이에요.
`.upcart-public-component-product-tile__quantity-selector`	수량 선택기 래퍼예요.
`.upcart-public-component-product-tile__quantity-minus`	수량을 줄이는 버튼이에요.
`.upcart-public-component-product-tile__quantity-plus`	수량을 늘리는 버튼이에요.
`.upcart-public-component-product-tile__discount-codes`	상품에 적용된 할인 코드예요.
`.upcart-public-component-product-tile__subscription-upgrade`	구독 업그레이드 섹션이에요.
`.upcart-public-component-product-tile__subscription-upgrade-btn`	구독 업그레이드를 적용하는 버튼이에요.
`.upcart-public-component-product-tile__select-wrapper`	선택 드롭다운의 래퍼예요.
`.upcart-public-component-product-tile__select`	선택 드롭다운 요소예요.
`.upcart-public-product-properties__subscription`	항목의 구독 세부 정보를 표시해요.
`.upcart-public-product-properties__item`	개별 상품 속성이에요.
`.upcart-public-product-properties__link`	상품 속성 내 링크예요.
`.upcart-public-cart-items__key-value-pair`	상품 속성의 키-값 쌍 표시예요.
`.upcart-public-bundle-properties`	번들 속성의 컨테이너예요.
`.upcart-public-bundle-properties__variant-title`	번들 상품의 옵션 제목이에요.
`.upcart-public-bundle-properties__header`	번들 속성 섹션의 헤더예요.
`.upcart-public-bundle-properties__item-components`	번들 상품 구성 요소의 컨테이너예요.
`.upcart-public-bundle-properties__item-component-row`	각 번들 상품 구성 요소의 행이에요.
`.upcart-public-bundle-properties__image-wrapper`	번들 상품 이미지의 래퍼예요.
`.upcart-public-bundle-properties__content`	번들 상품의 콘텐츠 영역이에요.
`.upcart-public-bundle-properties__product-title`	번들 상품의 상품 제목이에요.

애드온 모듈


CSS 선택자	설명
`.upcart-public-addons`	애드온 섹션의 메인 컨테이너예요.
`.upcart-public-addons__image-wrapper`	애드온 이미지의 래퍼예요.
`.upcart-public-addons__content-wrapper`	애드온 정보의 콘텐츠 래퍼예요.
`.upcart-public-addons__content-title-wrapper`	애드온 제목의 래퍼예요.
`.upcart-public-addons__content-title`	애드온 상품의 제목이에요.
`.upcart-public-addons__content-price`	애드온의 가격 섹션이에요.
`.upcart-public-addons__compare-at-price`	애드온의 원래(취소선) 가격이에요.
`.upcart-public-addons__price`	애드온 상품의 현재 가격이에요.
`.upcart-public-addons__content-description`	애드온 상품의 설명이에요.
`.upcart-public-addons__toggle-wrapper`	애드온 토글의 래퍼예요.
`.upcart-public-addons__toggle`	애드온을 추가/제거하는 토글 스위치예요.
`.upcart-public-addons__toggle-switch`	토글의 스위치 요소예요.
`.upcart-public-addons__toggle-slider`	토글의 슬라이더 요소예요.
`.upcart-public-addons__skeleton`	애드온 섹션의 스켈레톤 플레이스홀더예요.
`.upcart-public-addons__skeleton-image`	애드온 상품 이미지의 스켈레톤이에요.
`.upcart-public-addons__skeleton-text`	애드온 텍스트 콘텐츠의 스켈레톤이에요.

간편 결제 모듈


CSS 선택자	설명
`.upcart-public-express-payments__container`	간편 결제 버튼의 컨테이너예요.

장바구니 요약 모듈


CSS 선택자	설명
`.upcart-public-cart-summary`	장바구니 요약의 메인 컨테이너예요.
`.upcart-public-cart-summary__discount-codes`	요약 내 할인 코드의 컨테이너예요.
`.upcart-public-cart-summary__discount-label`	할인 섹션의 라벨이에요.
`.upcart-public-cart-summary__slide-codes`	할인 코드의 슬라이딩 컨테이너예요.
`.upcart-public-cart-summary__total-discount`	총 할인 금액 표시예요.

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

커스텀 CSS 시작하기: Upcart에서 커스텀 CSS를 안전하게 추가하는 방법을 알아보세요.
Upcart 사용자 지정 소개: 사용자 지정이 어떻게 작동하고 어디서 시작해야 하는지 알아보세요.
AI로 Upcart 커스텀 코드 작성하기: 간단한 프롬프트로 CSS나 JavaScript 작성에 도움을 받으세요.
장바구니 전환율을 높이는 모범 사례: 검증된 팁으로 장바구니 디자인을 최적화하세요.


CSS 선택자	설명
`.upcart-public-upsell`	업셀 모듈의 메인 래퍼예요.
`.upcart-public-upsell__header`	업셀 섹션의 헤더예요.
`.upcart-public-upsell__title`	업셀 섹션의 제목 텍스트예요.
`.upcart-public-upsell__shop-now-button`	업셀 상품의 Shop Now 버튼이에요.
`.upcart-public-upsell__vertical-layout-wrapper`	세로 업셀 레이아웃의 래퍼예요.
`.upcart-public-component-upsell-tile`	각 업셀/추천 상품의 카드 레이아웃이에요.
`.upcart-public-component-upsell-tile__image-container`	업셀 상품 이미지의 컨테이너예요.
`.upcart-public-component-upsell-tile__image`	업셀 상품의 이미지예요.
`.upcart-public-component-upsell-tile__info`	업셀 타일의 정보 섹션이에요.
`.upcart-public-component-upsell-tile__title-link`	상품 제목의 링크 래퍼예요.
`.upcart-public-component-upsell-tile__title`	업셀 상품의 제목이에요.
`.upcart-public-component-upsell-tile__rating-row`	상품 평점이 포함된 행이에요.
`.upcart-public-component-upsell-tile__stars`	별점 표시예요.
`.upcart-public-component-upsell-tile__star--partial`	소수점 평점을 위한 부분 별이에요.
`.upcart-public-component-upsell-tile__reviews`	리뷰 수 표시예요.
`.upcart-public-component-upsell-tile__price-row`	가격 정보가 포함된 행이에요.
`.upcart-public-component-upsell-tile__price-compare-at`	업셀의 원래(취소선) 가격이에요.
`.upcart-public-component-upsell-tile__price`	업셀 상품의 현재 가격이에요.
`.upcart-public-component-upsell-tile__variant-row`	옵션(variant) 선택이 포함된 행이에요.
`.upcart-public-upsell__skeleton`	업셀 모듈의 스켈레톤 플레이스홀더예요.
`.upcart-public-upsell__skeleton-title`	업셀 섹션 제목의 스켈레톤이에요.
`.upcart-public-upsell__skeleton-image`	업셀 상품 이미지의 스켈레톤이에요.
`.upcart-public-upsell__skeleton-product-title`	업셀 상품 제목의 스켈레톤이에요.
`.upcart-public-upsell__skeleton-product-price`	업셀 상품 가격의 스켈레톤이에요.

장바구니 기능 참조

CSS 참조

스타일링 레시피

기능 레시피

사용자 지정 템플릿

Upcart 공개 API

Upcart CSS 선택자 라이브러리 (V2)

개요

참고

Upcart CSS 선택자 사용 방법

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

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

V2 선택자에 대한 중요 지침

CSS 선택자

일반 컴포넌트

헤더 모듈

공지 모듈

추천 및 업셀 모듈

메모 모듈

할인 코드 모듈

신뢰 배지 모듈

계층형 리워드 모듈

장바구니 상품 모듈

애드온 모듈

간편 결제 모듈

장바구니 요약 모듈

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

​개요

​참고

​

​Upcart CSS 선택자 사용 방법

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

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

​V2 선택자에 대한 중요 지침

​

​CSS 선택자

​일반 컴포넌트

​

​헤더 모듈

​공지 모듈

​추천 및 업셀 모듈

​메모 모듈

​할인 코드 모듈

​신뢰 배지 모듈

​계층형 리워드 모듈

​장바구니 상품 모듈

​애드온 모듈

​간편 결제 모듈

​장바구니 요약 모듈

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

​

​

개요

참고

Upcart CSS 선택자 사용 방법

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

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

V2 선택자에 대한 중요 지침

CSS 선택자

일반 컴포넌트

헤더 모듈

공지 모듈

추천 및 업셀 모듈

메모 모듈

할인 코드 모듈

신뢰 배지 모듈

계층형 리워드 모듈

장바구니 상품 모듈

애드온 모듈

간편 결제 모듈

장바구니 요약 모듈

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