カテゴリーの役割を持つコレクション作成 | SkillhubAI(スキルハブエーアイ)

カテゴリーの役割を持つコレクション作成

file

Shopifyには自動で生成されるカテゴリーページはありません。 コレクション機能で商品をグルーピングし、カテゴリーとして利用することで対応します。

表示ページのカスタマイズにも必要ですので、まずはコレクションを作成しましょう。

コレクションのテンプレートを作る

最初に“カテゴリー”として使うコレクションは、通常のコレクションと見た目を変えられるように専用テンプレートを作りましょう。

Shopifyでは、コレクション毎にテンプレートを選択できます。 後からでも変更できますが、1つずつテンプレートの設定をし直すのは面倒。なので、初めからテンプレートを分ける想定の場合は、先に作っておきましょう。

テーマのコード編集画面を開きます。 テンプレート のすぐ下にある「新しいテンプレートを追加する」をクリック。

file

ウィンドウでテンプレート追加の設定をします。

作成するテンプレートは、collectionを選択してください。 ファイル名はcollection.任意のワード.json。任意のワード部分には、そのテンプレートの目的や特徴を入れると良いです。今回は「category」にしました。

file

完了ボタンをクリックすると、ファイルが作成されます。

file

これで新しいテンプレートの作成は完了。 左上のアイコン(閉じる)で、コード編集画面を終了してください。

カテゴリー代わりのコレクションを作成

商品登録から、商品タイプを設定

左メニューから商品管理を開きます。 登録している商品名をクリックし、編集画面を開いてください。

file

商品整理グループ内の商品タイプを設定します。 見本では「琥珀糖」と入力しました。


※商品カテゴリー欄は設定しても、しなくても、構いません。

保存するボタンを押して、変更を保存してください。

自動コレクションを作成する

商品管理 > コレクション を開きます。 右上の「コレクションを作成する」から作成画面を開いてください。

file

以下1~5までを入力・設定していきます。

file

1.コレクションのタイトル
2.コレクションの説明

コレクションのタイトル、カテゴリー名として使う言葉を入力します。 説明は非必須。ですが、説明文も入れるデザインなので、入力しておきましょう。適当な文言を長めに入れておくと、長文でも表示が崩れないかも確認できます。

file

3.コレクションの種類

コレクションの種類は、自動を選択します。 下部では、自動的に商品をコレクションに加える条件が設定できます。 商品タイプが“琥珀糖”の商品を登録しました。

file

複数の商品タイプを登録したい場合は「別の条件を追加」で出来ます。

file

4.コレクションの画像

コレクションの画像は、アイキャッチ/サムネイルのようなものです。 コレクションのイメージ画像、コレクションを代表する商品の画像などを登録すると良いでしょう。

file

画像アップロードは、点線内をクリック、もしくはファイルを点線内にドラッグ・アンド・ドロップすると行うことができます。

file

コレクション画像には、以下の写真素材を使わせていただきました。
素材フォルダには含まれておりませんので、リンク先よりDLしてください。
※他の画像をご利用いただいても構いません

上から眺める琥珀糖の写真素材 - ぱくたそ

5.テーマテンプレート

このコレクションを表示するテンプレートを選びます。 最初に作ったテンプレート(category)を選んでください。

file

1~5まで設定したら、保存するボタンをクリック。 コレクションを作成してください。

ホームページをカスタマイズ

ホームページからカテゴリーのリンクを作りましょう。 こちらはShopifyテーマ“Dawn”に標準搭載されている機能だけで出来ます。

テーマのカスタマイズ画面(テーマエディター)を開いてください。 ホームページに“コレクションリスト”のセクションを追加します。 特集コレクション~マルチカラムあたりのセクションは非表示にしておくと、カスタマイズ画面すっきりして見やすいです。

file

セクションの見出しを「カテゴリーから探す」と打ち替えます。 お好みでモバイルの列数も調整してください。

file

次にブロックの設定を行います。 ブロックを選択して、コレクションを選択するだけで設定できます。

file

file

これで、トップページからのリンク作成も完了です。

他にもカテゴリー目的のコレクションを作って、ブロックを埋めると雰囲気が出ます。

file

コレクションは、コレクションの種類(手動or自動)のみ変更不可。 それ以外は変更できるので、自動コレクションで適当に条件を設定して、コレクションのタイトルと画像だけ設定すれば、ホームページのセクションから呼び出せますよ。

きちんと作り込みたい方は、統一感のあるコレクションの画像を作ってみたり、それぞれのコレクションに含まれる商品から作成してみても良いと思います。