商品フィルタ＆カラーチップ：総合的なガイド

商品フィルタ＆カラーチップアプリで、商品表示と顧客エンゲージメントを最大化しましょう。このアプリは、カラーチップ、フィルター、並べ替えの3つの主要な機能を提供し、商品ページを大幅に向上させることができます。

この総合的なガイドに従って、設定手順を学び、これらの機能がどのように商品表示を改善し、ストアのコンバージョンを向上させるかを発見してください。

アプリのインストール

商品フィルタ＆カラーチップアプリのインストール方法は以下の通りです：

1. SHOPLINE管理画面から、アプリ > アプリストアへ移動に進みます。
   
2. 「商品フィルタ＆カラーチップ」を検索し、インストールをクリックします。
   
3. 任意で、管理画面のアプリセクションにアプリをトップに固定して、アクセスしやすくします。
   

カラーチップの設定

カラーチップは、入力した仕様に基づいて自動的にカラーチップをマッチングします。有効にすると、商品詳細ページや一覧ページの単なるテキスト表示が鮮やかなカラーチップに置き換わり、視覚的に魅力的で情報豊かなショッピング体験を作り出します。

バリエーション属性の色のマッチング

異なる属性ごとにカラーチップを作成できます。システムは設定された属性タイプとオプションに基づいて、商品バリエーションを特定のカラーチップに自動的に連携します。以下の手順に従ってください：

1. アプリで、カラーチップタブに移動し、オプションを選択をクリックします。（初めてのユーザーは、商品カラーチップを追加をクリックしてください。）
   
2. システムはすべてのバリエーションオプションと連携された商品の数を表示します。対応するカラーチップを作成するために、希望のオプションを選択してください。オプションごとに1つのカラーチップを作成できます。
3. 希望のマッチング方法を選択してください：
   

• 精密: 商品バリエーションの属性は国際的な色名リストと完全に一致する必要があります。（例：属性値は「Red」でなければ赤色とマッチしません。）
• ぼかし: バリエーションのテキスト情報に基づいて自動的に色をマッチングします（多言語対応）。（例：「Light Red」も赤色とマッチします。） 

4. 色がマッチしないバリエーション値に対して、システムが自動的に商品バリエーションまたはSKUの画像を適用する場合は、スマートマッチング商品画像をチェックしてください。
   

5. 選択が完了したら、オプションを選択をクリックしてカラーチップを作成します。

   注：アプリはドイツ語、ロシア語、フランス語、スペイン語、日本語、タイ語、繁体字中国語の自動翻訳マッチングをサポートしています。

6. カラーチップリストで、作成したカラーチップを選択して特定の属性の表示ルールを調整します。
7. 特定の属性のスタイルをカスタマイズし、色または画像のいずれかを表示することができます。
   

• 色を選択する場合は、属性値に対応する色を調整できます。 
• 画像を選択する場合は、属性に対応する画像をアップロードできます。 

8. 手動設定が必要なアイテムをフィルタリングするには、手動設定が必要なアイテムを表示にチェックを入れます。
   
9. 特定の商品に特別な表示ルールを設定したい場合は、カスタムをクリックします。
   

9.1 希望する商品を選択し、その商品の横にあるカスタムをクリックします。

9.2 ポップアップウィンドウで、異なる属性値に対する表示タイプとスタイルを定義します。

表示スタイルの設定

カラーチップが設定されたら、カラーチップタブに移動し、表示設定をクリックして、商品詳細ページと商品一覧ページの両方の表示スタイルを調整します。

設定ページで、以下の設定を行います。

• カラーチップスタイル:
  • デフォルトスタイル: 3つのデフォルトスタイルから選択：ラウンド、スクエア、またはラウンド長方形。

  • カスタムスタイル: 不透明度、角の半径、サイズ、厚さを調整。

    注：カスタマイズされたサイズと厚さは商品詳細ページにのみ適用され、商品一覧ページではサポートされていません。

• 特別なバリエーション:
  • 3つのプリセットバブルスタイルを直接設定。
  • バブルの色をカスタマイズ。
  • 任意で、商品詳細ページに特定のカラーチップを別々の行で表示し、タイトル行をニーズに合わせてカスタマイズ。
• 商品詳細ページ: 追加プラグインでカラーチップを表示するかどうかを選択。

• 商品一覧ページ:

  注：OS 3.0テーマ（ファッションとボトル）では、商品詳細ページの在庫切れバリエーションのスウォッチは自動的に取り消し線の指標で表示されます。指標はショッパーが少なくとも1つのオプションを選択した後に表示されます。利用不可のバリエーション組み合わせとなる残りのスウォッチも同様にマークされます。この動作はプラグインでレンダリングされたスウォッチにのみ適用され、テーマでネイティブにレンダリングされたスウォッチには影響しません。

• 売り切れステータスの表示: 有効にすると、在庫切れのバリエーションが「売り切れ」と表示されます。
• カラーチップ表示制限: カラーチップの表示行数を1行、2行、または無制限（すべて表示）から選択。
• 制限超過時の表示スタイル: 制限を超えた場合に「もっと見る」アイコンまたは残りの数量のいずれかを表示するか選択。
• 表示位置: カラーチップを商品情報の上または下に表示するか選択。
• 商品画像切り替えスタイル: 顧客がカラーチップにホバーしたとき、またはカラーチップのオプションをクリックしたときに商品画像が切り替わるかどうかを選択。
• 商品画像のトリミングルール: テーマに従うか、デフォルトのトリミングスタイルを使用するか選択。

カラーチップが正常に設定されると、商品一覧ページでの表示はこのようになる場合があります：

商品フィルターの設定

フィルター機能を使うと、顧客が商品属性に基づいて商品を絞り込めるフィルターを作成できます。設定すると、これらのフィルターはカテゴリページに表示され、顧客が必要なバリエーションを素早く見つけられるようになり、最終的にコンバージョン率の向上につながります。

1. アプリのフィルターセクションに移動します。
   
2. モバイルとPC版の両方でフィルターの表示位置を設定し、リアルタイムプレビューで確認します：
   

• モバイル： 左右からスライドアウト または 下からスライドアウト を選択します。
• PC版： 左側に固定 または 上部に固定 を選択します。

3. フィルターの閉じ方をカスタマイズします：
   

• 選択後： 顧客がフィルター値を選択すると自動的にフィルターが閉じます。
• アプリ確認後： 顧客がフィルター値を選択し、フィルター条件を確認した後にフィルターが閉じます。

4. サイズ、色、販売価格など、商品に合わせてフィルターを調整します。必要に応じてフィルターを追加をクリックしてオプションを増やせます。フィルタータイプを選択すると、アプリが自動的にストア内の商品に関連するフィルター値を取得します。
   

フィルタが設定されると、ストアのカテゴリページに適用されます。以下は表示効果の例です：

• 上部に固定
  
• 左側に固定
  

並べ替えオプションの設定

商品フィルタ＆カラーチップアプリの並べ替え機能は終了予定です。既存の設定は一時的に動作し続ける場合がありますが、この機能は商品並べ替えの管理には推奨されなくなりました。

安定的で将来性のある設定を確保するために、サポートされている並べ替えソリューションを使用して商品並べ替えを設定することを推奨します。

詳細な手順については、「商品レコメンドの並び順の管理」ガイドを参照してください。

商品フィルタ＆カラーチップのアクセシビリティサポート

商品フィルタ＆カラーチップのパーツは、ストアフロント全体でキーボードナビゲーションとスクリーンリーダー対応をサポートしています。これはカラーチップとフィルタが表示されるすべての場所、商品詳細ページ、商品一覧ページ、検索結果、クイック追加ウィンドウに適用されます。このサポートは自動的に提供され、設定は不要です。

顧客はストアを閲覧する際に以下の体験をします：

• キーボードナビゲーション：顧客はキーボードのみでカラーチップを閲覧し、バリエーションを選択し、追加の色を表示し、フィルターを開き、選択し、申請し、クリアし、閉じることができます。
• スクリーンリーダーサポート：スクリーンリーダーはカラーチップとフィルターの名前、現在の値、選択状況を読み上げ、商品画像の変更、フィルター結果数、エラーメッセージなどの更新も伝えます。
• 視覚的なキーボードフォーカス：顧客がキーボードでナビゲートすると、現在フォーカスされているカラーチップまたはフィルターが視覚的に強調表示されます。
• 選択可能な利用不可の組み合わせ：色が他の選択されたオプション（例えばサイズ）との組み合わせでのみ利用不可の場合、顧客が他の組み合わせを探索できるように選択可能なままにされます。完全に利用不可のオプションのみが選択からブロックされます。
• 更新後の一貫した動作：商品リストがさらにアイテムを読み込んだり、フィルターが結果を更新したり、ページが動的にリロードされたりしても、このサポートは継続して機能します。