カラーチップ（色の見本）のしくみ

色の選択肢を丸い印（カラーチップ）で示す仕組みの全体像を説明します。設定はテーマ設定の「商品カード」にまとまっています。まずこのページで全体の流れを確認できます。

カラーチップはどこに出ますか

商品カード（一覧・コレクション・検索結果など） — カードの下部に色の印を並べます。押すとカードの画像がその色の商品画像に切り替わります
商品ページ — 「商品情報」セクションのバリエーションピッカー（ドロップダウンでもピル型ボタンでも）に印が付きます
クイックビュー — 商品ページと同じバリエーションピッカーの印を使います
お気に入り一覧 — カラーチップは使わず、ドロップダウンで選びます

色はどこで決まりますか

テーマに「この色名はこの色」という割り当て設定はありません。次の順で自動的に決まります。

Shopify のスウォッチ設定 — Shopify 管理画面の商品オプションでスウォッチ（画像または色）が設定してあれば、それを使います
商品の画像 — スウォッチが無い場合は、その色のバリエーションの画像（無ければ商品の代表画像）を使います
テーマ内蔵の色の辞書 — どちらも無い場合、色名（英語・日本語の代表的な色名）から自動で色を当てます

どの選択肢が「色」になりますか

次のいずれかの場合に、その商品の選択肢が色として扱われます。

Shopify のスウォッチが設定されている
選択肢の名前（Color・色・カラーなど）が、テーマ設定の 色オプションとみなす名前（初期値 color,colour,色,カラー）に含まれる

形は2か所で設定します

商品カード — テーマ設定「商品カード」の 商品カードのカラーチップの形（円形 / 正方形 / 角丸四角 / なし）。「角丸四角」はテーマ設定「ボタン」の角丸設定を使います
商品ページ — 「商品情報」セクションのバリエーションピッカーブロックの見本（円形 / 正方形 / なし）。同梱の商品テンプレート（フォーカス / モダン）とクイックビューでは、常に円形になります

色名の表示は2つの設定があります

商品カードに色名を表示（テーマ設定「商品カード」） — カードのカラーチップの横に色名を出します
カード内の色選択に色名を表示（テーマ設定「商品カード」） — カードから直接カートに追加するときの色の選択で、色の印と一緒に色名を表示します。「商品カードに色名を表示」もオンのときだけ表示されます

「カード内で商品をカートに追加」がオンのとき

テーマ設定「商品カード」の カード内で商品をカートに追加 がオン（初期値）のとき、バリエーションが100件までの商品のカードでは、静的なカラーチップ行が色・サイズを選んでそのままカートに入れられる表示に切り替わります。切り替わった商品では、表示するカラーチップの最大数 は使われません。商品カードのカラーチップの形 は、切り替わった後の色の選択にも使われます。

表示数の上限

表示するカラーチップの最大数（2〜8・初期値4）で、カードに並べる色の数の上限を決めます。超えた分は「+2」のようにまとめて表示します。