# 商品ページのバリエーション選択ボタンの色を変更したい（Dawn）

**URL:** <https://community.shopify.com/t/dawn/108996>\
**Category:** 技術的なQ＆A\
**Created:** [March 24, 2022, 5:39am UTC](https://community.shopify.com/t/dawn/108996 "2022-03-24T05:39:14Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマの商品ページで、バリエーション選択ボタン（ラジオボタン）の色を変更する方法が共有された。モノクロ表示から任意の色へ変更したいという相談。 
- 解決策はCSSの追記。セレクタは「.product-form__input input[type=radio]+label」「:checked+label」「+label:hover」を用い、通常・選択中・ホバー時の背景色、枠線色、文字色を指定する。例として通常時は#ffffff（背景）と#aeaeae（枠・文字）、選択時は枠・文字に#000000、ホバー時は枠線を#000000に設定。 
- 実装は独自CSSがない場合、main-product.liquidに直接CSSを記述する方法が提示され、添付画像で配置箇所と仕上がり例が示された。コードスニペットと画像が理解に重要。 
- 色指定の参考サイトリンクが紹介。 
- 投稿者はmain-productに追記して色変更に成功と報告。問題は解決済みで、未解決の論点はなし。

<div class="post-metadata">

**Author:** ![ff\_dog](https://avatars.discourse-cdn.com/v4/letter/f/e95f7d/32.png) [@ff\_dog](https://community.shopify.com/u/ff_dog)\
**Post date:** [March 24, 2022, 5:39am UTC](https://community.shopify.com/t/dawn/108996/1 "2022-03-24T05:39:14Z")

</div>

はじめまして、Ff\_dogと申します。

Dawnテーマのデフォルト商品ページを使用しています。

現在、バリエーション選択ボタンがモノクロ表示となっていますが、この部分の色は変更可能でしょうか？

コードについての知識が乏しいため、ご教授いただければと思い投稿させていただきました。

何卒よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [March 29, 2022, 9:44am UTC](https://community.shopify.com/t/dawn/108996/2 "2022-03-29T09:44:28Z")

</div>

Dawnテーマにおける、バリエーション選択ボタンの色の変更でしたら、  
以下のcssコードを追加することで対応可能です。

```markup
/*バリエーションボタンの背景色、線の色、文字色の変更*/
.product-form__input input[type=radio]+label{
background-color: #ffffff; ⇦背景色
border-color: #aeaeae; ⇦線の色
color: #aeaeae; ⇦文字色
}

/*選択中のバリエーションボタンの背景色、線の色、文字色の変更 */
.product-form__input input[type=radio]:checked+label {
background-color: #ffffff; ⇦背景色
border-color: #000000; ⇦線の色
color: #000000; ⇦文字色
}

/*バリエーションボタンをホバーした時の線の色の変更*/
.product-form__input input[type=radio]+label:hover {
border-color: #000000; ⇦線の色
}

```

cssファイルを作成していないようでしたら、main-product.liquid内に添付のように記入していただけると変更が可能です。

 ![スクリーンショット 0004-03-29 18.36.00.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/8/a88624eac1f540245f1db7ac8f4d28d4ba1b6fdd.png)

ちなみに上記のコードだと、デザインとしては以下のような表示となります。

 ![スクリーンショット 0004-03-29 18.35.40.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/c/c/9ccc3e975775cbc5760408f5ff6537581c5ec7fc.png)

色の指定方法がわからないようでしたら、以下のサイトが役に立つかと思いますので、参考にしてみてください。  
[https://www.sejuku.net/blog/57425](https://www.sejuku.net/blog/57425)

---

<div class="post-metadata">

**Author:** ![ff\_dog](https://avatars.discourse-cdn.com/v4/letter/f/e95f7d/32.png) [@ff\_dog](https://community.shopify.com/u/ff_dog)\
**Post date:** [April 11, 2022, 9:28am UTC](https://community.shopify.com/t/dawn/108996/3 "2022-04-11T09:28:30Z")

</div>

Fullbalance様

お世話になっております。

こちらの質問に、ご回答をいただいておりましたにもかかわらず、お礼が遅くなり申し訳ございません。

main-productのリキッドに添付の通り記載しましたら、無事に色の変更を行うことが出来そうです！

商品説明文のフォントサイズ変更に続き、大変参考になりました。

ありがとうございました。