サムネイル

【Shopify マスターへの道】#14 メニューの編集をしよう

  1. ストア構築の準備をしよう
  2. 商品を登録しよう
  3. コレクションを登録しよう
  4. ブログ記事を作成しよう
  5. サイトのデザインを選ぼう
  6. テーマを編集しよう(セクション編)
  7. テーマを編集しよう(テーマ設定編)
  8. トップページ以外を編集しよう
  9. サイトのフォントを編集しよう
  10. アカウントページを作成しよう
  11. コンタクトフォーム を作成しよう
  12. About ページを作成しよう
  13. 規約を入力しよう
  14. メニューの編集をしよう(← 今回はここ)
  15. 送料を設定しよう
  16. 一般設定を編集しよう roadmap-edit-navigation-menu
  17. 各種設定を編集しよう
  18. 決済テストを行おう
  19. ストアの所有権を移行しよう

今回は、ヘッダーやフッターに表示するナビゲーションメニューを編集していきます。簡単に設定できるので、サクッと編集していきましょう!

今回の目標

  • メニューを編集する
  • カスタマイズ画面でメニューの設定をする

デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。

【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード

メニューの見本

まずは、完成形を確認します。デモサイトのヘッダーとフッターを確認します。

ヘッダーメニュー

ヘッダーメニューは次の画像のように設定します。主要なページへのリンクをおきます。また、カタログは入れ子にしてドロップダウンメニューとして実装します。

フッターメニュー

フッターメニューは次の画像のように設定します。ヘッダーメニューと同様のリンクに加えて、規約ページのリンクも設定します。

ヘッダーメニューの設定

ストアの管理画面にログインします。「オンラインストア > メニュー」へ進みます。

ここでメニューの内容を編集することができます。また「メニューを追加する」から新しいメニューを作成することができます。

今回はデフォルトである「メインメニュー」を編集してヘッダーメニューを作成していきます。「メインメニュー」をクリックして編集画面へ移動します。

メニューの編集画面では「タイトル」「メニュー項目」「ハンドル名」を設定することができます。注意点として、デフォルトで設定してあるメニューの「ハンドル名」は変更することができません。そのためこのメニューの「ハンドル名」は「main-manu」から変更することができません。

タイトルの編集

メニューの「タイトル」を変更します。「ヘッダーメニュー」に変更してみましょう。

メニュー項目の編集

まず、入れ子になっている部分を含めて全てのメニュー項目を設定します。

「メニュー項目を追加」をクリックします。

メニュー項目を追加するためのモーダルが表示されます。メニューの「名前」とその「リンク」を設定します。

「名」に「私たちについて」を入力します。

「リンク」を選択します。「リンク」をクリックすると Shopify 内のリンクがドロップダウンメニューで表示されます。About ページのリンクを設定したいので「ページ > About Us」を選択します。

どちらも設定できたら「追加」をクリックしメニュー項目を追加します。

「私たちについて」というメニューが追加されてれば OK です。

リンクの選択肢について

ここでメニューを追加する際に選択可能な項目について解説しておきます。

「リンク」では、基本的に Shopify ストア内のページを選択することができます。

  • :ストアのトップページ
  • :検索画面が表示される
  • :全てのコレクションまたはストアに登録しているコレクションから選ぶことができる
  • :全ての商品またはストアに登録している商品から選ぶことができる
  • :「ページ」の設定項目で作成したページから選択することができる
  • :ストアで管理しているブログから選択することができる
  • :ストア内で作成したブログ記事から選択することができる
  • :法務関連で追加したポリシーから選択することができる

リンクの設定では、これらのリンクから選択する以外にもすることもできます。

ヘッダーメニューの残りの項目を追加する

次の画像のようにヘッダーメニューの項目を追加します。それぞれのメニュー項目のリンクは以下の通りです。

  • :ブログ > Blog
  •  :ページ > お問い合わせ
  • :コレクション > Earrings
  • :コレクション > Necklaces
  • :コレクション > Bracelets

メニューに階層を作る

「イヤリング」「ネックレス」「ブレスレット」を「カタログ」のサブメニューにします。各メニューの左端にある「︙︙」をドラックすることでメニューの順番を入れ替えたり入れ子にしたりすることができます。

「私たちについて」と「カタログ」を入れ替えて、各コレクションメニューを「カタログ」のサブメニューにします。

最終的なヘッダーメニューの構成はこのようになります。完成したら、「保存する」をクリックし、変更内容を保存します。注意点として、なぜかメニューの設定だけは変更を保存せずに前の画面へ戻ったり、他のページへ移動しようとしたりしたときに保存されていないということを教えてくれません。そのため、しっかりと保存されているかを確認してからページを移動するようにしましょう。

以上でヘッダーメニューの編集は終了です。

フッターメニューの設定

次にフッターメニューを設定していきます。

設定方法はヘッダーメニューの場合と全く同じです。次の画像を参考にフッターメニューを作成してみましょう。タイトルはそのままで大丈夫です。

  • :ホームページ
  • :ページ > About Us
  • :商品 > All Products
  • :ブログ > Blog
  •  :ページ > お問い合わせ
  • :ポリシー > Terms of Service
  • :ポリシー > Privacy Policy
  • :ポリシー > Legal Notice
  • :ポリシー > Shipping Policy
  • :ポリシー > Refund Policy

設定が完了したら、忘れずに保存をしましょう!

カスタマイズ画面でメニューを確認する

テーマのカスタマイズ画面で編集したメニューを確認します。

「オンラインストア > テーマ> 現在のテーマ > カスタマイズ」からカスタマイズ画面へ移動します。

ヘッダーメニューを確認する

「ヘッダー」セクションの編集項目に「NAVIGATION」という項目があります。

この「NAVIGATION」の設定項目に「メニュー」と「追加メニュー」という項目があるのでここでメニューの設定をすることができます。

「メニュー」では、デスクトップ表示の際にヘッダーに表示されるメニューを選択します。現在は、「ヘッダーメニュー」が選択されているので、先ほど編集したメニューの項目が表示されています。

もう一つ「追加メニュー」という項目がありますが、こちらはハンバーガーメニューを開いたときに表示されるメニューです。Brooklyn では、モバイル表示やデスクトップ表示でも画面幅が狭くヘッダーメニューの項目が多い場合に、ハンバーガーメニューが採用されています。

試しにモバイル表示にして確認します。

ハンバーガーメニューをクリックして開いてみます。ハンバーガーメニューを開くと、メニューと追加メニューの両方が表示されています。

「追加メニュー」は、今回は必要ないので削除します。「追加メニュー > 削除する」で選択されている「フッターメニュー」を削除することができます。

今回はやりませんが、追加メニュー用にカスタマイズしたメニューを作成して追加することも可能です。その場合、先ほどの手順で新しいメニューを作成し「メニューを選択する」からそのメニューを選べば OK です。

フッターメニューを確認する

画面表示を「デスクトップ」に戻します。フッターメニューは「フッター」セクションで編集することができます。ヘッダーの場合と同様に「メニュー」という設定項目があるので、そこでフッターメニューを設定することができます。

今回は、デフォルトで「フッタメニュー」が表示されているので、変更する必要はありません。

最後に変更を保存すれば OK です。

以上でメニューの設定は全て終了です。

まとめ

今回はサイトのヘッダーメニューとフッターメニューを編集しました。新しくメニューを作成した場合は、カスタマイズ画面からストアにメニューを反映させることを忘れないようにしましょう。

今回の目標

  • メニューを編集できた
  • カスタマイズ画面でメニューの設定できた

次回は送料の設定をしていきます。ありがとうございました。

おすすめ Shopify アプリ

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事