こんな方におすすめ
- Shopifyの商品を色やサイズなどで検索できるようにしたい
- 商品を絞り込む機能が欲しい
↓絞り込み検索機能はこんな感じのものになります。（ABC-MARTより）
絞り込み検索をつけるべきストア
そう考える方もいると思います。
次のようなストアには絞り込み検索がオススメです。
- 商品数が多いところ(50商品以上)
└商品数が多くなると、目的の商品を探すのがストレスになってしまうため、見つけやすいように絞り込み検索を導入すべきです - 商品の要素が多いところ
└カラーやサイズ、メーカーなど商品の種類が多いストアも、絞り込み検索を導入することでお客様がお目当ての商品をすぐに発見することができます。
[Power Tools Suite]を使って絞り込み検索を取り入れよう
「Power Tools Suite」とは
「Power Tools Suite」は、「Power Tools」が提供している複数のアプリが一つにまとまったアプリです。
商品を絞り込んだり、商品にタグを一括で付けたり、売り切れの商品の表示を停止したり、と様々な機能があります。
今回はその中の一つである「Filter Menu by Power Tools」という商品を絞り込み検索が出来るのを紹介します。
料金は、14日間の無料期間の後、月額15.99ドルで使うことの出来るアプリです。
（インストール後、もし自分のテーマが該当していなかったとしても14日以内にアプリを削除すれば料金は発生しません。）
アプリのインストール方法
アプリのインストールは下記リンクを参考にインストールしてください。
なお、下の画像のようなアイコンです。
-
-
Here’s to a Great 2015
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutibus igitur rectissime mihi videris e ...
続きを見る
アプリを使ってみよう
インストール後、下の写真のような画面に移動します。
英語ですが、内容を確認後、ページ下部の「Accept Terms and Continue」をクリックしてください。
続いて、下の写真の画面に移動します。
テーマにアプリをインストールしよう
それではまずテーマにインストールしましょう。
横（サイドバー）の一番下、「Theme Installer」をクリックしてください。
下の画像のような画面が出てきます。
今回は簡単な絞り込み機能を使うので、一番右の「FILTER MENU」という青色のものをクリックしてください。
自分の使っている（使う予定の）テーマを選択してください。
私の場合はDebutを使っているため、それを選択します。
緑色のボタンの「（テーマ名）installer」をクリックしてください。
なお、先ほども説明しましたが、このページの下のリストはこのアプリをインストールすることが可能なテーマです。
下のような画面が出てくるので、バックアップも同時に生成できる一番上を選択しましょう。
インストール完了後、下の画面が出てきます。
ここで青い線で引いてあるように、絞り込みのタイトルを埋め込む方法が記述されていますが、やや難しい内容になるため、番外編（ページ下部）にて説明します。
以上でテーマにインストールするのは完了です。
絞り込みのメニューを作ろう
アプリのトップ画面に移動後、
サイドバーの「Filter Menu」▶ 「New Filter Group」をクリックします。
下の画面が出てくると思うので、今回は「Color」の絞り込みを作ってみます。
タイトルに[color]、下のところは[Variant]を選択します。
ここのタイトルは実際にショップや管理画面に表示するタイトルです
絞り込みのタイトルを記入します。
次の画面で指定するタイトルによって自動的に絞り込みの種類が作成されます。
私は、商品の色のオプションの名前を「色」とつけたので色と入力します。
こうすることでShopify側で「色」という名前のオプションのものが自動で追加されます。
下の写真のようになったら「Save & Update」を押して完了です。
このように自動で追加されました。
ショップのコレクション画面に移動すると左のサイドバーに絞り込み検索の機能がついているのを確認することが出来ます。
以上でこのアプリの簡単な使い方は終わります。
サポートについて
このアプリは複雑な要素が多いため、設定に戸惑う方も多いと思います。
そんな時は直接サポートに連絡を取ってみましょう。英語での対応となりますが、解答スピードは１日ほどでとても早いです！
英語が嫌だ...
という方はAGATA CODEでも対応を行いますので、お気軽にご相談ください！
まとめ&サービス
以上でPre‑order Nowの解説を終了します。 今回の記事に関して、質問やご意見ございましたら下記問い合わせフォームよりご連絡ください。 また、AGATA CODEではShopifyの修正を引き受けます。 Shopifyのアプリやテーマのカスタマイズ、商品画像の作成など、Shopifyのあらゆる修正を引き受けています。
「番外編」絞り込みタイトルを付ける方法
青い線で引いてあるように、下のコードをコレクションのタイトルに当たるところに入力します
{% include 'pt-collection-title' %} 自分のストアの画面に移動して、
オンラインストア▶テーマ▶アクション▶コードを編集する をクリックします。
themeフォルダのcollection.liquidを選択します。
その中に下記コードのようなものがあると思います。
{% section 'collection-template' %}これは、sectionフォルダの中の[collection-template.liquid]というファイルを読み込んでいるよ、と言う内容になります。
そのため、sectionフォルダの中の[collection-template.liquid]というファイルを開くと、下の画像のように<h2>で囲われた部分があると思います。
ここの
{{collection.title}}部分を
{% include 'pt-collection-title' %} に変更します。
以上で完了です。