Shopifyのメニュー設定とメガメニュー作成アプリを徹底解説
この記事の所要時間：8分
ユーザーが買い物しやすいネットショップをつくるには、メニューの設計がとても重要になります。
特にメインメニューがしっかりしていないと、良い商品を販売していてもユーザーは商品に辿り着く前に離脱してしまいます。
Shopifyはノーコードで簡単にメニューを編集することができ、また専用のShopifyアプリを使用することで、より商品にアクセスしやすいメニューを作成することができます。
そこで今回はShopifyのメニューを編集する方法と、オリジナルのメニューを作成するおすすめアプリをご紹介します。
本記事を読めば、ショップのメニューで商品への最適な導線をつくることができ、ユーザーが買い物しやすいショップの設計が可能になります。
目次
Shopifyのメニュー設定
メニューについて
ネットショップのメニューは、大きく分けて「メインメニュー」と「フッターメニュー」の2つあり、これらのメニューはショップの全ページで表示されます。
■メインメニュー
メインメニューとはページの上部に固定され、商品カタログやAboutページなどの項目が並ぶ最も重要なメニューです。
Shopifyのメインメニューはテーマによってタイプが異なり、主に「ヘッダーメニュー」「サイドメニュー」「モーダルメニュー」の3種類のメインメニューがあります。
各無料テーマのメニュータイプについては、以下の記事でご紹介しています。
■フッターメニュー
フッターメニューとはページの最下部に固定され、ストアポリシーやお問い合わせページなどが並ぶメニューです。
ユーザーが見る頻度は少ないが重要な情報をショップに掲載する際に利用します。
メニューの設定方法
Shopifyでメニューを設定する方法はとても簡単です。
Shopifyの管理画面から「オンラインストア > メニュー」をクリックし、「メインメニュー」あるいは「フッターメニュー」を選択します。(今回はメインメニューで説明します)
メインメニューにはデフォルトで「ホーム」「カタログ」というメニュー項目がありますが、必要ない場合は削除してください。
「メニュー項目を追加する」をクリックして、メインメニューに必要なページを追加します。
「メニュー項目を追加する」をクリックするとモーダルウィンドウが表示されるので、メニューに追加するページのタイトルとリンクを設定します。(リンクの欄で外部サイトのURLを入力すると、そのサイトに遷移させることも可能です。)
「追加する」をクリックしてメニューにページを追加します。
追加したメニュー項目は一覧で表示され、ドラッグ&ドロップで階層構造(ドロップダウンメニュー)にすることが可能です。
※階層は3段階まで可能
またメニュー階層の最上部タイトルをクリックした際に、別のページに遷移してしまうとドロップダウンメニューとして使いづらくなります。そのため最上部項目からはリンクを削除することをオススメします。
メニュー項目の右側にある「編集」をクリックし、リンクの欄に「#」と入力してオプションを選択すると、どのページにも遷移しないメニュー項目になります。
ドロップダウンメニューを編集したら「保存する」をクリックして完了です。
ショップの全体を把握できるメガメニューとは
Shopifyはテーマによってメニューのタイプやデザインが異なり、なかにはメガメニューという画面のほとんどを覆う大きなメニューが存在します。
メガメニューは、クリックやマウスオーバーで開くドロップダウンメニューです。
画面いっぱいにメニューを表示するため、サイト全体の構造を一覧表示したり、サムネイルを表示して分かりやすくメニュー項目を案内することができます。
またメニュー上でオススメ商品や新商品のプロモーションを行うことも可能です。
メガメニューをデフォルト機能で使用できるテーマもあり、無料テーマでは「Venture」でのみ使用が可能です。
メガメニューを作成するアプリ「Buddha Mega Menu」
Shopifyアプリの「Buddha Mega Menu」を使用することで、あらゆるテーマでメガメニューを活用することができます。
Buddha Mega Menuについて
Buddha Mega Menuは、オリジナルのメニューを作成するShopifyアプリです。名前のとおりメガメニューの作成に特化しています。
Buddha Mega Menuはメニューを作成するアプリの中でも利用者が特に多く、シンプルで直感的に操作できるUIなのでとてもオススメです。
まずは完成形のイメージを持つため、以下のサンプルサイトをご覧ください。
ご覧のとおりBuddha Mega Menuでは、様々なデザインのメインメニューを作成することができ、ユーザーが商品に辿り着くまでの導線をうまく設計することが可能です。
メニュー上に商品のカート追加ボタンを設置することや、動画やバナーを表示することもできます。
またモバイルデザインとデスクトップを分けて編集することができるので、モバイルユーザーに対しても最適な導線を設計することが可能です。
作成可能な4種類のメニュータイプ
Buddha Mega Menuは4つのタイプのメニューを作成することができます。
■ツリーメニュー
Shopifyのメニュー設定と同じように、ドロップダウンメニューを作成します。階層の数が無制限なので、通常よりもさらに階層を深くすることが可能です。
■シンプルメニュー
シンプルな一つの画面上に、メニュー項目のリストをテキストや画像、動画など様々な表示形式で掲載します。
■タブメニュー
先ほどのシンプルメニューのようにたくさんの情報をメニューに追加することができ、メニュー項目をまとめた画面をタブで切り替えて表示します。
■コンタクトメニュー
ショップ情報とお問い合わせページをメニュー上で表示します。
プランと料金
Buddha Mega Menuのプランと料金は以下のとおりです。
| フリー | メガゼン | |
|---|---|---|
| 月額利用料 | 無料 | 9.95ドル |
| 使用できるメニュータイプ | ツリー・シンプル | すべて |
| デザイン編集 | ○ | ○ |
| 画像や動画 | × | ○ |
| 動的アイコン | × | ○ |
| カート追加ボタン | × | ○ |
| ラベル | × | ○ |
| カウントダウン | × | ○ |
プランによって使用できるメニュータイプの種類に制限があります。
また有料プランではメニュー内にカート追加ボタンを設置したり、ラベルを追加することが可能になります。
その他にも、メニュー作成時に使用できるウィジェットの種類がプランによって異なります。ウィジェットについては後ほどご紹介します。
Buddha Mega Menuの設定方法
まずはコチラからアプリをインストールします。
インストールが完了したらプランを選択します。画面上部にある「see MENU example」から各プランのサンプルサイトを確認することができます。
画面を下にスクロールし、利用規約にチェックを入れてプランを選択します。
プランを選択するとBuddha Mega Menuの管理画面に移動するので、「Menu」からショップのメインメニューを作成します。
「Add item」をクリックするとポップアップが表示されるので、メインメニューに追加するメニュー項目を作成します。
Iconではメニュータイトル横に表示する「アイコン」を選択し、Nameに「メニュータイトル」を入力します。
ユーザーがメニューボタンをクリックした際に指定のページに遷移させる場合は、Select Linkでページを選択します。
メニュー項目にはラベルやカウントダウンを表示することも可能です。
同じ操作で、まずはメインメニューに表示するすべての項目を追加します。項目の追加が完了したら、各メニューの編集を行います。
追加した項目にカーソルを合わせると「三」ボタンが表示されるので、カーソルを合わせます。
そうすると以下のように4タイプ(ツリー、シンプル、タブ、コンタクト)のメニューが表示されるので、作成したいメニュータイプをクリックします。
ツリーメニューの作成
ツリーメニューを作成する場合は、メニューの下または横にある「Add item」をクリックしてメニュー項目を追加します。
各メニュー項目を追加する際に、先ほど同様に「メニュータイトル」や「遷移先のページ」を設定します。ラベルや紹介文の追加も可能です。
シンプルメニューの作成
シンプルメニューは様々なウィジェットの組み合わせて作成します。
「Add widget」をクリックすると、ウィジェット追加のポップアップが表示されるので、「メニュータイトル」や「ウィジェットの種類」を選択して設定します。
使用できるウィジェットの種類はプランによって異なります。以下の表を参考にしてください。
| フリー | メガ | メガゼン | |
|---|---|---|---|
| Menu items | ○ | ○ | ○ |
| Link Lists | ○ | ○ | ○ |
| Link Lists with Images | × | × | ○ |
| Best Selling & Newest Products | × | ○ | ○ |
| Featured items | × | × | ○ |
| Banners | × | ○ | ○ |
| Featured Videos | × | × | ○ |
フリープランで使用できるウィジェットは「Menu items(商品やコレクションなど)」と「Link Lists(リンクの文字列)」のみです。
有料プランでは動画やバナーをメニュー内に追加することができ、新商品や売れ筋商品を自動更新で表示することも可能です。
タブメニューの作成
タブメニューは、まず最初に「Add tab」をクリックして全てのタブ項目をメニューに追加します。
次に、追加したタブにカーソルを合わるとタブの内容が表示されるので、「Add widget」をクリックして、タブ内をウィジェットの組み合わせで作成します。
追加するウィジェットの編集方法は先ほどと同じです。
コンタクトメニューの作成
コンタクトメニューは画面左側にショップ情報を記載し、右側から問い合わせができるようになっています。
BUSINESS INFOの欄に「ショップの情報」や「住所」を入力します。
すべての設定が完了したら画面右上の「Save」をクリックします。これでメニューの作成は完了です。
デザインの編集
メニューの作成が完了したら最後にデザイン(主にフォントとカラー)を編集します。
画面右下にある「Add & Design MEGA MENU」をクリックすると、デザインの編集画面が別のタブで開かれます。
画面左にあるメニュー欄で各項目を編集することができます。「Desktop / Mobile」でデバイスを切り替えることができ、それぞれ分けて編集することが可能です。
デザイン編集は主にフォントのサイズやタイプ、メニューやボタンのカラーの編集を行います。画面中央にはプレビューが表示されるので、確認しながら編集することができます。
また、デザインのメニュー欄にある「Edit Submenus」では、先ほど作成したメニュータイプごとの編集が可能です。
メニューを表示する位置や1行に表示する項目の数などを設定することができます。
編集が完了したら画面右上にある「Save」をクリックします。これで完成です。
【最後に】メガメニューを活用しよう
今回はShopifyのメニュー設定についてご紹介しました。
ネットショップにおいて商品にアクセスしやすいメニューの設計はとても重要です。
またメガメニューを活用してトップページで商品を魅力的に見せることで、ユーザーの回遊率も向上し、よりブランドや商品に興味を持ってもらうことができます。
ぜひ本記事を参考に、あなたのショップでもメガメニューを活用してみてください。
