Docy Child

ヘッダーのブロック メガメニュー関連
└ メガメニュー プロモボックス

プロモボックスは、メガメニューの追加オプションです。ドロップダウン・メニューの中にプロモーション(バナー)、ブランド、商品、ページなどを追加することができます。前のセクションで、プロモボックス用のカラムはドロップダウンメニューの左側と右側の両方に配置できることを説明しました。これを片側だけ実装することもできます。

整ったメガメニューを作成するためにはやや複雑な設定も必要になりますので、ビデオチュートリアルも合わせて参考にしてください。

またNo.6のメガメニューの基礎編からご覧ください。

メガメニュー プロモボックスの設定

それでは、プロモボックスを使ってどのような実装ができるのか、どのような表示になるのかを例で見てみましょう。 “メガメニュー” ブロックでは、 “ウィメンズ”用のメガメニューを作成しました。このメニューアイテムで作業を進めます。メガメニュー “ウィメンズ”用の新しいコンテンツブロックを追加することができ、ブロックは、「メガメニュー プロモボックス」と呼ばれます。

タイトル

ここでは、プロモボックス内のバナー画像の上に表示されるバナーのタイトルを記入することができます(任意)。

一般設定

このセクションでは、バナーをクリックしたときに必要なページにリンクする”バナーの URL” を追加することができます。バナーをクリックし、ドロップダウンリストから希望のページを選択するか、このリストに希望の遷移先がなければURLを貼り付けることができます。

画像

バナーをより魅力的に見せるために、バナー用の”画像”を追加することができます。推奨画像サイズは、1440×550ピクセルです。画像のサイズは、 “画像サイズ” の目盛りで200〜2000ピクセルの範囲で変更可能です。

“画像マスク”を追加し、その不透明度を “画像マスクの透明度” で0.1〜1.0まで選択することができます。画像マスクは、画像にかぶせるカラーカバーのようなもので、ある程度の不透明度があれば特定の色調に、不透明度が最大であれば完全に色で覆われます。

テキスト

ここでは、プロモボックスに表示するバナーのテキスト内容をカスタマイズします。追加できるテキスト行は3行です。

要素を隠したい場合はテキストやボタンの行値を削除し、改行には”<br>”を使用します。

もちろんテキストコンテンツのスタイルは”カラースタイル”で変更することができ、8つのスタイルから1つを選択することができます。

ボタン #1 - #2

プロモボックス内の各バナーには、カスタマイズ可能なボタンを2つ追加することができます。ボタンには、ボタンテキスト・ボタン URL・ボタンスタイルの3つのカスタマイズオプションがあります。

ボタンテキストには、ボタンのタイトルを書くことができます。例えば、「Shop now」、「More」などです。

ボタン URLでは、ボタンをクリックされたときにリンクさせるリンクを挿入できます。

ボタンスタイルでは、ドロップダウンリストからボタンのスタイルを選択することができます。

その他のコンテンツ

リスト

バナー用のリストコンテンツを持つページを追加するには、”ページを選択”を押して、リストから選択します。リストコンテンツはShopifyの管理画面→ページで作成することができます。

カスタム HTML

このオプションによって、プロモボックス内のテキストコンテンツ全体をページコンテンツに置き換えることができます。

ページの追加と編集の方法は、こちらをご覧ください。以下はその一例です。

ヘッダー:メガメニュー>カスタムHTML

レイアウト

ここでは、プロモボックス内のテキストのレイアウトの種類を選択することができます。 『MISEル』テーマでは、多くの種類が提供されていますので、ストアに最適なものを選択してください。そして、適切な “コンテンツの位置(デスクトップのみ)”と”コンテンツの水平調整”を選択してください。

アニメーション

このセクションでは、プロモボックスのバナー内の画像のアニメーション、位置、不透明度を調整することができます。マウスカーソルを乗せたときにイメージをアニメーションさせるには、 “ホバー時の画像移動方向設定”からご希望のオプションを選択することで設定できます。

画像の位置は、”画像の初期位置設定”で設定することができます。ドロップダウン・リストからオプションを選択してください。同様に、プロモボックス内のバナー画像に不透明度を持たせるかどうかを決めることができます。 “画像の透明化”のドロップダウンリストより、初期、ホバー時、初期&ホバー、なしの中から選択してください。

プロモボックス (その他のコンテンツ 設定)の活用例

それでは、メガメニュー”Men’s”にプロモボックスを追加し、カスタマイズした場合のイメージを見てみましょう。オプションを使用しない場合は、空白のままにします。こちらがプロモボックスの設定です。

タイトル: (空欄)

一般設定

項目 内容
バナーのURL
すべてのコレクション
画像
選択された画像
画像サイズ
400px
画像マスク
red
画像マスクの透明度
0.3

テキスト

項目 内容
テキストライン#1
セール
テキストライン#2
20%オフ
カラースタイル
スタイル#1

その他のコンテンツ

項目 内容
リスト
選択なし
カスタムHTML
選択なし

レイアウト

項目 内容
タイプ
タイプ#3(リボンタイプ)

※タイプ #3 (リボンボタン) では、ボタンは表示されません!

アニメーション

項目 内容
ホーバー時の画像移動方向設定
中央
画像の初期位置設定
なし
画像の透明化
なし

こちらの例では次のような設定をしています。

左の追加コンテンツ

項目 内容
コンテンツのタイプ
1行に1アイテム
コラムサイズ
0/12

右の追加コンテンツ

項目 内容
コンテンツのタイプ
なし
コラムサイズ
0/12

ここでは”プロモボックス” ブロックの説明のため、”タイトル画像”ブロックは削除しました。

以上の設定により、メニュー項目”Men’s”のドロップダウンメニューは、以下のようになりました。

ヘッダー:プロモボックス活用例