Buddha

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

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

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

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン


目次[非表示]

  1. 1.Buddha Mega Menuとは
  2. 2.プラン・料金
  3. 3.メニュー設定方法
  4. 4.デザイン設定方法


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」を選択します。


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

Tree
クラシックなツリー構造のメニュー。
Simple
2022年現在、主流のメガメニュー。画像や動画を設置することもできる。
Tabbed
Simpleにタブ切り替え機能をプラス。
Contact
メインメニュー直下に問合せフォームを設置できる。



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の標準機能(コレクションの商品管理で使われるソート順)であり、例えば、直近3カ月間のベストセラーといった期間を条件にするようなことは単純にはできないようです。


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のヘッダーで読み込むようにします。


1
Shopifyのテーマ管理画面から「コードを編集」に進み、「新しいassetを追加する」で空のファイルを作成する。例として、ファイル名を buddha-megamenu-new.css とする。
2
theme.liquidの</head>の直前に下記のコードを追加する。

<link rel="stylesheet" href="{{ 'buddha-megamenu-new.css' | asset_url }}" >


3
buddha-megamenu-new.cssに下記のコードを追加する。他の日本語フォントを追加したい場合は、このfont-familyに追加してください。

ul.mm-submenu, ul.mm-submenu a {
  font-family: "Century Gothic", 'Noto Sans JP', sans-serif !important;
}



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

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

shopify構築サービスバナー


トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア
トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。

Shopify(ショッピファイ)ストア構築・制作、
運用代行について問い合わせ

Shopifyアプリ解説・紹介記事

ShopifyのECサイト制作ならトランスコスモス

トランスコスモスは、Shopifyのエンタープライズ版「Shopify Plus」の優れた成果を持つ提携企業として認定された、国内に7社しかいない(2021年9月時点)最上位の公式パートナーです。

Shopifyを使ったECサイト制作から、調査分析・戦略立案、WEB広告(SEM)、ECサイト制作、お客様サポート、受発注、フルフィルメントまで業務設計・運用代行いたします。

トランスコスモスのEC全領域を網羅するサービス

関連記事


【無料】セミナー動画視聴


EC関連サービス


数字で見るトランスコスモスの強み

お気軽に
お問い合わせください

Shopify(ショッピファイ)
ECストア構築・運用代行

トランスコスモスは日本最上位の「Shopifyプラスパートナー」企業です
ロジスティクスサービス

 記事カテゴリー

【週間ランキング】ECブログ人気記事

ロジスティクス関連 新着記事

【初心者必見!】Shopifyマニュアル

 Tag(タグ)一覧

正社員募集(求人)

 【無料】資料ダウンロード

Shopify認定パートナー企業

shopify plus partner
トランスコスモスは最上位の「Shopify Plus partner(ショッピファイプラスパートナー)」です。
Shopifyでのサイト制作ならお任せください!
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
CX事業統括
ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
トランスコスモス株式会社
企業サイト(コーポレートHP)
Global Digital Transformation Partner.
お客様企業のデジタル・トランスフォーメーション・パートナー。
shopify構築・制作・運用