メガメニュー：ストアのメガメニュー設定方法

メガメニューアプリを使うと、ストアのナビゲーションメニューを素早く作成できます。カスタムでパーソナライズされた設定を通じて、ストアのスタイルに合ったメガメニューを構築できます。

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

• 事前にデザインされたテンプレートと無制限のメニュー項目を使って、大きなメニューを簡単かつ迅速に作成できます。
• さまざまなデザインカスタマイズを通じてストアのデザインを向上させ、よりユニークなストアにします。
• 明確で柔軟なナビゲーションを提供し、顧客のショッピング体験を向上させます。
• さまざまなメニュースタイルを使って、注目の商品や割引活動をプロモーションし、売上を促進します。

メニューの作成

1. SHOPLINEアプリストアで、メガメニューアプリをインストールできます。
   
2. メガメニューの作成：現在、縦型メニュー、横型メニュー、ラベルメニューの3種類のメガメニューがサポートされています。
   

• 縦型メニュー：各メニュー項目に順にサブメニューを追加でき、最大6階層のメニューが可能です。メニューは左から右に表示され、下図のようになります。
  
• 横型メニュー：横型メニューは、設定したルールに従ってメニュー項目が平面上に横方向に表示されるメニュースタイルで、下図のようになります。
  
• ラベルメニュー：ラベルメニューエリアと横型メニューエリアで構成されます。各ラベルは横型メニューの設定と連携しており、下図のようになります。
  

3. 追加するメニューオプションを選択：メニューを追加をクリックすると、ニーズに応じて事前設定されたメガメニューテンプレートを選択し、ストアのメガメニューを素早く作成できます。
   

マーケット別メニューの設定

ストアでマーケットが有効になっている場合、メガメニューは各マーケットごとに異なるメニューを設定できるため、各マーケットが独自のメニュー内容を表示できます。

エディター上部のマーケットドロップダウンで設定したいマーケットを選択します。その後、そのマーケット専用のメニュー内容、スタイル、その他の設定を行えます。完了したら保存をクリックしてください。

マーケットが独自の設定を持つようになると、デフォルト設定への変更は反映されなくなります。デフォルト設定メニューの今後の編集は、すでに独自の設定を持つマーケットには自動的に適用されません。

他のマーケットにデフォルト設定メニューを適用したい場合は、左下のワンクリックでメニューをコピーをクリックしてください。これにより、デフォルトの設定がすべてのマーケットに一括で同期されます。

メニューの修正

このアプリは、テキストアイコン、商品、カテゴリ、画像など、さまざまなメニューのデザインをサポートしています。異なるタイプのメニューは異なるスタイルで表示できます。

• テキストアイコン: テキストアイコンのタイトル、説明、アイコン、および対応するリダイレクトリンクの修正をサポートします。リンクを設定すると、メニューをクリックした際に対応するリンク先にリダイレクトされます。
• 商品: ストア内の既存の商品をメニュー項目として選択できます。メニューには対応する商品画像、商品タイトル、販売価格などの情報が表示され、クリックすると対応する商品ページにリダイレクトされます。
• カテゴリ: ストア内の既存の商品カテゴリをメニュー項目として選択できます。メニューには対応する商品カテゴリのカバー画像とカテゴリタイトルが表示され、クリックすると対応する商品カテゴリページにリダイレクトされます。
• 画像: カスタムで画像をアップロードでき、画像の位置や幅を設定してカスタム画像メニューデザインを実現できます。
  
  

メニュースタイルの設定

スタイルをクリックして、設定したメガメニューのグローバルスタイルを設定します。現在、このアプリはモバイル版とPC版の両方の対応アイコンを直接クリックしてスタイルを設定することをサポートしています。


 

カスタムメニュースタイル（カスタムCSS）

コーディングの知識がある場合は、カスタムCSSを使用して希望のメニューのスタイルを作成できます。Style セクションにカスタムCSSを追加して、メガメニューのグローバルスタイルを設定します。


メニューの各レベルに異なるカスタムCSSを追加することもできます。スタイルは独立しており、親のスタイルは子メニューに影響を与えず、子メニューは親メニューのスタイルを継承しません。

コード例

ウェブサイトの効果：メニューにマウスをホバーすると、アイテムの上下に線が表示されます。

上記の効果を実現するには、Style セクションに以下のカスタムCSSを追加してください。

/* PC - Global */
/* 背景色はお好みの色に変更してください */
.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;
}

/* Mobile - Global */
/* 背景色はお好みの色に変更してください */
.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;
}

ページ上でのメニューの設定と有効化

メガメニューを作成した後、以下の手順でヘッダーにメニューを有効化できます。

1. スタイル > テーマを上書きする に移動し、有効化方法を設定します。すべてのテーマに適用 または 上書きするテーマを指定 を選択できます。
    
2. アプリ内で ストアに適用 を有効にします。
   
   
    
3. 管理画面 > オンラインストア > デザイン に移動し、App埋め込みでメガメニューブロックを有効にします。有効化後、メニューがページに反映されます。
   
   

設定データの更新

メガメニューの作成後に設定データ（商品タイトルや販売価格など）が更新された場合は、アプリ内でデータを更新をクリックして最新の設定データを更新する必要があります。

メニューの翻訳

メニューの内容を翻訳するには、右上の翻訳ボタンをクリックしてください。

翻訳したい対象言語を選択し、次に自動翻訳をクリックするか、手動で内容を入力してください。

対応する対象言語は多言語設定に基づいています。パス：設定 > 言語 > 多言語設定

アプリとの非互換性についての紹介

1. アプリでは、メニュースプリット / メニュー閉じるのナビゲーションレイアウトはサポートされていません。これらのレイアウトを適用すると、メニューが異常に表示される可能性があります。
   SHOPLINEのオンラインストア >デザインに移動し、デザインを選択してテーマデザインページに入り、次にヘッダーを選択して対応するナビゲーションレイアウトを変更できます。
   テーマデザインでヘッダー設定を変更した後、メガメニューのプレビュー効果は表示されません。保存をクリックしてからストアに移動し、メガメニューの表示効果を確認してください。
    
2. 縦型メニューは現在スクロール表示に対応していません。そのため、幅制限を超えて異常表示が起きないように、あまり多くのデータ項目を設定しないでください。
    
3. ブルックリンテーマのテンプレートメニューでは、メニュー項目を多く設定しすぎるとメニューの高さが過剰になり異常表示が発生する可能性があります。したがって、ブルックリンテーマテンプレートの場合はメニュー項目を多く設定しないでください。