Shopify(ショッピファイ)メガメニューアプリ Buddha Mega Menu & Navigationを解説

Webデザインは常に進化を続けていますが、日本では2017年あたりから増えてきたメガメニューのアプリを今回紹介します。メガメニューとは、ヘッダーのメインメニューをクリックしたときに大きなサブメニューをヌルっと表示するメニュー強化機能です。商品の種類が豊富なストアの場合、トップページのメニューに商品カテゴリーをリスト表示することで、見たい商品リストにすぐに移動することができるのでとても便利な機能です。また、メガメニューにお問い合わせフォームを置くと、ページの隅っこにありがちな「お問い合わせ」のリンクを探す手間を省けますし、普段からWebメールをお使いのお客様が「お問い合わせ」のリンクをクリックしたときに Outlookが起動してイライラするということもなくせます。

Shopifyアプリストアでメガメニューを検索すると数件ヒットしますが、今回は、利用者が多く、レビューでも高評価を得ている Buddha Mega Menu & Navigation（以下、「Buddha Mega Menu」）をチョイスしました。この Buddha Mega Menuはどのテーマでも簡単にメガメニューを実現することができるようです。

Buddha Mega Menuとは

概要

Buddha Mega Menuは、オリジナルのメガメニューを作成することができる Shopifyアプリです。画像やアイコンも設定できるので様々なデザインのメガメニューを作れます。メガメニューにカートに追加するボタンを配置することもできるので、ユーザーの興味喚起だけでなく、購入までの導線とすることもできます。

プラン・料金

無料プランと月額$9.95の有料プランがあります。無料プランでは機能が制限されており、画像やボタンの表示ができないためシンプルなメニューになります。有料プランはすべての機能を利用することができます。

（出典）https://megamenu.buddhaapps.com/membership-overview

Buddha Mega Menuの設定方法

Buddha Mega Menuの設定は、最初にメニューの構成を決めて、その後にデザインを設定します。

メニュー設定方法

メインメニューの作成

Shopify管理画面のアプリ管理から Buddha Mega Menuを選択するとメニュー設定画面が開きます。

まず、メインメニューを追加するため「Add item」ボタンをクリックすると詳細画面が開きます。

詳細画面の設定は後ほど説明します。少なくとも「Name」にメニュー名、「Select Link」にリンク先を設定する必要があります。メインメニューにリンクが必要ない場合は「Select Link」を「No Link」にします。

サブメニューの作成

続いて、サブメニューを追加していきますが、その前にメニューのタイプを選択します。メニューのタイプは「Tree」、「Simple」、「Tabbed」、「Contact」の4種類の中から選択します。サブメニューが必要ない場合には「None」を選択します。

サブメニューの４タイプを簡単にまとめると次のようになります。

Tree

Treeはその名の通り、ツリー構造のメニューを作成することができます。

Buddha Mega Menuの管理画面はユーザー画面と同様のツリー表示になります。管理画面の「Add Item」や後に出てくる「Add widget」については、後ほどまとめて説明します。

Tabbed

Tabbedはサブメニューを左タブの形で表示して、右側にウィジェットという形でリンクの一覧や目玉商品の画像やプロモーション動画などを表示することができます。

管理画面はやはりユーザー画面のプレビューのような表示です。

Simple

Tabbedのタブの無いシンプルなメガメニューです。2022年現在の主流はこのタイプだと思います。

Contact

メガメニューに問合せフォームを設置することができます。メールアドレスや電話番号など、問い合わせの際に入力してほしい情報は管理画面でカスタマイズできます。後述するデザイン設定でカラー変更も可能です。

メニュー詳細の設定

Add item

メインメニューやサブメニューの「Add item」をクリックするとメニューを追加できます。

アイテムの設定画面です。

Treeタイプの場合は Description（説明）を記載することができます。

アイテム設定画面の「Icon」はメニューに表示するアイコンを設定することができます。このアイコンはメニュー名の左に表示されます。「Static Icons」は静止アイコン、「Live Icons」は動的アイコンです。動的アイコンはマウスオーバーしたときに反転するなどの動きが表現できます。

アイテム設定画面の「Name」にメニュー名を設定し、「Select Link」にはそのリンク先を指定します。リンクが必要ない場合やサブメニューを持つアイテム（親メニュー）の場合は「No link」にします。

「Label」はメニューを目立たせる「NEW」や「SALE」、「HOT」のいずれかのチップを表示することができます。

「Enable Countdown」をオンにして「Start time」と「End time」を設定すると、そのメニュー名の右側にカウントダウン表示を出すことができます。セール期間のカウントダウンを表示すると、お客様の購買欲を促す手法として使えますね。なお、指定した期間以外はカウントダウン表示が消えるだけでメニューそのものが消えるわけではありませんのでご注意ください。

「Description」にはメニュー名を補足する説明を追加することができます。

Add tab

メニュータイプに「Tabbed」を選択したとき、メガメニューにタブを追加することができます。

Add widget

メニュータイプが「Tabbed」または「Simple」の場合にウィジェットを設置できます。ウィジェットにはメニュー名の他、画像や動画などのさまざまな情報を表示することができます。

Link List

サブメニューのリストを設置できます。

Link List with images

画像付きでコレクションや商品リストを表示できます。

Featured Product

目玉商品などの任意の商品を画像付きで表示できます。ディスカウント情報は自動で表示され、さらに「カートへ追加」ボタンも表示することができます。Shopifyの商品管理で確認すると対象の商品が「Mega Menu - Featured Products」で自動コレクションされています。

Featured Collection

おすすめのコレクションを画像付きで大きく表示することができます。

Featured Blog Post

おすすめのブログを画像付きで大きく表示します。

Featured Video

おすすめの動画をサムネイル付きで表示します。

Featured Banner

バナーのように画像を並べて表示します。複数の画像を並べたときに余白ができないので、インパクトのある画像メニューが実現できます。

https://buddha-mega-menu-demo.myshopify.com/

Featured Custom

画像やリンク先を自由に設定できます。

Best Sellers

ストア内のベストセラー商品を表示できます。Shopifyの商品管理を確認すると対象の商品が「Best Selling Products」で自動コレクションされています。このベストセラーの判定はShopifyの標準機能（コレクションの商品管理で使われるソート順）であり、例えば、直近３カ月間のベストセラーといった期間を条件にするようなことは単純にはできないようです。

Newest Products

ストア内の新着商品を表示できます。ステータスがアクティブな商品を作成日の新しいものから順に表示されます。Shopifyの商品管理を確認すると対象の商品が「Newest Products」で自動コレクションされています。

ボタンの日本語設定

Buddha Mega Menuのメインメニューの「Translate」でボタンの日本語化が可能です。Shopifyの設定でストアの言語設定が日本語になっていることを確認して、Translate画面に移ってください。

「Translate menu features」をクリック。

画面下部に表示される「Original Language」と「Choose Language」の対比表で、「Choose Language」が「 ja」 になっていることを確認して、表内のテキストを変更していきます。

デザイン設定方法

Buddha Mega Menuの Menu画面で右下に表示される「Add & Design MEGA MENU!」のボタンをクリックしてデザイン画面に進みます。

デザイン設定画面の詳細

画面左側に機能メニューが表示され、右側にはプレビューが表示されます。

Go Live! : Select the menu to replace

Buddha Mega Menuを反映させるテーマを選択します。現在適用されているテーマがデフォルト表示されるので、通常は操作する必要がありません。

Can't add the Mega Menu?

Buddha Mega Menuをテーマに反映されない場合などに問合せをするためのフォームを開くことができます。こちらも通常使うことはありません。

Design

「Desktop」（パソコン）と「Mobile」（スマホ）のそれぞれのテキストやメニューに関する設定変更ができます。

Edit Submenu

メニューのタイプによりデザイン設定は異なります。

Tree

「Submenu Position」でサブメニューの配置のみが調整できます。「Left」や「Right」で固定した場合、メニューの位置やディスプレイの幅によってはメニューが表示しきれない場合があるため、通常は「Auto」がおすすめです。

Simple / Tabbed

「Submenu Columns」でサブメニューのカラム数を設定します。「Auto」または 2～5までの選択が可能です。「Submenu Width」はサブメニュー全体の幅を調整できます。「Submenu Position」はサブメニューの配置が調整できます。Treeのときのように表示が切れることはありません。

Contact

「Submenu Width」はサブメニュー全体の幅を調整できます。「Submenu Position」はサブメニューの配置が調整できます。「Left」や「Right」を選択した場合、Treeと同様、表示が切れてしまう場合があります。

Fonts

フォントを選ぶことができます。ただし、すべて欧米フォントのため日本語には反映されません。日本語フォントにカスタマイズしたい場合は、後述のとおり Liquid編集が必要です。

Submenu Colors

Text Color（テキスト色）、Background Color（背景色）、Text Hover Color（マウスオーバー時のテキスト色）を設定することができます。

Contact Menu

「Add to cart」（カートへ追加）ボタンの表示・非表示が選べます。また、メニュータイプ Contactで作成した問合せフォームの背景色を指定することができます。

デザイン変更はパソコンとスマホのそれぞれのプレビューを確認しながら設定してください。設定が完了したら、画面右上の「Save」ボタンを押下して保存します。変更が必要ない場合でも、何かしらを変更しないと「Save」ボタンが有効化されないため、そのような場合はフォントを適当に選択して、さらに元のフォントを選びなおすとよいでしょう。

Liquidを使った高度なカスタマイズ

Buddha Mega Menuのデザイン設定画面で選択できない日本語フォントを指定したい場合などは Liquidを編集する必要があります。また、Buddha Mega Menuにはアプリが自動生成する buddha-megamenu.cssというスタイルシートがありますが、これはアプリの管理画面で設定を保存するたびにリセットされてしまうため、buddha-megamenu.cssを直接編集せず、別途スタイルシート（CSSファイル）を作成して、theme.liquidのヘッダーで読み込むようにします。

一般的なメガメニューはサイトマップ的なメニューを表示することが多いですが、Buddha Mega Menuはユニバーサルデザインのアイコンや魅力的なオリジナル画像を使ったメニューレイアウトができる他、特別な商品やキャンペーンをダイレクトに表示させたり、問合せフォームを置いたり、ユニークなデザインのメガメニューを簡単に作成できるアプリです。ストアトップのメニューはストアを訪れたお客様が最初に目にする場所ですので、そこでメガメニューによる刺激的な顧客アプローチを図ることもできることでしょう。