ストアのメガメニューの設定方法
メガメニューアプリを利用すると、ストアのナビゲーションメニューをすばやく作成できます。カスタマイズやパーソナライズ設定により、ストアのスタイルに合わせたメガメニューを構築できます。
このアプリでできること:
-
豊富なメニューを簡単に作成:あらかじめ用意されたテンプレートを使い、メニュー項目を無制限に追加して、大規模なメニューをすばやく構築できます。
-
デザインのカスタマイズによる独自性の強化:多彩なデザイン設定を活用して、ストアの個性を引き立てるメニューを作成できます。
-
明確で柔軟なナビゲーションの提供:顧客が目的の商品や情報にスムーズにアクセスできるよう、わかりやすく柔軟なメニューを設計できます。
-
商品の訴求と販促:特集商品や割引キャンペーンをメニュー内で目立たせ、販売促進につなげることができます。
メニューの作成
- SHOPLINEアプリストアで、メガメニューアプリをインストールできます。
- 現在サポートされているメガメニューは以下の3種類です:縦メニュー、横メニュー、タブメニュー。
-
- 縦メニュー:各メニュー項目に順次サブメニューを追加でき、最大6階層まで設定可能です。メニューは左から右に展開されます。
- 横メニュー:メニュー項目を横方向に並べて表示するスタイルです。設定ルールに従って整列されます。
- タブメニュー:「タブメニューエリア」と「横メニューエリア」で構成されます。各タブには、それぞれ対応する横型メニューを設定できます。
- 縦メニュー:各メニュー項目に順次サブメニューを追加でき、最大6階層まで設定可能です。メニューは左から右に展開されます。
- [メニューを追加]をクリックすると、ニーズに合わせて事前設定済みのメガメニューテンプレートを選択でき、ストアのメガメニューをすばやく作成できます。
メニューの編集
アプリでは、以下のようなさまざまなタイプのメニューをデザインできます。異なるメニュータイプは、それぞれ異なるスタイルで表示されます。
- テキストアイコン:タイトル、説明文、アイコン、リンク先を編集できます。リンクを設定すると、クリック時に指定のページへ移動します。
- 商品:ストア内の既存商品をメニュー項目として選択できます。商品画像、商品名、価格などが表示され、クリックすると商品ページへ移動します。
- カテゴリ:ストア内の既存カテゴリをメニュー項目として選択できます。カテゴリのカバー画像とタイトルが表示され、クリックするとカテゴリページへ移動します。
-
画像:任意の画像をアップロードし、画像の配置や幅を指定できます。自由な画像メニューをデザイン可能です。
メニュースタイルの設定
「スタイル」をクリックすると、作成したメガメニューの全体スタイルを設定できます。PC版とモバイル版のアイコンを選択し、それぞれに対応するスタイルを設定できます。
カスタムメニュースタイル(カスタムCSS)
CSSの知識があれば、カスタムCSSを追加して自由にメニューのスタイルを作成できます。「スタイル」セクションにコードを入力すると、メガメニュー全体のスタイルを反映できます。
また、階層ごとに異なるカスタムCSSを設定することも可能です。各階層のスタイルは独立しており、親メニューのスタイルが子メニューに影響を与えることはなく、子メニューも親メニューのスタイルを継承しません。
コード例
サイトでの効果:メニュー項目にマウスを載せると、項目の上下にラインが表示される。
この効果を実現するには、「スタイル」セクションに以下のカスタムCSSを追加します。
/* PC - グローバル */
/* 背景色を希望の色に変更してください */
.mega-menu-root-pc .mega-nav-title:hover span {
position: relative;
}
.mega-menu-root-pc .mega-nav-title:hover span::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}
.mega-menu-root-pc .mega-nav-title:hover span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}
/* モバイル - グローバル */
/* 背景色を希望の色に変更してください */
.mega-menu-root-mb .mega-nav-title:hover span {
position: relative;
}
.mega-menu-root-mb .mega-nav-title:hover span::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}
.mega-menu-root-mb .mega-nav-title:hover span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}
ページ上でのメニュー設定と有効化
作成したメガメニューは、以下の手順でヘッダーに反映できます。
- スタイル > テーマデフォルトを上書き へ移動し、適用方法を設定します。「すべてのテーマに適用」または「特定のテーマを指定」を選択可能です。
- アプリ内で[ストアに適用]を有効化します。
-
管理画面 > オンラインストア > デザイン に進み、[アプリ埋め込み]のメガメニューブロックを有効にします。
- 有効化後、メニューがページに反映されます。
設定データの更新
メガメニュー作成後に、商品名や価格などの設定データが更新された場合は、「データを更新」をクリックし、アプリ内の設定データを最新化してください。
メニューの翻訳
メニュー内のコンテンツを翻訳するには、右上の[翻訳]ボタンをクリックします。
翻訳先の言語を選択します。
[自動翻訳]をクリックするか、手動で入力して翻訳内容を編集します。
対応する言語は、設定 > 言語 > 多言語設定 で指定されている言語に基づきます。
アプリの非互換性について
非対応レイアウト
メニューの「分割表示」および「折りたたみ表示」はサポートされていません。これらを適用するとメニューが正しく表示されない可能性があります。
修正するには、SHOPLINE > オンラインストア > デザインに進み、[デザイン]からテーマデザインページを開き、[ヘッダー]で該当レイアウトを変更してください。
なお、ヘッダー設定を変更した場合、メガメニューのプレビューは表示されません。[保存]後に実際のストア画面で確認してください。
縦メニューの制限
縦メニューはスクロール表示に対応していません。データ項目を多く設定しすぎると表示が崩れる場合があるためご注意ください。
Brooklynテーマの制限
Brooklynテーマでは、メニュー項目を過剰に設定すると高さが制限を超えて表示が崩れる場合があります。設定する項目数は必要最小限にしてください。