カラーミーショップの商品ページ編集で、ある意味一番厄介なのが商品オプションかも知れません。
商品オプションのデータは、商品情報とは別のデータベースに含まれておりそれ自体は別に珍しくもないのですが、さらにそのオプションデータ自身（オプションIDや組み合わせによる在庫や価格情報など）を全部まとめて取り出すことのできる変数（配列）が用意されていません。
商材などによって望まれるオプション表示の形も様々ですが、独自に実装する場合は複数の変数などを駆使して実装していくことになります。
オプションに関係してくる独自タグ（変数）
カラーミーショップのテンプレートで使用できる変数のうち、オプションに関係してくる変数には以下のようなものがあります。
| 変数名(すべて配列) | 出力内容 |
|---|---|
| $option | ID、オプション名（選択肢名ではない）、name属性値 |
| $option_value | [0] にオプション１の詳細情報（ID,オプション名、選択肢ごとのIDと名前） [1]にオプション２の（以下同文） |
| $option_view_data or $option_tree | オプション２がある場合オプション２をキーとした全組み合わせが出力。ない場合は、オプション１がすべて出力される。 組み合わせごとの在庫や価格情報などが取得できる。IDは取得できない。 |
| $option_price | オプション価格の最小値、最大値（通常、会員ごとの出力も可） |
人気ショップで採用されているオプション表示はラジオボタン
オプションの表示カスタマイズを考えるオーナー様の目的はほぼ共通して「お客様が見やすい / 分かりやすい」見た目にすることだと思います。
お客様の選びやすさは購入しやすさにつながり、ひいては売上につながります。
表示形式に標準で用意されているのは「プルダウン式」か「テーブル式」ですが、縦長のモバイル端末がメインとなっている現在で、横に長くなってしまうテーブル形式を選択するメリットは無いでしょう。
となるとプルダウン式か？ となりますが、オプションごとのプルダウン表示だと、選択候補を確認するたびにプルダウンを開かないといけなくなりますので、お客様にとって二度手間、三度手間になりがちです。
そういう経緯もあってか、おのずとラジオボタン型のオプションが最人気です。（下のような）
See the Pen Untitled by Takashi Abe (@TakeshiAbe) on CodePen.
選択状況に応じて表示を切り替える
個々の選択肢をボタン表示させておくことで、選択状況に応じた画面の変更も見やすくなります。
例１ ： 仮にSサイズはBlackしか在庫が残っていないとしたとき、サイズ「S」を選択すると、カラーはBlack以外の選択肢に在庫切れメッセージが表示され、クリック不可にする。
例２ ： オプションごとに販売価格が異なる場合、選択状況に応じて表示価格を変更する。
などなど。
特に、デフォルトだと在庫の無い商品でも「カートにいれる」ボタンが働いてしまい、カート画面で初めて在庫がないことが判明するので、ユーザーに優しくありません。
オプション設定をされているショップ様は、自社のオプション選択が使いやすいかどうかという視点で再確認されてみてはいかがでしょうか。
