ストアを訪れたユーザーが見たいページへ辿り着きやすくなるよう、ヘッダーメニューを設定しましょう。
このレッスンで行うこと
サイト全体で使うヘッダーを作成します。 下図のように、5つのリンク先を設定していきましょう。
リンク先のページがないと、リンクは作れません。 上図、赤い線で囲った“カテゴリー用のコレクション一覧ページ”も合わせて作成します。
カテゴリーの一覧ページを作成する
カテゴリーの一覧ページは、カテゴリー用として作ったコレクションを一覧表示するページです。
コレクション機能を使って“カテゴリー”を作ったレッスンで、既にトップページにコレクションリストを表示しています。
ですが「どんなカテゴリーがあるか」を知りたいときに、トップページからしか見られないと不便ですよね。ブログなどでコンテンツでSEO集客をする場合は、検索エンジンから記事ページを開く方も多いです。
そうしたお客様にも分かりやすいよう、メニューから開けるカテゴリの一覧ページを作ります。商品が増え、トップページに全カテゴリーを表示できなくなった時にも役立ってくれるでしょう。
【ページ完成イメージ】
1.ページのテンプレートを作成
テーマのカスタマイズ画面から、カテゴリーの一覧ページで使うテンプレートを追加しましょう（※コード編集画面から操作しても構いません）
画面上部のプルダウンで、ページを選択。
テンプレートを作成するを選択。
設定ウィンドウが表示されます。 作成するテンプレートの名前、元になるテンプレートを選びましょう。 名前をcategory、その下はデフォルトの状態で、テンプレートを作成します。
新しく作成したテンプレートのカスタマイズ画面に切り替わります。 セクションを追加から、コレクションリストを選んでください。
ブロック（コレクション）ごとに、表示させたいコレクションを追加していきます。ブロック数が足りない場合は、コレクションを追加で増やしてください。
セクション名のコレクションリストを選択し、全体の設定を行います。 列数などはお好みに合わせて調整してください。 今回の場合、見出しは空にしておくとページタイトルとぶつかりにくいです。
右上の保存ボタンで、ページテンプレートの設定を保存。 カスタマイズ画面を閉じて、ストアダッシュボードに戻ってください。
2.カテゴリー一覧ページを作る
Shopifyのストアダッシュボードから、オンラインストア > ページを開きます。
ページを追加ボタンで、ページの作成画面を開きます。
タイトルはカテゴリー一覧、種類から探す、など分かりやすいものを入力。 コンテンツは空っぽでも、簡単にページの説明を入れても構いません。 テーマテンプレートをcategoryに設定し、公開設定で保存します。
保存できたら、右上にある「ページを表示」で確認してみましょう。
カスタマイズ画面で設定した、コレクションの一覧表示ができていれば完成です。
3.ページの表示を整える
作成したページは、タイトルやテキストの表示位置が他のパーツとズレています。
これは、エディターから設定したコンテンツの出力部を囲むdivタグに付けられている「page-width--narrow」クラスが原因。 クラス名の通り、通常のコンテンツ幅よりも狭い（narrow）幅が設定されています。
コード編集で「page-width--narrow」クラスを取り除く、コンテンツ幅が揃います。
該当ファイルはセクション ディレクトリ内の“main-page.liquid”です。
- デフォルトのテンプレートはそのまま狭い幅
- カテゴリー表示ページは通常のコンテンツ幅
…と使い分けたい場合は、ページテンプレートを分け、“main-page-〇〇.liquid”のようなセクションファイルを自作する良いでしょう。
ストーリーブログのカスタマイズ - storyブログ用のセクションを作ると同じ方法で出来ます。
カスタマイズ元テーマ（Dawn）のアップデートがあった時の対応も、自作ファイルを作っておいたほうがしやすいです。
ヘッダーメニューを変更する
ページが出来たら、ヘッダーメニューを設定していきましょう。 メニューの設定は、オンラインストア > メニュー で行います。 メインメニューを開いてください。
必要ないホームとコレクションの項目を削除します。
カタログの編集をクリック。 名前を「商品一覧」に打ち替えて、変更を適用してください。
メニュー項目を追加する、から新しく項目を加えていきます。 まずはカテゴリーを追加してみましょう。
同様の手順で「ストーリー」「おしらせ」も追加してください。 リンクはブログ > それぞれのブログ で設定できます。
左に表示されているのところでドラッグすると、メニューの順番を変更できます。
順番を整えたら、メニューを保存してください。
オンラインストアを表示して、反映されているか確認してみましょう。
これでメニュー設定完了です。
ヘッダーメニューの表示設定
メニューに表示する項目（リンク）の設定は、メニュー設定から行います。
それ以外、例えば上下余白や背景色の変更、ロゴの表示、などはテーマのカスタマイズ画面の方で設定します。 ヘッダーで使用するメニューも、カスタマイズ画面から切り替えが可能です。
