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

商品フィルタ＆カラーチップアプリで、商品表示と顧客エンゲージメントを最大化しましょう。このアプリは、カラーチップ、フィルタ、並べ替えの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テーマ（FashionおよびBottle）では、商品詳細ページの在庫切れバリエーションのスウォッチは、自動的に取り消し線のインジケーターで表示されます。このインジケーターは、顧客が少なくとも1つのオプションを選択した後に表示されます。利用不可のバリエーション組み合わせとなる残りのスウォッチも同様にマークされます。この動作はプラグインによってレンダリングされたスウォッチにのみ適用され、テーマによってネイティブにレンダリングされたスウォッチには影響しません。

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

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

商品フィルターの設定

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

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

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

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

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

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

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

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

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

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

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

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