> ## 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.

# 업셀 옵션 선택기 색상 변경하기

> 업셀 섹션의 옵션(variant) 선택기의 배경과 텍스트 색상을 커스터마이징하세요.

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

Upcart에서는 간단한 커스텀 CSS로 업셀 옵션(variant) 선택기에 사용되는 색상을 변경할 수 있어요. 카트의 모양을 브랜드에 맞추고 상품 선택 중 고객 경험을 개선하는 빠른 방법이에요.

이 커스터마이징은 기본적인 CSS 지식이 있는 스토어 운영자나 개발자에게 이상적이에요.

***

<div id="where-to-find-the-custom-css-editor">
  ## 커스텀 CSS 편집기 위치
</div>

1. **Upcart > Cart Editor > Settings > Custom CSS**로 이동하세요
2. 입력 영역까지 스크롤하고 CSS 코드를 붙여넣으세요
3. **Save**를 클릭하세요
4. 스토어프론트를 새로고침해 변경 사항을 실시간으로 미리 보세요

***

<div id="example-css-for-variant-selector-styling-in-v10">
  ## V1.0의 옵션 선택기 스타일링 CSS 예시
</div>

```
.upcart-upsell-item-variant-selector {     
  color: white !important;  
  background-color: #008060 !important;   
}
```

<div id="example-css-for-variant-selector-styling-in-v20">
  ## V2.0의 옵션 선택기 스타일링 CSS 예시
</div>

```
.upcart-public-component-upsell-tile__variant-row select {  
  color: white;     
  background-color: #008060;   
}
```

***

<div id="how-to-customize">
  ## 커스터마이징 방법
</div>

* **color**: 텍스트 색상을 설정해요
* **background-color**: 옵션 선택기 상자의 배경을 설정해요

다음과 같은 다양한 유형의 값을 사용할 수 있어요:

* 색상 이름 (예: `black`, `white`, `red`)
* 헥스 코드 (예: `#000000`)
* RGB 값 (예: `rgb(255, 0, 0)`)

**예시:**

```
.upcart-public-component-upsell-tile__variant-row select {     
  color: #000000 !important;     
  background-color: #f3f4f6 !important;   
}
```

이를 통해 스토어 디자인에 자연스럽게 어우러지거나 시선을 끌도록 돋보이는 옵션 선택기 스타일을 만들 수 있어요.

***

<div id="still-need-help">
  ## 여전히 도움이 필요하신가요?
</div>

추가 커스터마이징에는 **Shopify Expert**와 협업하시길 권장해요. 카트 드로어에 HTML, CSS, JavaScript를 추가하는 데 도움을 줄 수 있어요.

[Shopify Experts 보기](https://www.shopify.com/partners/directory)