• Topic 主题 トピック Topic Topic
  • Sign in

ユーザーガイド:商品フィルター&カラースウォッチ

SHOPLINEアプリストアの商品フィルター&カラースウォッチプラグインを使用すると、商品フィルター、規格、およびカラーマッチングを簡単にカスタマイズでき、ユーザーが迅速に適切な商品を見つけるのを支援し、ショッピング体験を向上させることができます。

商品フィルターは、提供した商品の規格に基づいて一括で商品をフィルタリングするフィルターを生成します。有効になると、作成したフィルターがストアページに表示され、ユーザーが迅速に商品の規格や特性をフィルタリングし、ストアのコンバージョンを向上させるのに役立ちます。

カラーパレット機能は、提供した規格に含まれるカラー名とカラーパレットを自動的にマッチングします。有効になると、さまざまなカラーパレットが商品詳細ページと商品一覧ページに表示されます。テキストをカラーパレットで置き換えることで、ストアのコンバージョンを向上させることができます。

 

目次

 


 

商品フィルター&カラースウォッチのインストール

商品フィルター&カラースウォッチアプリをまだインストールしていない場合は、以下の手順に従ってインストールしてください:

  1. SHOPLINE管理パネルから、アプリをクリックしてアプリストアに移動します。
  2.  SHOPLINEアプリストアで、商品フィルター&カラースウォッチを検索してインストールします。
  3. インストール後、商品フィルター&カラースウォッチアプリを使用できます。
    1.3.png

商品フィルター&カラースウォッチには、カラーパレットフィルターソートの3つの主要機能が含まれています。各機能の構成に関する詳細情報については、以下のセクションをお読みください。

 


 

カラーパレットの追加

商品フィルター&カラースウォッチをインストールすると、カラーパレットを構成して商品の規格と効率的にマッチングすることができ、顧客体験を継続的に向上させることができます。以下の手順に従ってください:

  1. 製品フィルター&カラースウォッチのホームページから、カラーパレットタブを見つけ、「オプションを選択」をクリックします。
    2.1.png
  2. システムはすべての製品オプションと関連製品の数を表示します。オプションを選択すると、システムは自動的に新しいカラーパレットを作成します。各オプションに対してカラーパレットを作成できます。
  3. SHOPLINEは、さまざまなアプリケーションシナリオに対処するために2つのカラーマッチングスキームを提供しています:正確な色のマッチングぼかし色のマッチング
    • 精度:製品のバリアント属性は国際的な色の名前リストに完全に準拠している必要があります。(たとえば、属性値が「Red」である必要があります。)
    • ぼかし:ストアのバリアント内のテキスト情報に基づいて色を自動的にマッチングします(複数の言語をサポート)。 (たとえば、属性値が「Light Red」の場合、色「Red」にもマッチングできます。)
注意:製品のバリアントにアクセスするには、製品>製品詳細ページ>バリアントセクションに移動します。たとえば、製品オプションが「Light Red」に設定されている場合、「Red」の色値がマッチングされます。
  1. 製品オプションの値が色に自動的にマッチングされない場合は、製品オプションの画像/色を手動で構成するか、スマートマッチング製品画像を有効にします。色値にマッチングしない製品オプションは、製品バリアント画像またはSKU画像が自動的に適用されます。
    2.4.png

 


 

カラーパレットスタイルの編集

設定されたカラーパレットに移動し、カラーパレットタブ>表示設定に移動して、製品詳細ページおよび製品リストページでの表示スタイルを確認します:

3.0.1.png

3.0.2.png

  1. カラーパレットスタイル設定:
    • デフォルトスタイル:ラウンド、スクエア、角丸長方形の3つのデフォルトスタイルが利用可能です。
    • カスタムスタイル:不透明度、角の半径、サイズ、太さを調整できます。
注意:カスタマイズされたサイズと太さは製品詳細ページにのみ適用され、コレクションページではサポートされていません。
  1. 特別なバリアント設定:
    • 3つのプリセットバブルスタイルを直接設定できます。
    • バブルの色もカスタマイズできます。
    • さらに、製品詳細ページに特定のカラーパレットを別々の行で表示し、必要に応じてタイトル行をカスタマイズできます。
  1. 商品詳細ページの設定: カートに追加プラグインでカラーパレットを表示するかどうかを選択できます。
  2. 商品リストページの設定:
    • 在庫切れステータスの表示: 有効にすると、在庫切れの規格は「売り切れ」として表示されます。
    • カラーパレットの表示制限: カラーパレットの表示を1行、2行、または無制限の行(すべて表示)に選択できます。
    • 制限を超えた場合の表示スタイル: 制限を超えた場合、「もっと見る」アイコンまたは残り数量を表示するかを選択できます。
    • 表示位置: カラーパレットを商品情報の上または下に表示するかを選択できます。
    • 商品画像切り替えスタイル: ユーザーがカラーパレット上でマウスを移動させると商品画像を表示するか、カラーパレットからオプションをクリックしたときに表示するかを選択できます。
    • 商品画像の切り取りルール: テーマに従うかデフォルトスタイルを使用するかを選択できます。
注意:
  • 商品画像の切り替えはPCのみに適用されます。
  • 商品画像の切り取りルールは商品リストページにのみ適用されます。

 

  1. カラーパレットが正常に構成されている場合、商品詳細ページの表示効果は次のようになります:
    3.5.png

 


 

フィルター機能の説明

「フィルター」タブでは、フィルターを追加をクリックしてフィルターを追加できます。SHOPLINEは、商品オプションタグ価格在庫、および商品メーカーの5つのフィルタータイプを提供しています。必要なフィルタータイプをクリックして、このタイプのオプションを編集できます。以下の手順に従ってください:

  1. 「製品フィルター&カラースウォッチ」ページの「フィルター」タブでフィルターを追加をクリックします。
    4.1.png

  2. 現在、SHOPLINEは製品オプションタグ価格在庫、および製品メーカーのタイプでフィルターの作成をサポートしています。
  3. フィルタータイプを選択すると、アプリは現在のストアに関連する製品のフィルター値を自動的に取得します。対応するフィルタリング値を選択することで、フィルターを作成できます。
  4. 製品リストページでフィルターの位置を設定します:
    • モバイルデバイス:サイドからスライドおよび下部からスライドアウトに設定可能。
    • PC:左側に固定および上部に固定に設定可能。
  5. フィルターの折りたたみスタイルを設定します:
    • 選択後:ユーザーがフィルター値を選択した後に自動的に折りたたまれます。
    • 確認後:ユーザーがフィルター値を選択し、現在のフィルター条件を確認した後に自動的に折りたたまれます。
  6. フィルターが正常に設定された場合、製品リストページでの表示効果は以下の通りです:
    4.6.png

 


 

ソート機能の説明

以下の手順に従うと、オンラインストア内の対応する製品のソートオプションを設定したり、ソート名をカスタマイズしたりできます:
5.0.png

  1. 製品のソート設定:
    • ソートオプションの有効化または無効化、またはカスタムソート名の設定をサポート:
      • おすすめ
      • 最も人気のある
      • 最近更新された
      • 価格:低→高
      • 価格:高→低
  2. おすすめソートオプションの設定
    • 以下のソートオプションはすべての製品リストページおよびカテゴリページに適用されます:
      • 最も人気のある
      • 高→低の転換率
      • 高→低のページビュー
      • 製品名 A-Z
      • 製品名 Z-A
      • 作成日:古い→新しい
      • 作成日:新しい→古い
      • 更新日:古い→新しい
      • 更新日:新しい→古い
      • 価格:高→低
      • 価格:低→高
      • 高→低のカートに追加率
      • 高→低のカートに追加数量
    • 以下のソートオプションは単一の製品カテゴリページにも適用されます:
      • 最も人気のある
      • 高→低の転換率
      • 高→低のページビュー
      • 高→低のカートに追加率
      • 製品名 A-Z
      • 製品名 Z-A
      • 作成日:古い→新しい
      • 作成日:新しい→古い
      • 更新日:古い→新しい
      • 更新日:新しい→古い
      • 価格:高→低
      • 価格:低→高
      • 高→低のカートに追加数量
      • カスタム
他にご質問がございましたら、リクエストを送信してください

コメント