Shopify Manual 商品のメニューへの関連付け
ここでは、写真を嵌めて説明も作り、公開準備が整った商品を実際にメニューバーの任意の項目に関連付け、マウス操作のみで該当商品のページまで行き着けるようにする方法を解説します。このページでは大きく4つの項目を説明しています。
- 既に存在しているメニューの項目に商品を関連付ける方法（タグ付け）
- 特定のタグを持った商品をメニュー上に表示される1つの項目としてまとめる方法（collectionの作成）
- 特定のコレクションをまとめてメニューに表示するための大きな塊にする方法（Nabigationの作成）
- 複数のナビゲーションを一括りにまとめ、関連性のある商品一群をメニューバーに埋め込む方法（便宜的にMenuの作成と呼びます）
つまり、商品に特定の「Tag」という商品分類を示すキーワードを設定し、そのTagで括ったコレクションを作り、そのコレクションをナビゲーションの一部としてまとめ、ナビゲーションを統合したメニューを作る、という階層構造の作成作業になります。原則として2番め以降の作業を無作為に人にお願いすることはありませんし、むしろ無闇にメニューのナビゲーション構造をいじらないで頂きたいです。1のタグ付けだけは、商品ページにて設定を行いますので、商品ページ作成の際にTagを設定することは全員で行って行きたい作業になります。
1. 商品にタグ付けをする方法
概念図：バラバラの商品（Tag付き）
方法自体は非常に簡単で、数秒で済みます。これはShopify側での設定となり、Shogun側での作業ではありません、Shopify側で作業を実施してください。簡単なのでスクショでの説明も割愛しますが、まずは何らかの商品ページを開いてください。品名や説明、画像、価格などを入れていくメイン部分の他、右側に少し幅の狭い列が並んでいると思います。一番上がSales Channnels、その次がOrganizationsになっていると思いますが、そのOrganizationの一番下にTagを入力する欄があります。ここに特定の文字列を入れて保存するだけで設定は完了です。
タグ付けをする際の注意
タグは後述のCollectionに関連付けをした文字列でなければ意味がありません。基本的にタグに設定して欲しい文字列はお伝えしますので、その通りの文字列を入力してください。決して適当なタグを打ち込まないでください。Tagの欄に初めて打ち込まれた文字列は、タグのライブラリに保存されてしまいます。使いもしないタグが出来てしまうとどこにもリンクされない商品が出て来る恐れがあります。
タグは一括挿入が早くて確実です
商品の一覧で左のチェックボックスにチェックを入れ、Edit Productsから行いたい処理を選択して実行すれば、選択中の全ての商品に同じ処理を一括で実行出来ます。1つひとつ打つのは手間だし時間がかかるのはもちろんのこと、タグは正確に同じ文字列を入力しておく必要があり、個別に手入力しているとミスの原因になります。画像のような手順で一気に処理をかけてしまいましょう。この処理は、タグ付けの際はもちろん、例えばPbulish（Sales Channel内のチェックボックス）を一括で変更するなどにももちろん使えて非常に便利です。是非活用してください。
2. 特定のタグがついた商品をCollectionにまとめる方法
Tagがついただけでは何もHP上には反映されません。今度はTagを使って商品をメニュー内に表示出来る塊にまとめていきます。1枚目の写真のように、Productsメニュー
のCollectionからCollection作成・編集画面に入ります。ここでは青で示したフェンダーのコレクションを例に説明します。
概念図：関連商品の一群（Collection）> バラバラの商品（Tag付き）
Collectionの設定項目
最低限コレクションを正しく作動させるために、下記の4つの項目を設定してください。
Title
メニューに実際に表示される文字列になります。もちろん日本語で入力してください。あまりに文字数が多いとメニューに表示された際に改行されるなどして非常に不格好です。「そこを押せばおおよそ何が出てくるのか」がザックリと、パッと分かるような名称を設定してください。
Description
4枚目の写真が実際にコレクションが表示されている状態のものです。その塊が何の塊なのか、どういった特徴を持った一群なのか、大まかにそのコレクションの概要を説明してください。商品ページに進んでしまうと個別の商品に関する話しかできなくなるので、場合によってはここでかなり詳細な説明を作るというのも手です。なお、ここに打った説明はメタ説明文（ブラウザの検索結果で表示されるページの簡単な概要）に流用されます。その際の文字数は160文字です。これがある種の指標になります。
Conditions（ここがTagをCollectionに紐付ける操作になります）
このコレクションに読み込む商品の条件を設定します。掘り下げると説明がとても長くなるので、ここでは最低限かつ基本的な設定方法のみ説明します。コレクションへの商品関連付けは原則としてTagを使用します。ここの例では、商品のTagに「Fender」と等しいものが設定されている商品を全て読み込む、という設定になっています。
Collection image
いわゆるこのコレクションのTOP画像です。ページのフル幅を使ってバナー状に表示されます。このTOP画像の表示領域は1920×320pxです。
Edit website SEO
非常に端折ってはいますが、上記で最も基本的なコレクションの設定は完了です。ですが、ページの最下部でブラウザの検索結果に直接コレクションがヒットした場合の表示内容を設定できる項目があります。基本的にDescriptionの内容が流用され、文章量も短いので別途触る必要性は低いですが、何か改変すべき理由があれば是非お客さんが「見てみよう」と思ってくれるように改変してください。また、URLも自動で割り振られていますが、ここで任意のURLに書き換えも可能です。ただし無闇に書き換えるとリンク切れなどを起こしますので、設定するなら最初のうちに済ませてください。
以上を済ませると、4枚目の写真のようにコレクショントップ画像と概要説明が入り、下にConditionで設定した条件に該当する商品が読み込まれます。
3. 複数のCollectionを更に纏める（Navigation）
Collectionでバラバラだった商品をある程度まとめました。ですが、そのままだと結局グループ化されただけで各個に散在している状況は変わっていません。次は関連性のあるCollection同士を連結させて実際にツリー状の構造を作っていきます。
概念図：Collectionを束ねた太枝（Navigation) > 各商品へ伸びる小枝（Collection) > 個々の葉のような単一商品（Tag）
ここまで来ると実際の構造が視覚的に分かります。1枚目の写真を見てください。（実際は違いますが便宜的に）オレンジで表示されている「フェンダー」の部分をこれから作ろうとしています。その下に黒で表示されている、フェンダー、膨張式...、フォーム材入り...などは全てCollectionです。では、NavigationにCollectionを関連付ける方法を説明します。まずは2枚目の写真の通り、Online StoreからNavigationに入ってください。ここでは引き続きフェンダーの部分を使って説明します。ここでの設定項目は下記の3点です。
Name
実際にMenuに表示されるひと続きの枝（今回の場合は係留用品 > フェンダー > フェンダー系の各種Collection > それぞれのCollectionに関連付けられている商品）の名称です。ここで設定する名称は実際にメニューにひょうじされる訳ではありません。管理上「カテゴリ名 - Collection代表名」で統一しています。今回は係留用品の中のフェンダーに関する一群、ということですね。
Handle
ここがURLの一部になります。Nameが半角表記であればそれをそのまま拾ってきてくれますが、誰でも触れるよう日本語で設定しているのでHandleは別途設定する必要があります。Nameをそのまま英名表記にするだけでOKです。
Menu items
ここで枝に何を組み込むかを設定します。実際はCollection以外を組み込むことも出来ますが、ここでは前述のCollectionを組み込む、という手順に終始して説明します。Nameは何でも構いません。どうせ表示されません。LinkをCollectionに設定し、作っておいたCollectionを当てはめます。
4. 作成した「枝」を実際にメニューに表示する（Themeのカスタマイズ）
3まででメニューそのものは完成しています。あとは作ったメニューが「どのカテゴリに入るのか」を設定するだけです。今回例に使用しているフェンダーは係留用品ですので、ページ上部にあるメニューバーの「係留用品」内に表示するよう設定していきます。まずは1枚目の写真の通り、Themeから入ってCustomize Themeをクリックします。すると2枚めの写真のように左部のメニューが専用のものに切り替わります。今回使用するのはこのうちのNavigationです。
ここでNavigationの項目自体を新規作成するとメニューバーに項目を追加することが出来ますが、各自が自由にメニューバーに項目を追加することは原則としてないと思いますので説明は割愛します。今回は既に存在している「係留用品」の中に「フェンダー」を追加する方法を説明していきます。
2枚めの写真のようなNavigation作成用メニューが現れたら、「係留用品」をクリックして展開します。縦長なので少し見にくいですが、内部は設定されいるColumnの数だけ同じ設定項目が繰り返し表示されています。係留用品の場合はColumn１がアンカーになっていますので、Column２までスクロールします（３枚目の画像と同じものが見えてきます）。ここで設定するのは下記３項目です。
Title Text
メニュー内でオレンジで表示されることになるテキストです。
Image
そのメニューを代表するような写真を１枚設定されます。どこに表示されるかは４枚目の写真を見てください。
Select Menu
ここで先ほどCollectionをまとめたNavigation内の項目（今回は係留用品 - フェンダー）を選択することで、「係留用品」に「フェンダー」がひも付きました。これで単一の商品から始まり、Collection、Navigation、そして実際のメニューへの紐付け作業は全て完了です。適切に完了していれば４枚目の写真ように表示されます。
Q：Tagに何を設定するかは毎回聞くしかないの？
A：基本的にYESです。商品登録をする＝初めてラインナップに追加される商品なので、どこに表示すべきかは最初の段階できちんと判断する必要があります。Collectionの一覧からTagを見る方法がありますが、サイト構成の根幹をなす要素なので、誰もかれもが好きにいじるのはNGとします。なお、それとは無関係に
絶対に入れて欲しいTag
があります。
Vendor名
です。
例えばSELDENの全ての商品にはSELDEN MAST ABというタグが設定されています。
これは商品を新規に登録した際に
いちいち指示しません
ので、Vendorに入っている文字列と同じ文字列をTagとしても入力してください。なお、これに関連して商品登録の際に
Vendorの入力欄に必ず正しいVendorを入れること
も忘れないでください。Vendorが入っていないならTagにもVendor名を入れようがないので忘れることはないはずですが、
Vendorの指定を忘れると存在しない架空のVendorとして登録がかかってしまい本来のメーカー名で検索しても出てこない
という状態に陥ります。
