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

# アップセルのバリエーションセレクターの色を変更する

> アップセルセクションのバリエーションセレクターの背景色とテキスト色をカスタマイズします。

<div id="overview">
  # 概要
</div>

Upcartでは、シンプルなカスタムCSSを使って、アップセルのバリエーションセレクターに使用される色を変更できます。これは、カートの外観をブランドに合わせ、商品選択時の顧客体験を向上させる手軽な方法です。

このカスタマイズは、基本的な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`）
* 16進コード（例: `#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)