# 商品ページのボタンと文字かカラー指定 **URL:** \ **Category:** 総合的なディスカッション\ **Created:** [May 29, 2024, 4:06am UTC](https://community.shopify.com/t/topic/326966 "2024-05-29T04:06:32Z")\ **Posts on this page:** 2\ **Page:** 1 ## AI-generated summary STUDIOテーマの商品ページで、バリエーションピッカーと数量セレクターの色指定方法について質問が投稿されました。 **希望する変更内容：** - バリエーションピッカー：文字色（「WHITE」など）とボタン色（赤ボタン）の指定 - 数量セレクター：文字色（「- 1 +」）とボタン色（黒ボタン）の指定 **回答内容：** Shopify標準の**カラースキーム機能**を使った設定方法が案内されました。ただし、この機能では要素ごとの細かい色指定はできず、デザインの統一性を保つため連動した配色設定になることが説明されています。 **設定手順：** 1. テーマエディターで商品テンプレートを開く 2. 商品情報セクションで現在の配色設定を確認 3. カラースキームを編集または変更 4. テストストアで各要素への反映を確認 より柔軟な配色指定にはCSSやLiquidを使ったコード編集が必要で、その点については他の回答者からの情報待ちとなっています。
**Author:** ![PEPSI-KUN](https://avatars.discourse-cdn.com/v4/letter/p/a4c791/32.png) [@PEPSI-KUN](https://community.shopify.com/u/PEPSI-KUN)\ **Post date:** [May 29, 2024, 4:06am UTC](https://community.shopify.com/t/topic/326966/1 "2024-05-29T04:06:32Z")
テーマはSTUDIOの商品ページの①バリエーションピッカー、②数量セレクターの色指定をしたいのですが苦戦しております。 ①バリエーションピッカー ■文字カラーの指定（添付画像のWHITE） ■ボタンカラーの指定（添付画像の赤ボタン） ②数量セレクター ■文字カラーの指定（添付画像の - 1 +） ■ボタンカラーの指定（添付画像の黒ボタン） ![スクリーンショット 2024-05-29 9.53.30.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/0/4/5/045c0d4f57a6b8a0477801dea439cc2935d04dbe.png) ![スクリーンショット 2024-05-29 9.58.59.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/c/0/b/c0bd744c50b1b526d5c2a6388664d3da170501e6.png) ---
**Author:** ![Minami\_2](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@Minami\_2](https://community.shopify.com/u/Minami_2)\ **Post date:** [June 5, 2024, 1:15pm UTC](https://community.shopify.com/t/topic/326966/2 "2024-06-05T13:15:31Z")
@PEPSI-KUN 様 ご質問ありがとうございます。 弊社標準機能で可能な配色設定に限ってご案内いたします。CSSやLiquidを用いたコード編集によるフレキシブルな配色指定については他の方の回答をお待ちください。 弊社標準の[**カラースキーム機能**](https://help.shopify.com/ja/manual/online-store/themes/theme-structure/color-scheme)で、ご希望の配色設定が可能かご確認ください。弊社のカラースキームは、ストアデザインの統一性を保つため要素ごとに細かく指定はできず、要素によって連動した配色設定となりますことご承知おきください。 まず、現在どのようなカラー設定になっているかを確認します。 1. テーマエディターより商品テンプレートを開き、 **商品情報** セクションを選択します。 2. **商品情報** セクションの **配色** で、どのカラースキームが設定されているか確認します。 3. スキーム自体のカラー設定を変更する場合は **編集** 、カラースキーム自体を変更する場合は **変更** をクリックしてカラースキームを指定します。 4. 各項目をクリックし、ご希望の配色設定に変更します。 5. 編集が完了したら保存します。 参考として、弊社テストストアでわかりやすい色を使って配色設定を変更してみましたので、どの配色がどの要素に反映されているかご確認ください。 ![05-07-k8zcg-nedd2.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/c/5c335aff2afb9df68c132c74a4c6962c52bc6af2.png) 弊社カラースキーム機能の配色設定についてさらなるご質問がある場合は、[弊社サポートページ](https://help.shopify.com/ja/questions#/login)よりログインの上お問い合わせください。