名前付きカラーを使用したカラーチップの設定（OS 3.0 テーマ）

カラーチップは、顧客がテキストリストの代わりに視覚的なカラーチップから商品のカラーバリエーションを選択できるようにします。OS 3.0 テーマは、名前付きカラー（red、navy、coral などの標準化された CSS カラーキーワードで、それぞれ特定の16進コードにマッピングされています）を使用してこれらのカラーチップを生成するため、商品のカラーバリエーションの値が自動的に正しいカラーチップの色として表示されます。

このガイドでは、名前付きカラーの仕組み、カテゴリページと商品ページでのカラーチップの表示方法、バリエーションセレクターパーツを使った設定方法、そしてサポートされているカラー名と対応する16進コードの完全なリファレンスチャートを説明します。

OS 3.0 テーマにおけるカラーチップのストアフロントでの効果

OS 3.0 テーマは名前付きカラーを利用して、商品のカラーバリエーションをカラーチップパレットとして表示するバリエーションセレクターパーツを動かしています。顧客はこれらのカラーチップをカテゴリページと商品ページの両方で見ることができ、他の商品関連パーツ（例えば、注目商品）にも追加可能です。

このセクションでは、顧客が最もよくカラーチップに出会うカテゴリページと商品ページに焦点を当てています。以下のセクションでは、それぞれの顧客向けの効果について説明します。

カテゴリページでの表示

• カラーチップにカーソルを合わせると、その色のプレビューとして商品画像が更新されます。
  
• カテゴリページの商品カードのカラーチップをクリックすると、そのカラーバリエーションの商品ページに移動します。
  

商品ページでの表示

• 顧客がカテゴリページから来た場合、クリックした色がすでに選択されています。
• 商品ページで別のカラーチップをクリックすると、ページが同様に更新されます — URL がその色の SKU に変わり、カラーチップが選択状態になります。
  
• 顧客はサイズを選択し、次に追加をクリックして商品をカートに入れます — 色とサイズを選択しただけでは自動的に追加されません。
  

カテゴリページでのカラーチップの設定

バリエーションセレクターは、商品のカラーバリエーションをカラーチップパレットとして表示し、顧客が色や、該当する場合はサイズなどの他のバリエーション属性を選択してから商品をカートに追加できる商品カードパーツです。カテゴリページにバリエーションセレクターを追加して設定するには、次の手順を行います：

1. テーマエディターで、ページセレクターからカテゴリページを選択します。左側のレイヤーメニューで、商品リスト > 商品カード > 商品情報エリアに移動し、バリエーションセレクターパーツを追加します。
2. このパーツを追加すると、カラーバリエーションが商品カード上にカラーチップパレットとして表示され、他のバリエーション属性（サイズなど）は顧客が商品画像にカーソルを合わせたときに表示されます。
3. バリエーションセレクターパーツの設定を以下のように構成します。
   
   • パレットスタイル： スクエア、ラウンド、または 角丸長方形
   • カラーチップ最大表示数： スライダーをドラッグするか、直接数字を入力して、1から6までのカラーチップの表示数を設定します。
   • カラーチップ表示方法： 1行のみ表示、左右にスクロール、または タイル表示
   • カラーチップ表示サイズ： 小、中、または 大
   • PC版表示仕様 / モバイル表示仕様： これらをオンにすると、カラーチップの隣に他のバリエーション属性（サイズなど）がテキストで表示されます。各トグルはPC版とモバイルで独立して適用されます。
   • 仕様寸法： 小、中、または大 — 表示仕様が有効な場合に表示される仕様テキストのサイズを設定します。
4. 変更を適用するには、保存をクリックします。

商品ページでのカラーチップの設定

商品ページでは、バリエーションセレクターは商品情報の下に組み込み済みのパーツとして存在し、カテゴリページのように手動で追加する必要はありません。

設定方法は以下の通りです：

1. テーマエディターで、ページセレクターから商品ページを選択します。左側のレイヤーメニューで、商品 > 商品 セクション > 商品 情報に進み、バリエーションセレクターを選択します。
   
2. カラーチップを有効にするをオンにします。有効にすると、カラーチップはデフォルトでタイル表示されます。バリエーションセレクターパーツの以下の設定を構成します：

• パレットスタイル：カラーチップの形状を設定します（例：四角形）。
• タイトルのタイポグラフィ：バリエーションオプションのタイトルに使用されるフォントスタイルを設定します（例：ボディ3）。
• バリエーションの在庫切れスタイル：在庫切れのバリエーションの表示方法を設定します（例：半幅スラッシュ（グレーアウト））。この設定はテキストおよび画像ボタンにのみ適用され、カラーチップボタンは対応していません。
• バリエーション選択スタイル：選択されたバリエーションの強調表示方法を設定します（例：枠線のハイライト）。
• 表示サイズ：カラーチップのサイズを設定します（例：中サイズ）。
• PC版レイアウト：PC版でのレイアウト方向を設定します（例：左右レイアウト）。
• モバイルレイアウト：モバイルでのレイアウト方向を設定します（例：縦レイアウト）。

3. 変更を適用するには、保存をクリックします。

OS 3.0 テーマ用の名前付きカラー参照表

以下の表は、OS 3.0 テーマでサポートされているすべての名前付きカラーと、それに対応する16進カラーコードを示しています。これらの名前は標準のCSSカラー モジュールのキーワードリストに従っているため、同じ名前と値がストアフロント全体で一貫して適用されます。

標準の名前付きカラー

拡張名前付きカラー