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

商品フィルタ＆カラーチップアプリで、商品表示と顧客エンゲージメントを最大化しましょう。このアプリは、カラーチップ、フィルター、並べ替えの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. サイズ、色、販売価格など、商品に合わせてフィルターを調整します。必要に応じてフィルターを追加をクリックしてオプションを増やせます。フィルタータイプを選択すると、アプリが自動的にストア内の商品に関連するフィルター値を取得します。
   

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

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

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

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

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

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

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

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

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

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

商品フィルターとカラーチップに関するよくある質問

Q1: PC版で顧客がフィルターを申請しても何も起こらないのはなぜですか？

これは、PCのフィルター位置が上部に固定に設定され、フィルター閉じるスタイルがアプリ確認後に設定されている場合に発生することがあります。この設定では、顧客がフィルター選択を申請するための確認ボタンが表示されます。ただし、テーマのボタンスタイルによっては、ボタンの背景色がフィルターの背景と同化し、ボタンが見えにくくなることがあります。

テーマエディターのカテゴリページに移動し、確認ボタンがフィルター背景に対して明確に見えるように、ボタン背景の色を調整してください。

Q2: OS 3.0テーマで顧客がカラーチップを選択した後、商品画像の比率が変わるのはなぜですか？

デフォルトでは、顧客がカラーチップを選択した際に表示される画像はテーマの画像スタイルに従わない場合があります。カラーチップタブで表示設定をクリックし、商品一覧ページの設定で商品画像のトリミングルールをデフォルトスタイルではなくテーマに従うに設定してください。これにより、カラーチップに表示される画像がテーマと一貫した画像比率で表示されます。

Q3: なぜ設定したカラーチップ画像がストアフロントに表示されないのですか？

カラーチップ画像は、設定された色に一致する商品オプションの値に対してのみ表示されます。値の一致方法は、選択されたカラー一致モードによって異なります：

• 精密一致：商品オプションの値は、標準色リストの色名と完全に一致する必要があります。例えば、Redは一致しますが、Light Redは一致しません。
• あいまい一致：システムは商品オプションの値のテキストに基づいて色を一致させます。例えば、Light RedはRedに一致させることができます。

選択された一致モードで商品オプションの値が設定された色に一致しない場合、そのカラーチップ画像は表示されません。

商品オプションの値が設定された色に一致するか確認してください。また、スマートマッチング商品画像を有効にすると、色に一致しない値に対して対応する商品オプションまたはSKU画像を自動的に使用できます。