今回は、サイトに表示されるヘッダーやフッターメニューの設定について解説します。
- メニューの編集ができるようになる
- ヘッダー、フッターメニューの設定ができるようになる
サイトの見やすさや動線なども意識して作成できるようになりましょう。
メニューの完成を確認
メニューの設定をする前に、最終的にはどのようなメニューにするかを決めておきましょう。
今回作成していくメニューの完成形は以下の通りです。
ヘッダーメニュー
フッターメニュー
メニューの設定方法
それでは、ここからメニューの設定方法について順に解説します。
まずは「管理画面」から「オンラインストア」＞「メニュー」を開きます。
この画面で、メニューの設定ができます。また、「メニューを追加する」をクリックすると、新しいメニューの項目を作成することができます。
ヘッダーメニュー
まずはヘッダーメニューの編集を行っていきます。
今回は、デフォルトで作成されている「Main menu」を編集してヘッダーメニューを設定していきます。
画面の「Main menu」をクリックして編集画面に移動します。
メニューの編集画面では「タイトル」「メニュー項目」の設定ができます。
タイトルの編集
メニューのタイトルを編集します。わかりやすくするために「ヘッダーメニュー」に変更しましょう。
メニュー項目の追加
まずは、入れ子になっている部分も含めて、全てのメニュー項目を設定します。
メニュー項目を増やすときは、「メニュー項目を追加」をクリックします。
「メニュー項目を追加」をクリックすると、メニューに関する入力の欄が表示されます。
メニューの「名前」と「リンク」を設定します。
「名前」の欄に「ABOUT」と入力します。
次にリンクを入力します。入力欄をクリックすると、ストア内のリンクがドロップダウンメニューで表示されます。
Aboutページを設定したいので、「ページ」＞「About」を選択します。
どちらも設定できたら、「追加する」をクリックし、メニュー項目を追加します。
上記の手順で、全てのメニュー項目を追加していきます。
追加できるリンクについて
メニューに追加できるリンクの項目についてもご紹介しておきます。
「リンク」には、基本的にShopifyストア内のページを選択することができます。
- ストアのトップページ
- 検索画面
- 全てのコレクションまたはストアに登録しているコレクション
- 全ての商品またはストアに登録している商品ページ
- 「ページ」の設定項目で作成したページ
- ストアで管理しているブログ
- ストア内で作成したブログ記事
- 「ポリシー」で追加したポリシー
上記のShopify内のページ以外にも、外部サイトのURLを直接入力してリンクに設定することも可能です。
ヘッダーメニューに階層を作る
メニューをわかりやすくするために、サブメニューを設定していきます。
今回は、「Tシャツ」「パンツ」「パーカー」を「カテゴリ」のサブメニューとして設定します。
各メニューの左端にある「︙︙」ボタンをドラッグすることで、メニューの順番を入れ替えたり、入れ子にしたりすることができます。
完成形通りの順番になるように設定していきましょう。
最終的なヘッダーメニューの構成はこのようになります。
完成したら、「メニューを保存」をクリックし、変更内容を保存しましょう。
以上で、ヘッダーメニューの編集は完了です。
フッターメニュー
続いてフッターメニューの設定をしていきます。設定方法はヘッダーメニューと同じです。
「オンラインストア」＞「メニュー」の「Footer menu」をクリックし、先ほどと同じように追加をしていきましょう。
今回作成するフッターメニューの完成形は下の画像の通りです。
設定が完了したら、忘れずに「保存」をしましょう。
カスタマイズ画面でメニューを確認
テーマのカスタマイズ画面で、設定したメニューを確認しましょう。
「オンラインストア」＞「テーマ」＞「カスタマイズ」から、ストアのカスタマイズ画面へ移動します。
ヘッダーメニューの確認
カスタマイズ画面の「ヘッダー」セクションをクリックすると、ヘッダーの編集ができる画面が表示されます。
この画面にある「メニュー」の欄で、サイトに表示されるメニューの設定ができます。
自動的にヘッダーメニューが設定されているため、先ほど編集したメニューの項目が表示されています。
フッターメニューの確認
続いてフッターメニューも確認します。
カスタマイズ画面の「フッター」セクションで編集することができます。
「フッター」セクションをクリックすると、下にブロックとして「Footer menu」が表示されます、
この「Information」をクリックすると、追加するメニューの設定ができます。
要素の数やメニューの数で、表示のされ方が変わるのでお好みで設定しましょう。
最後に変更を保存して完了です。
以上で、メニューの編集は全て完了しました。実際にトップページに反映されるか確認をしておきましょう。
管理画面の「オンラインストア」＞「テーマ」の右上にある「ストアを見る」をクリックします。
クリックすると、実際のサイト表示を確認することができます。
こちらで、設定したようにヘッダーメニューとフッターメニューが表示されていることが確認できました。
・ヘッダーメニュー
・フッターメニュー
これでメニューの設定は完了です。
まとめ
今回は、ヘッダーメニューとフッターメニューの編集方法について解説しました。
ストアで扱う商品などによって分かりやすいメニュー構成を作成できるようにしましょう。