フィルターの設定(ランキングのソート機能)
フィルターとは、ランキング画面上でユーザーがソート（絞り込み）するために使います。
（フィルターの表示、非表示は自由に切り替えができます。非表示の場合は設定する必要はありません。）
初期設定は以下です。
簡単なフィルターのCSSを調整する場合は最後のステップの設定をしてください。
1.フィルターの設定 #
アプリ画面の「フィルター」→「設定を編集」を開きます。
フィルター一覧画面が開いたら、任意のフィルター1~5の「設定を編集」を開きます。
＊フィルターには、設定したフィルター一式を保存できます。フィルターは５つまで設定可能です。複数のフィルターを通常用やセール用、キャンペーン用などで設定しておくとShopifyのビジュアライザー画面でフィルターを切り替えるようになります。
フィルター設定画面が開いたら、
「フィルター名」を設定します。（この名称は、ECサイトには表示されません。管理画面でフィルターを区別するためのものです。）
2.フィルターをタグで作る #
フィルターは４種類「タグ」「商品タイプ」「販売元」「価格」の項目で設定ができます。
初期ではすでにフィルター４種類追加されています。 まずは、左下のタグで設定されている。フィルターの「編集」を開きます。
①フィルターの編集画面では、まず「フィルターラベル」名を設定します。
（この名称は、ECサイトには表示されません。フィルター編集画面でフィルターを区別するためのものです。）
②フィルターモードを設定します。「ドロップダウンフィルター」と「タブフィルター」の２種類が選べます。
ドロップダウンとタブではECサイト上で以下のような見栄えの違いがあります。
②-1ドロップダウンフィルターの設定 #
「選択なしのテキスト」部分にフィルターを選択していない状態の名称を設定します。
例えば、フィルターが選択されていない場合やフィルターをリセットする時に使用する全ての商品のランキングになるため、「全ての商品」などが適当になります。
ECサイト上では以下の箇所になります。
②-2タブフィルターの設定 #
「位置」を選択します。この位置は、次項のすべてのテキスト（参考画像）の表示位置「前（一番左）」か「後（一番右）」を設定します。
「「すべて」タブのテキスト」を設定します。フィルターがかかっていないすべての商品が表示される時の名称です。
最後に「「すべて」タブを表示」のチェックマークで表示と非表示を切り替えることができます。
ECサイト上では以下の箇所になります。
③「タグを入力」を開き、自身の商品に設定している「タグ」を選択。
「オプションラベルを入力」でECサイト上での表記を設定します。
ECサイト上では以下の箇所になります。
④「タグを追加」からフィルターを追加できます。
⑤「並び替え」から設定したフィルターの並び替えが行えます。英語であれば、アルファベット、日本語であれば、あいうえお順で「昇順」と「降順」の設定ができます。（ドロップダウンの場合は上から順に表示され、タブの場合は左から順に表示されます。）
「カスタム」を設定すると設定したフィルターの右側をドラッグすることで、任意の順番に設定できます。
2-A商品タイプでフィルターを作る #
初期ではすでにフィルター４種類追加されています。 まずは、左下の商品タイプで設定されている。フィルターの「編集」を開きます。
前項で記載した。「2-①フィルターラベル」「2-②フィルターモード」「2-⑤並び替え」についてはすべて共通となりますので、割愛します。
「商品タイプを入力」を開き、自身の商品に設定している「商品タイプ」を選択。「オプションラベルを入力」でECサイト上での表記を設定します。
「商品タイプを追加」からフィルターを追加できます。
2-B販売元でフィルターを作る #
初期ではすでにフィルター４種類追加されています。 まずは、右下の販売元で設定されている。フィルターの「編集」を開きます。
前項で記載した。「2-①フィルターラベル」「2-②フィルターモード」「2-⑤並び替え」についてはすべて共通となりますので、割愛します。
「販売元」を開き、自身の商品に設定している「販売元」を選択。
「オプションラベルを入力」でECサイト上での表記を設定します。（参考画像以下）
「販売元を追加」からフィルターを追加できます。
2-C価格でフィルターを作る #
初期ではすでにフィルター４種類追加されています。
まずは、右下の価格で設定されている。フィルターの「編集」を開きます。
前項で記載した。「2-①フィルターラベル」「2-②フィルターモード」「2-⑤並び替え」についてはすべて共通となりますので、割愛します。
「最低価格を入力」を開き、フィルターの下限を設定します。
「最高価格を入力」を開き、フィルターの上限を設定します。
「オプションラベルを入力」でECサイト上での表記を設定します。（参考画像以下）
「価格を追加」からフィルターを追加できます。
2-D任意のフィルターを作る #
フィルターを追加の下「タグ」「商品タイプ」「販売元」「価格」で作成したい任意の項目から作成できます。
3.フィルターの見た目を整える #
アプリ画面の「カスタマイズ設定」→「設定を編集」を開きます。
Shopifyビジュアライザー画面の左側メニュー「フィルター設定」を開き、任意の箇所を編集できます。
フィルター設定を反映する場合は以下のスイッチをオンにする必要があります。
