ストアのメガメニューの設定方法 – SHOPLINE ヘルプセンター

メガメニューアプリを利用すると、ストアのナビゲーションメニューをすばやく作成できます。カスタマイズやパーソナライズ設定により、ストアのスタイルに合わせたメガメニューを構築できます。

このアプリでできること：

豊富なメニューを簡単に作成：あらかじめ用意されたテンプレートを使い、メニュー項目を無制限に追加して、大規模なメニューをすばやく構築できます。
デザインのカスタマイズによる独自性の強化：多彩なデザイン設定を活用して、ストアの個性を引き立てるメニューを作成できます。
明確で柔軟なナビゲーションの提供：顧客が目的の商品や情報にスムーズにアクセスできるよう、わかりやすく柔軟なメニューを設計できます。
商品の訴求と販促：特集商品や割引キャンペーンをメニュー内で目立たせ、販売促進につなげることができます。

メニューの作成

SHOPLINEアプリストアで、メガメニューアプリをインストールできます。
現在サポートされているメガメニューは以下の3種類です：縦メニュー、横メニュー、タブメニュー。

- 縦メニュー：各メニュー項目に順次サブメニューを追加でき、最大6階層まで設定可能です。メニューは左から右に展開されます。
- 横メニュー：メニュー項目を横方向に並べて表示するスタイルです。設定ルールに従って整列されます。
- タブメニュー：「タブメニューエリア」と「横メニューエリア」で構成されます。各タブには、それぞれ対応する横型メニューを設定できます。

［メニューを追加］をクリックすると、ニーズに合わせて事前設定済みのメガメニューテンプレートを選択でき、ストアのメガメニューをすばやく作成できます。

メニューの編集

アプリでは、以下のようなさまざまなタイプのメニューをデザインできます。異なるメニュータイプは、それぞれ異なるスタイルで表示されます。

テキストアイコン：タイトル、説明文、アイコン、リンク先を編集できます。リンクを設定すると、クリック時に指定のページへ移動します。
商品：ストア内の既存商品をメニュー項目として選択できます。商品画像、商品名、価格などが表示され、クリックすると商品ページへ移動します。
カテゴリ：ストア内の既存カテゴリをメニュー項目として選択できます。カテゴリのカバー画像とタイトルが表示され、クリックするとカテゴリページへ移動します。
画像：任意の画像をアップロードし、画像の配置や幅を指定できます。自由な画像メニューをデザイン可能です。

メニュースタイルの設定

「スタイル」をクリックすると、作成したメガメニューの全体スタイルを設定できます。PC版とモバイル版のアイコンを選択し、それぞれに対応するスタイルを設定できます。
821ad883-43f5-4348-bdab-37298ccc421f

カスタムメニュースタイル（カスタム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;
}