こんにちは。FRACTAのResearch & Implementation（RI）局です。
Shopifyの機能「メニュー」をご存知ですか？ 「メニュー」はヘッダーメニューやフッターメニューのリンクを設定する機能ですが、実は全く別の使い方ができます。
Shopifyのデータ（タグやコレクションなど）は階層化やカテゴリ別に分けるといったことができず、フラットになってしまうのが弱点ですが、その弱点を補うのに「メニュー」が活躍します。
今回は「メニュー」を活用して、タグやデータリストをカテゴリ分けする方法をご紹介します。
「メニュー」機能とは？本来の使用方法
活用法1）ブログ記事のタグをカテゴリ分け
活用法2）メタオブジェクトで作成したデータリストをカテゴリ分け
「メニュー」機能とは？ 本来の使用方法
まず始めに、そもそも「メニュー」機能とはどういったものなのか簡単に解説します。
「メニュー」はテーマのヘッダーやフッターにメニューリンクを設置し、メニュー名やリンク先を編集できる機能です。
メニューの編集は、
管理画面＞オンラインストア＞メニュー
から行います。
1つのメニュー配下に次のメニューを設置するといった、“階層化”をすることも可能です。この“階層”を活用して、タグやデータリストをカテゴリ分けする方法をご紹介します。
活用法1） ブログ記事のタグをカテゴリ分け
1つ目は、ブログ記事に登録したタグをカテゴリ分けする方法です。
実際にタグをカテゴリ分けして、ブログ一覧ページに表示したサンプルがこちらです。
ブログ「スタッフコーディネート投稿」の一覧ページです。
各ブログ記事に登録したタグ（#ジャケット #女性 #150cm〜159cm など）をカテゴリ（着用アイテム／性別／身長）に分け、カテゴリ順に表示しています。
各ブログ記事のタグ登録は、以下のように登録したいテキストをそのまま記入し、特殊なことは行っていません。
どのようにタグをカテゴリ分けするかというと、ここで登場するのが「メニュー」です。実際のメニュー設定を見てみましょう。
まずカテゴリ名（着用アイテム／性別／身長）を登録し、その配下にタグ名を登録していきます。メニューの登録を行う際、リンク先の設定が必要になりますが、リンク先は何でもかまいません。
このように、メニューの階層を利用してタグをカテゴリ分けしています。
サンプルでは、タグを記事絞り込みボタンとして、ブログ一覧ページ上に実装してみました。
※実装にはソースコードの編集が必要です。
今回はブログ記事タグのカテゴリ分け方法をご紹介しましたが、商品タグでも同様に行うことが可能です。タグ数が多く、タグをカテゴリ分けできる場合は、分けて表示すると見やすくなりますね。
活用法2） メタオブジェクトで作成したデータリストをカテゴリ分け
（2023/5/15追記：「メニュー」を使用せず、メタオブジェクトのみでカテゴリ分けが可能になりました。最後にご紹介します。）
2つ目は、メタオブジェクトで作成したデータをカテゴリ分けする方法です。
メタオブジェクトはShopifyの新機能で、独自のデータリストを登録しておくことができます。詳しくはこちらの記事をご参照ください。
サンプルでは、メタオブジェクトで「店舗一覧」を作成し、カテゴリ「エリア」に分けて表示してみます。
〈店舗一覧〉（例）
福岡店
神戸店
大阪店
名古屋店
横浜店
渋谷店
新宿店
池袋店
大宮店
仙台店
青森店
メタオブジェクトの店舗一覧
各店舗詳細
この店舗一覧をエリア別に分けます。
東北
青森店／仙台店
関東
大宮店／池袋店／新宿店／渋谷店／横浜店
東海
名古屋店
関西
大阪店／神戸店
九州
福岡店
このエリア別に分ける際にメニューを使用します。
メニュー設定は以下のようになっています。
まずカテゴリ名（各エリア名）を登録し、その配下にメタオブジェクトで作成した各店舗の「ハンドル」（※）を登録していきます。メニューの登録を行う際にリンク先の設定が必要になりますが、リンク先は何でもかまいません。
※各店舗の「ハンドル」は以下から登録します。半角英数字のみ使用可能です。（2023/4現在）
「ハンドル」を使用することにより、動的にページに表示することが可能です。
サンプルでは、
管理画面＞オンラインストア＞ページ
に店舗一覧用のページを作成し、ソースコード編集（liquidカスタマイズ）を行い表示してみました。
今回はShopifyの「メニュー」機能を活用して、ブログ記事のタグ、メタオブジェクトのデータをカテゴリ分けする方法をご紹介しました。メニューを使って階層化やカテゴリ分けすることで、ストアのページがより見やすく、お客様が目的のページに辿り着きやすくなります。
ぜひ活用してみてください。
〈2023/5/15追記〉
「メニュー」を使用せず、メタオブジェクトのみでカテゴリ分けが可能になりましたので、簡単にご紹介します。
まず「店舗一覧」と同様に、メタオブジェクト「エリア」を作成します。
メタオブジェクト名「area（名称は任意）」
エリア名用フィールド「name（名称は任意）」タイプ「単一行のテキスト」「1つの値」
店舗紐付け用フィールド「shop（名称は任意）」タイプ「メタオブジェクト」リファレンス「shop_list（店舗一覧のメタオブジェクト）」「エントリーのリスト」
メタオブジェクトが作成できたら、
Shopify管理画面＞コンテンツ＞メタオブジェクト＞エントリーを追加
から「area（名称は任意）」を選択し、エリア詳細情報を登録します。
フィールド「shop（名称は任意）」には、以下のように対象店舗を選択して保存します。
これでエリアと店舗が紐付きました。「エリア」がカテゴリとなり、その中に「店舗」が所属するイメージです。
サンプルでは、
管理画面＞オンラインストア＞ページ
に店舗一覧用のページを作成し、ソースコード編集（liquidカスタマイズ）を行い表示してみました。
FRACTAでShopify構築支援を行う際は、希望の管理方法、運用に合わせた最善の実装方法をご提案させていただいております。新規の設定や開発支援も、コストや期間と相談しながらの対応が可能です。
