# 商品ページにカラーピッカーを設置してユーザーが色を選べるようにしたい **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [June 10, 2022, 10:56am UTC](https://community.shopify.com/t/topic/127339 "2022-06-10T10:56:49Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary 商品ページにカラーピッカーを設置し、選択した色のカラーコードをカートへ渡す方法の可否と実装案を相談。添付画像あり（参考イメージ）。 提案・選択肢: - ブラウザ標準の入力要素（inputのtype="color"）で実現可能。参照リンク（MDN、解説記事）が提示。 - より高機能なUIが必要ならJavaScriptライブラリの利用を検討。 - 実装にはHTML・Liquid（テンプレート言語）・JavaScriptの編集が必要。難しければ学習または専門家へ依頼を推奨。 現状・アクション: - 質問者は提示資料をもとに試行する方針。 - 具体的なカートへのカラーコード受け渡し方法の詳細は未共有。 結末・ステータス: - 解決は未確定。検証・実装結果の報告待ちで議論は継続中。
**Author:** ![tatsu](https://avatars.discourse-cdn.com/v4/letter/t/22d042/32.png) [@tatsu](https://community.shopify.com/u/tatsu)\ **Post date:** [June 10, 2022, 10:56am UTC](https://community.shopify.com/t/topic/127339/1 "2022-06-10T10:56:49Z")
お世話になっております。 ![スクリーンショット 2022-06-10 19.51.14.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/b/0b4bfb4fd9013a4f57c609c61bf808d931a53d5b.jpeg) 商品ページに上記画像のようなカラーパレットを設置し、 ・お客様に色を選んでいただく。 ・カートに追加すると選んだ色のカラーコードの情報がカートに渡される といった実装は可能でしょうか？ 色々と調べたのですが、あまり該当する情報が見つからず途方にくれております。 お力を貸していただけると幸いです。 どうぞよろしくお願いいたします。 ---
**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\ **Post date:** [June 13, 2022, 8:21am UTC](https://community.shopify.com/t/topic/127339/2 "2022-06-13T08:21:41Z")
ブラウザごとに実装されている機能を用いるのであれば以下あたりを参考に type=“color” を使うことで実現できると思います。 [https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color) [https://note.com/tech\_malin/n/nc25382597fa7](https://note.com/tech_malin/n/nc25382597fa7) より高機能な方が良い場合はGoogleなどでJavaScriptのライブラリを調べれば概ね対応できるのではと思います。 以上ですがHTMLやliquidやJSの読み書きができない場合は、学ばれるかエキスパートやパートナーに依頼されることをお勧めします。 ---
**Author:** ![tatsu](https://avatars.discourse-cdn.com/v4/letter/t/22d042/32.png) [@tatsu](https://community.shopify.com/u/tatsu)\ **Post date:** [June 16, 2022, 6:40am UTC](https://community.shopify.com/t/topic/127339/3 "2022-06-16T06:40:32Z")
回答いただきありがとうございます！ いただいた参考記事をもとに一度試してみます！