メガメニューの作り方

このテーマにはメガ メニューのサポートが付属しており、この手順ではメニューのセットアップ方法を示します。

このページでは

メガメニューの外観

Be Yours では、次のようにコンテンツが列に配置されたメガ メニューを作成できます。

メガ メニューは、メニュー項目とプロモーションの 2 つの部分の組み合わせです。

メガメニューの設定

  1. まず、ネイティブの Shopify ナビゲーションを使用して、メニューを複数のレベルで設定する必要があります。複数のレベル (ドロップダウン) でメニューを作成する方法については、 Shopify の公式ドキュメントをご覧ください。以下は、最初のスクリーンショットのメガ メニューに対応するメニュー構造の例です。

  2. テーマ設定で、セクション リストのヘッダー(1) をクリックし、メニュー設定 (2) に移動して、上記で作成したメニューを選択し、ドロップダウン メニューの有効化設定 (3) を確認します。

  3. これまでに、メニューは単純なドロップダウンスタイルで表示されるはずです。これは、プロモーション部分がまだ設定されていないためです。このドロップダウン スタイルが気に入っていて、プロモーション部分を使用しない場合は、すべてここで完了します。プロモーションの設定を続けるには、 「メガ メニューの追加」をクリックしてメガ メニュー ブロックを追加します。

  4. [メニュー項目]設定では、メガメニューを含むメニュー項目の名前を入力するだけです。 「メニュー項目」に入力した名前は、第 1 レベルのメニュー項目のいずれかの名前と一致する必要があることに注意してください。以下は、メガメニューがBagsアイテム内に含まれている例です。

  5. メニュー項目設定では、オプションで 2 つのプロモーションにそれぞれ 2 つの画像をアップロードできます。

メガメニューブロック設定

一般設定

設定説明
メガメニューここに、メガメニューを含めるメニュー項目の名前を入力します。 「メニュー項目」に入力した名前は、第 1 レベルのメニュー項目のいずれかの名前と一致する必要があることに注意してください。
メガメニューを狭くするメガメニューのコンテナを少し狭くします。
メガメニューの画像を表示するナビゲーションの第 2 レベルの項目が画像付きのコレクションにリンクしている場合、リンクのタイトルの上に画像が表示されます。以下に例を示します。

これは、ハンドバッグアイテムが次の画像を持つコレクションにリンクされているためです。

プロモーション設定

オプションで、2 つのプロモーションに対して 2 つの画像をアップロードできます。それぞれの設定は同じです。

設定説明
画像表示したい画像。
画像比率プロモーション用の画像比率:
  • 画像に適応 (デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 1:1 の比率を使用するように画像をトリミングします。
  • ポートレート- 2:3 の比率を使用するように画像をトリミングします。
  • 風景- 3:2 の比率を使用するように画像をトリミングします。
  • ワイド- 16:9 の比率を使用するように画像をトリミングします。
画像の焦点表示されている画像の最も重要な領域を選択します。
見出しプロモーションのタイトル。
説明プロモーションの段落テキスト。
画像にテキストをオーバーレイするテキストメッセージは画像の下ではなく、画像の上にオーバーレイされます。
リンク顧客がプロモーションをクリックした場合に移動するリンク。
{{ タイトル }} に戻る