> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> 이 문서는 Upcart Version 1에서 사용할 수 있는 CSS 선택자를 정리해, 레거시 카트 드로어에 사용자 지정 스타일을 적용할 수 있도록 도와드려요.

📝 **참고**

V1 선택자는 레거시 카트 드로어 모듈을 대상으로 해요. V2로 업그레이드했다면 이 페이지의 모듈 선택자는 더 이상 일치하지 않아요 — 최신 선택자는 [V2 CSS 선택자 라이브러리](/ko/upcart/upcart_css_selector_library_v2)를 참고하세요.

알아 둘 만한 두 가지 예외가 있어요: `.upcart-cart`와 `.upcart-cart-body`는 모듈이 아니라 드로어 셸에 있으므로 V2에서도 계속 적용돼요. 드로어 전체를 대상으로 하는 레이아웃 수정(너비 제한, 가로 오버플로 방지)은 업그레이드 후에도 계속 작동해요.

<div id="overview">
  # 개요
</div>

가격 숨기기, 텍스트 크기 조정, 버튼 위치 변경처럼 장바구니의 모양을 바꾸고 싶다면 여기에서 시작하세요. 이 CSS 선택자 라이브러리는 나만의 커스텀 코드로 이런 변경을 할 때 필요한 도구를 제공해요.

이 문서에는 사용 가능한 모든 CSS 선택자가 그룹으로 정리되어 있으며, 스타일 작성과 테스트에 도움이 되는 리소스 링크도 함께 제공해요.

<div id="note">
  ## **참고**
</div>

이 라이브러리는 편의를 위해 제공하지만, Upcart 지원팀은 **커스텀 코드 작성이나 수정을 도와드릴 수 없어요.** 이는 저희 [사용자 지정 정책](/ko/upcart/upcart_customization_policy)의 일부예요.

커스텀 코드 솔루션은 Shopify 전문가와 상담하는 것을 권장해요.

[Shopify 전문가 보기](https://www.shopify.com/ca/partners/directory)

<div id="how-to-use-upcart-css-selectors">
  # Upcart CSS 선택자 사용 방법
</div>

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

이 선택자들로 다음을 할 수 있어요:

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

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

<div id="what-to-know-before-adding-css">
  # CSS를 추가하기 전에 알아 둘 것
</div>

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

<div id="css-customization-checklist">
  ## CSS 사용자 지정 체크리스트:
</div>

* **안전한 환경에서 테스트하세요:** 가능하면 게시 전에 미리보기나 게시되지 않은 테마를 사용하세요.

* **작게 시작하세요:** 한 번에 하나씩 변경해야 무엇이 효과가 있었는지 추적하기 쉬워요.

* **올바른 위치에 스타일을 붙여넣으세요:** **Upcart Editor > Settings > Custom CSS** 필드에 코드를 추가하세요.

* **검사 도구를 사용하세요:** 브라우저에서 요소를 마우스 오른쪽 버튼으로 클릭하고 \*\*검사(Inspect)\*\*를 선택해 선택자를 실시간으로 찾고 테스트하세요.

* **추측하지 마세요:** 모든 요소가 모든 장바구니에 표시되는 것은 아니에요 — 다양한 장바구니(리워드/업셀 유무 등)로 테스트하세요.

<div id="css-selectors-library">
  # CSS 선택자 라이브러리
</div>

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

<div id="general-settings">
  ## 일반 설정
</div>

<div id="design-module">
  ### 디자인 모듈
</div>

|                     |                          |
| ------------------- | ------------------------ |
| **CSS 선택자**         | **설명**                   |
| `.upcart-cart`      | 카트 드로어의 메인 컨테이너예요.       |
| `.upcart-cart-body` | 장바구니의 주요 콘텐츠를 담고 있어요.    |
| `.upcart-backdrop`  | 장바구니 뒤에 표시되는 어두운 오버레이예요. |

<div id="header-module">
  ### 헤더 모듈
</div>

|                                    |                                 |
| ---------------------------------- | ------------------------------- |
| **CSS 선택자**                        | **설명**                          |
| `.upcart-header`                   | 로고와 닫기 버튼을 포함한 장바구니 헤더의 컨테이너예요. |
| `.upcart-header-close-button`      | 카트 드로어를 닫는 데 사용하는 버튼이에요.        |
| `.upcart-header-close-button-icon` | 닫기 버튼 안에 표시되는 아이콘이에요.           |
| `.upcart-header-logo`              | 장바구니 헤더에 로고 이미지를 표시해요.          |
| `.upcart-header-text`              | 장바구니 헤더에 표시되는 제목 텍스트예요.         |

<div id="body-settings">
  ## 본문 설정
</div>

<div id="announcements-module">
  ### 공지 모듈
</div>

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

<div id="rewards-module">
  ### 리워드 모듈
</div>

|                                    |                        |
| ---------------------------------- | ---------------------- |
| **CSS 선택자**                        | **설명**                 |
| `.upcart-rewards`                  | 리워드 섹션의 메인 컨테이너예요.     |
| `.upcart-rewards-message`          | 리워드 관련 진행 메시지를 표시해요.   |
| `.upcart-rewards-bar-background`   | 리워드 진행률 바의 배경 레이어예요.   |
| `.upcart-rewards-bar-foreground`   | 리워드 바의 전경/진행률 채움이에요.   |
| `.upcart-rewards-tier`             | 리워드 시스템의 특정 단계를 나타내요.  |
| `.upcart-rewards-tier-circle`      | 리워드 단계의 시각적 원형 표시예요.   |
| `.upcart-rewards-tier-icon`        | 리워드 단계 원 안의 아이콘이에요.    |
| `.upcart-rewards-tier-description` | 각 리워드 단계 아래의 설명 텍스트예요. |
| `.upcart-rewards-skeleton`         | 리워드 섹션의 스켈레톤 컨테이너예요.   |
| `.upcart-rewards-message-skeleton` | 리워드 진행 메시지의 스켈레톤이에요.   |
| `.upcart-rewards-bar-skeleton`     | 리워드 진행률 바의 스켈레톤이에요.    |

<div id="recommendations-module">
  ### 추천 모듈
</div>

|                                           |                              |
| ----------------------------------------- | ---------------------------- |
| **CSS 선택자**                               | **설명**                       |
| `.upcart-recommendation-module`           | 상품 추천 모듈 전체의 래퍼예요.           |
| `.upcart-recommendations-title`           | 추천 섹션의 제목 텍스트예요.             |
| `.upcart-recommendations-shop-now-button` | 장바구니에서 추천 상품을 바로 구매하는 버튼이에요. |

<div id="subscription-upgrades-module">
  ### 구독 업그레이드 모듈
</div>

|                                         |                                   |
| --------------------------------------- | --------------------------------- |
| **CSS 선택자**                             | **설명**                            |
| `.upcart-subscription-upgrade-section`  | 장바구니에서 구독 업그레이드를 홍보하는 섹션이에요.      |
| `.upcart-subscription-upgrade-button`   | 구독 업그레이드를 실행하는 데 사용하는 버튼이에요.      |
| `.upcart-subscription-upgrade-dropdown` | 사용 가능한 구독 업그레이드 옵션을 선택하는 드롭다운이에요. |

<div id="upsells-module">
  ### 업셀 모듈
</div>

|                                        |                             |
| -------------------------------------- | --------------------------- |
| **CSS 선택자**                            | **설명**                      |
| `.upcart-upsells`                      | 업셀 섹션의 메인 컨테이너예요.           |
| `.upcart-upsells-module`               | 업셀 모듈의 래퍼예요.                |
| `.upcart-upsells-title`                | 업셀 섹션의 제목이에요.               |
| `.upcart-upsells-button`               | 업셀 상품을 장바구니에 담는 버튼이에요.      |
| `.upcart-upsell-item-card`             | 각 업셀 상품의 카드 레이아웃이에요.        |
| `.upcart-upsell-item-title`            | 업셀 상품의 제목이에요.               |
| `.upcart-upsell-item-image-wrapper`    | 업셀 상품 이미지를 감싸는 래퍼예요.        |
| `.upcart-upsell-item-image`            | 업셀 상품의 이미지예요.               |
| `.upcart-upsell-item-price`            | 업셀 상품의 가격이에요.               |
| `.upcart-upsell-item-price-row`        | 가격과 비교 가격이 포함된 행이에요.        |
| `.upcart-upsell-item-compare-price`    | 업셀 상품의 원래(취소선) 가격이에요.       |
| `.upcart-upsell-item-variant-selector` | 업셀 상품의 옵션(variant) 드롭다운이에요. |

<div id="product-settings">
  ### 상품 설정
</div>

|                                      |                           |
| ------------------------------------ | ------------------------- |
| **CSS 선택자**                          | **설명**                    |
| `.upcart-products-section`           | 장바구니 내 모든 상품의 컨테이너예요.     |
| `.upcart-product-item`               | 개별 상품 항목의 래퍼예요.           |
| `.upcart-product-title`              | 장바구니 내 상품 이름이에요.          |
| `.upcart-product-title-link`         | 상품 제목을 감싸는 링크예요.          |
| `.upcart-item-prices-row`            | 가격 정보가 포함된 행이에요.          |
| `.upcart-item-price`                 | 고객에게 표시되는 최종 가격이에요.       |
| `.upcart-item-compare-price`         | 원래(취소선) 가격이에요.            |
| `.upcart-product-savings`            | 장바구니 항목별 절약 금액이에요.        |
| `.upcart-item-option`                | 사이즈, 색상 같은 상품 옵션의 컨테이너예요. |
| `.upcart-item-option-category`       | 상품 옵션 카테고리의 라벨이에요.        |
| `.upcart-item-option-value`          | 선택한 상품 옵션의 값이에요.          |
| `.upcart-item-properties`            | 추가 상품 메타데이터의 래퍼예요.        |
| `.upcart-item-property`              | 개별 상품 속성이에요.              |
| `.upcart-item-property-subscription` | 항목의 구독 세부 정보를 표시해요.       |
| `.upcart-product-quantity-input`     | 상품의 수량 입력 필드예요.           |
| `.upcart-product-quantity-minus`     | 수량을 줄이는 버튼이에요.            |
| `.upcart-product-quantity-plus`      | 수량을 늘리는 버튼이에요.            |
| `.upcart-product-image-wrapper`      | 상품 이미지를 감싸는 래퍼예요.         |
| `.upcart-quantity-warning`           | 수량 제한 메시지의 컨테이너예요.        |
| `.upcart-quantity-warning-text`      | 사용자에게 표시되는 수량 경고 텍스트예요.   |

<div id="footer-settings">
  ## 푸터 설정
</div>

<div id="add-ons-module">
  ### 애드온 모듈
</div>

|                                      |                        |
| ------------------------------------ | ---------------------- |
| **CSS 선택자**                          | **설명**                 |
| `.upcart-addons`                     | 애드온 섹션의 메인 컨테이너예요.     |
| `.upcart-addons-title`               | 애드온 섹션의 제목이에요.         |
| `.upcart-addons-product-description` | 애드온 상품의 설명이에요.         |
| `.upcart-addons-price`               | 애드온 상품의 가격이에요.         |
| `.upcart-addons-compare-price`       | 애드온의 원래(취소선) 가격이에요.    |
| `.upcart-addons-toggle`              | 애드온을 추가/제거하는 토글 스위치예요. |
| `.upcart-addons-image-wrapper`       | 애드온 이미지의 래퍼예요.         |

<div id="discount-codes-module">
  ### 할인 코드 모듈
</div>

<div id="savings-row">
  ### 절약 금액 행
</div>

|                                  |                                    |
| -------------------------------- | ---------------------------------- |
| **CSS 선택자**                      | **설명**                             |
| `.upcart-savings-row`            | 장바구니의 할인/절약 섹션 전체의 래퍼예요.           |
| `.styles_Footer__savingsCodes__` | 라벨("Discounts")과 관련 할인 코드의 컨테이너예요. |
| `.upcart-discount-code-badge`    | UI에 표시되는 각 할인 코드 배지의 래퍼예요.         |
| `.upcart-discount-code-icon`     | 할인 아이콘(예: SVG 티켓 심볼)의 컨테이너예요.      |
| `.upcart-discount-code-text`     | 할인 코드의 텍스트 표현이에요(예: "AUTO 5").     |
| `.upcart-savings-amount`         | 할인으로 실제 절약한 금액을 표시해요.              |

<div id="express-payments-module">
  ### 간편 결제 모듈
</div>

<div id="note-2">
  ## 참고
</div>

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

|                                         |                      |
| --------------------------------------- | -------------------- |
| **CSS 선택자**                             | **설명**               |
| `.upcart-express-pay-buttons-container` | 모든 간편 결제 버튼의 컨테이너예요. |
| `.upcart-express-pay-buttons-row`       | 간편 결제 버튼의 행 레이아웃이에요. |
| `.upcart-express-pay-button`            | 간편 결제 버튼의 일반 선택자예요.  |
| `.upcart-express-pay-button-shop-pay`   | Shop Pay 전용 버튼이에요.   |
| `.upcart-express-pay-button-google-pay` | Google Pay 전용 버튼이에요. |
| `.upcart-express-pay-button-paypal`     | PayPal 전용 버튼이에요.     |
| `.upcart-express-pay-button-apple-pay`  | Apple Pay 전용 버튼이에요.  |
| `.upcart-express-pay-button-amazon-pay` | Amazon Pay 전용 버튼이에요. |
| `.upcart-express-pay-button-meta-pay`   | Meta Pay 전용 버튼이에요.   |

<div id="trust-badges-module">
  ### 신뢰 배지 모듈
</div>

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

<div id="additional-notes-module">
  ### 추가 메모 모듈
</div>

|                                                   |                                 |
| ------------------------------------------------- | ------------------------------- |
| **CSS 선택자**                                       | **설명**                          |
| `.NotesModule_NotesModule__`                      | 추가 메모의 컨테이너예요.                  |
| `.NotesModule_NotesModule__titleContainer__`      | 메모 섹션의 제목 컨테이너예요                |
| `.NotesModule_NotesModule__dropdownContainer__`   | 메모 섹션 드롭다운의 제목이에요               |
| `.NotesModule_NotesModule__textModule__ textarea` | 장바구니에 사용자 지정 메모를 추가하는 입력 영역이에요. |

<div id="upcart-settings-module">
  ## Upcart 설정 모듈
</div>

<div id="skeleton-selectors">
  ### 스켈레톤 선택자
</div>

|                                                  |                        |
| ------------------------------------------------ | ---------------------- |
| **CSS 선택자**                                      | **설명**                 |
| `.upcart-skeleton`                               | 장바구니의 일반 스켈레톤 로더 래퍼예요. |
| `.upcart-product-item-skeleton`                  | 상품이 로드되는 동안의 플레이스홀더예요. |
| `.upcart-product-image-skeleton`                 | 상품 이미지의 플레이스홀더예요.      |
| `.upcart-product-title-skeleton`                 | 상품 제목 텍스트의 플레이스홀더예요.   |
| `.upcart-product-price-container-skeleton`       | 가격 영역의 플레이스홀더예요.       |
| `.upcart-product-quantity-skeleton`              | 수량 컨트롤의 플레이스홀더예요.      |
| `.upcart-item-option-skeleton`                   | 상품 옵션의 플레이스홀더예요.       |
| `.upcart-upsells-module-skeleton`                | 업셀 모듈의 스켈레톤이에요.        |
| `.upcart-upsells-title-skeleton`                 | 업셀 섹션 제목의 스켈레톤이에요.     |
| `.upcart-upsell-item-image-skeleton`             | 업셀 상품 이미지의 스켈레톤이에요.    |
| `.upcart-upsell-item-title-skeleton`             | 업셀 상품 제목의 스켈레톤이에요.     |
| `.upcart-upsell-item-price-skeleton`             | 업셀 상품 가격의 스켈레톤이에요.     |
| `.upcart-upsells-button-skeleton`                | 업셀 액션 버튼의 스켈레톤이에요.     |
| `.upcart-trust-badge-skeleton`                   | 신뢰 배지 컨테이너의 스켈레톤이에요.   |
| `.upcart-trust-badge-image-skeleton`             | 신뢰 배지 이미지의 스켈레톤이에요.    |
| `.upcart-announcement-skeleton`                  | 공지의 스켈레톤 플레이스홀더예요.     |
| `.upcart-rewards-skeleton`                       | 리워드 섹션의 스켈레톤이에요.       |
| `.upcart-rewards-message-skeleton`               | 리워드 메시지의 스켈레톤이에요.      |
| `.upcart-rewards-bar-skeleton`                   | 리워드 진행률 바의 스켈레톤이에요.    |
| `.upcart-addons-skeleton`                        | 애드온 섹션의 스켈레톤이에요.       |
| `.upcart-addons-image-wrapper-skeleton`          | 애드온 상품 이미지의 스켈레톤이에요.   |
| `.upcart-addons-skeleton-text-container`         | 애드온 텍스트 콘텐츠의 스켈레톤이에요.  |
| `.upcart-discount-code-module-skeleton`          | 할인 코드 모듈의 스켈레톤이에요.     |
| `.upcart-discount-code-input-skeleton`           | 할인 코드 입력 필드의 스켈레톤이에요.  |
| `.upcart-discount-code-button-skeleton`          | 할인 코드 적용 버튼의 스켈레톤이에요.  |
| `.upcart-checkout-button-container-skeleton`     | 결제 버튼 래퍼의 스켈레톤이에요.     |
| `.upcart-checkout-button-skeleton`               | 결제 버튼의 스켈레톤이에요.        |
| `.upcart-express-pay-buttons-container-skeleton` | 간편 결제 컨테이너의 스켈레톤이에요.   |
| `.upcart-express-pay-button-skeleton`            | 개별 간편 결제 버튼의 스켈레톤이에요.  |

<div id="helpful-resources-to-get-started">
  ## **시작하는 데 도움이 되는 자료:**
</div>

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