タブ付きメガメニューの作成方法

概要Concept テーマのタブ付きメガ メニューは、インタラクティブなタブ、注目の製品、プロモーション コンテンツを含む製品カテゴリを表示することにより、ユーザー エクスペリエンスを向上させる、高度にカスタマイズ可能なナビゲーション システムです。このガイドでは、ストアのニーズに合わせてセットアップおよびカスタマイズする方法について説明します。 💡注:タブ付きメガ メニューは、 Concept v4.0.0からのみ利用可能です。古いバージョンのテーマを使用している場合は、この記事で簡素化されたメガ メニュー バージョンを確認してください。タブ付きメガメニューの設定方法1.タブ付きメガメニューの追加Shopify 管理パネルに移動します。 [オンライン ストア] > [テーマ]に移動します。 「コンセプト」テーマの「カスタマイズ」をクリックします。左側のサイドバーで、ヘッダーセクションを見つけて選択します。セクションの下で、クリックしてブロックを追加し、 [タブ付きメガ メニュー]を選択します。 2.主な設定を行う [メニュー項目]で、メガ メニューをトリガーするメニュー項目の名前 (「ショップ」など) を入力します。ボタンのラベルを入力します (例: 「すべての製品を表示」)。ボタンを非表示にするには、空白のままにします。ユーザーをコレクションやカテゴリにリダイレクトするなど、必要に応じてボタン リンクを設定します。見出し 1 (例: 「コレクション」) と見出し 2 (例: 「最も人気のある」) を定義してセクションにラベルを付けます。製品ベンダーや価格の表示など、モバイル レイアウトのオプションを切り替えます。 3.メガメニューへのタブの追加最初のスクリーンショットに見られるように、タブ付きメガ メニューは垂直レイアウトで 5 つのタブをサポートしています。各タブは、次の手順を使用して同様に構成されます。製品カテゴリの追加タブ 1の下:タブに表示されるラベルであるTargetを設定します (「ヘッドフォン」など)。 [ターゲット リンク]を選択します。これは、タブが正しく移動するように、コレクションにリンクする必要があります。このタブの下に表示する製品を選択します。デスクトップでは、画面サイズに応じて、表示される製品の数を 2 から 4 まで自動的に調整できます。ここで 4 つを超える製品を追加すると、余分なアイテムが削除されます。タブのカスタム アイコンをアップロードします。推奨サイズ: SVG または PNG形式。アイコンの幅を調整します (例: 42px)。プロモーションバナーの追加 「プロモーション 1」セクションを見つけます。プロモーション画像をアップロードします。モバイル画像の比率を調整します。見出しを設定します (例: 「バンドルを構築する」)。サブテキストを追加します (例: 「3 つ購入すると 30% 割引」)。画像上のテキストのオーバーレイのオン/オフを切り替えます。これを有効にすると、テキスト オーバーレイが画像上に移動し、より視覚的に統合されたデザインを作成できるようになります。プロモーション用のリンクを設定します。必要に応じて、タグを設定します。これにより、スクリーンショットに示すように、タグのようなラベル オーバーレイが画像に追加されます。必要に応じて、 [テキストの色] 、 [オーバーレイの色] 、および[オーバーレイの不透明度]をカスタマイズします。必要に応じて、他の 4 つのタブに対してこれらの手順を繰り返します。 6.仕上げとテストデスクトップとモバイルでメニューをプレビューします。スムーズなホバーとクリックの操作を保証します。ユーザーエクスペリエンスを向上させるために、必要に応じて設定を調整します。変更を保存し、準備ができたら公開します。結論タブ付きメガ メニューは、ナビゲーションを強化し、主要な製品を効果的に紹介する強力なツールです。このガイドに従うことで、エンゲージメントと売上を向上させる、視覚的に魅力的で使いやすいメニューを作成できます。さらに支援が必要ですコンセプト テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。以下の QR コードをスキャンして WhatsApp コミュニティに参加し、最新情報、ニュース、お知らせを入手してください。