夏のカタログ整理が完了しました。新しいコレクションが43個準備できました。それぞれが厳選された商品セットにリンクされています。Shopifyのテーマエディタを開いて、ヘッダーメガメニューセクションに移動し、各コレクションのためのブロックを追加し始めます。最初の16個はスムーズに追加できました。しかし、17個目のブロックを追加しようとして「ブロックを追加」をクリックすると、何も起こりません。ボタンがグレーアウトされています。あなたのテーマはブロック制限に達しました。そして新しいカテゴリーのうち7個がメニューに表示される方法がありません。
このシナリオは、Dawn、Prestige、Impact、Impulseなどの人気テーマを実行しているストアで毎日起こっています。各テーマはセクションあたりの最大ブロック数を独自に設定しており、その制限は成長するカタログが要求するものより低いことがしばしばあります。これらの制限がどこから来るのか、そしていつそれが本当の問題になるのかを理解することで、何時間もの不満を省き、非表示のカテゴリーによる見えない売上損失を防ぎます。
- Shopifyプラットフォームはセクションあたり最大50ブロックを許可していますが、ほとんどのテーマはより低い独自の制限を実装しています（Dawn：25、Prestige：16、Impact：20）。
- メガメニュー内の各メニュー項目、画像、見出し、リンクは通常1つのブロックを消費します。
- ストアは通常、20個以上のコレクション全体で100〜200個の商品でブロック制限に達します。
- メニューアプリはテーマのセクションアーキテクチャの外側でナビゲーションをレンダリングすることで、ブロック制限を完全にバイパスします。
ブロック制限が実際に何であるか
Shopify Online Store 2.0は、テーマがコンテンツをどのようにレンダリングするかを支配するセクションとブロックのアーキテクチャを導入しました。すべてのセクション（ヘッダー、フッター、ヒーローバナー、商品グリッド）には固定数のブロックを含めることができます。各ブロックは設定可能な1つの要素を表します。メニューリンク、画像、見出し、またはメガメニューパネル内のプロモーションバナーです。
プラットフォーム自体はセクションあたり50ブロックで上限を設定しています。これはShopifyレベルの制限で、彼らのテーマアーキテクチャ更新ログに記載されています。しかしテーマはめったに全50を許可しません。テーマデベロッパーはセクションスキーマでmax_blocks値を設定し、利用可能なブロック数を決定します。この制限の理由は様々です。
パフォーマンスの安定性。 各ブロックはDOM要素と設定データを追加します。数が多くなると、テーマエディタが遅くなり、プレビューのレンダリングに時間がかかり、経験の少ないマーチャントは混乱した管理者インターフェースに直面します。
ビジュアルデザインの仮定。 テーマデザイナーはメガメニューレイアウトを、一定数の項目を想定して構築します。16個の項目のために設計されたメガメニューは4列のレイアウトを使うかもしれません。各列が4個の項目を保持します。17個目の項目を追加すると、グリッドが壊れたり、コンテンツがファールドの下に押し出されたり、バランスの取れていないビジュアルレイアウトが作成されたりします。
品質保証のスコープ。 すべての可能なブロック構成でテーマをテストすることは高コストです。ブロックを16または20で制限することで、テーマデベロッパーはすべての可能なレイアウト組み合わせを徹底的にテストでき、それが良く見えることを保証できます。50ブロックでは、レイアウト順列の数は包括的なテストを不可能にします。
人気のあるShopifyテーマのブロック制限
Shopifyストアで一般的に使用されているテーマのブロック制限がどのように機能するかを示します。
| テーマ | 最大ブロック数（ヘッダー/メガメニューセクション） | 注記 |
|---|---|---|
| Dawn（無料） | 25ブロック | Shopifyの参照テーマ。メガメニューブロックはヘッダーの他の要素と25ブロック制限を共有します |
| Prestige（Clean Canvas） | メガメニューあたり16ブロック | 最も制限的な1つ。20個以上のカテゴリーがあるストアはすぐにこの制限に達します |
| Impact（Maestrooo） | セクションあたり20ブロック | Impactのメガメニューはネストされたブロックを使用するため、画像と見出しもブロックを消費します |
| Impulse（Archetype） | ドロップダウンあたり16メニュー項目 | Impulseは実際のメニューリンクをカウントしますが、画像ブロックと特集コレクションもスロットを消費します |
| Warehouse（Maestrooo） | 20ブロック | Impact同様で、より大規模なカタログ向けに設計されていますが、それでも上限があります |
| Symmetry（Clean Canvas） | メガメニュー列あたり12ブロック | より厳しい列ごとの制限は、大規模なカテゴリーが複数の列に分割される必要があることを意味します |
これらの数字は欺瞞的です。なぜなら、すべてのブロックがメニューリンクではないからです。ほとんどのテーマでは、単一のメガメニューパネルはブロックを使用することができます：
- メニュー項目リンク（リンクあたり1つのブロック）
- セクション見出し（見出しあたり1つのブロック）
- 特集画像またはプロモーションバナー（画像あたり1つのブロック）
- コレクションカードまたは商品スポットライト（各1つのブロック）
2つの見出し、2つのプロモーション画像、12個のコレクションリンクを持つメガメニューパネルは16ブロックを使用します。これはPrestigeの最大値です。実際に見える12個のメニューリンクのみであってもです。もう1つコレクションリンクを追加すると、制限を超えます。
ブロック制限がストアに害を及ぼしているかどうかを判断する方法
ブロック制限は特定の種類の問題を生成します。非表示のカテゴリーです。壊れたレイアウトやページ速度低下とは異なり、メニュー項目の欠落による損害は無音です。買い物客は単にメニューに表示されないカテゴリーを見つけることができず、彼らが存在を知らなかった商品について聞くことはありません。
兆候は次の通りです。
メニューが完全なカタログ構造を反映していません。 Shopifyの管理画面を開いてすべてのアクティブなコレクションをリストします。その後、ストアのナビゲーションメニューを開きます。ギャップがある場合、存在するがどのメニューにも表示されないコレクション、あなたはおそらくブロック制限に達しているか、カテゴリーを非表示にすることを意識的に選択しています。いずれにせよ、これらの非表示のカテゴリーはメニューで閲覧する買い物客（Baymard Institute研究によると、オンライン買い物客の約69%）には見えません。
制限に合わせるためのカテゴリー妥協をしています。 「その他」のような曖昧な見出しの下に無関係なコレクションをグループ化してメニュースロットを節約していますか？「ランニングシューズ」と「ウォーキングシューズ」を「アスレティックシューズ」という単一の「アスレティックシューズ」カテゴリに結合しています。これらの妥協は発見可能性と利便性をトレードしています。
メガメニューが異なるページで異なって見えます。 一部のストアオーナーは複数のメニュー構成を作成します。異なるページで異なるカテゴリ部分集合を表示して、ブロック制限を回避します。この矛盾は、メニューがどこでも同じに見えることを期待する買い物客を混乱させます。
新しいコレクションをメニューに追加するのを停止しました。 これは最も明確な信号です。新しいコレクションを作成しますが、「スペースがない」ため、ナビゲーションに追加していない場合、ブロック制限がストアの成長を積極的に制限しています。
サイト検索でカテゴリー関連用語の使用が高い場合。 買い物客が「アウトドアジャケット」や「キッチン用品」などの閲覧可能なカテゴリであるべきコレクション名を検索する場合、メニューでこれらのカテゴリを見つけることができないことを意味します。サイト検索分析を確認します。カテゴリレベルの用語が検索クエリに頻繁に表示される場合、メニューはそれらのカテゴリを効果的に表示していません。
数学：ブロック制限があなたに何をコストするか
非表示のメニュー項目の影響を定量化するにはいくつかの仮定が必要ですが、フレームワークは簡単です。
ストアに35個のアクティブなコレクションがあるが、テーマのメガメニューはブロック制限のため20個のみを表示すると仮定しましょう。つまり、15個のコレクション、つまりカタログの約43%がメインメニューから直接アクセス不可です。買い物客は依然として、検索、コレクションページの直接リンク、またはより広い親カテゴリを通じて閲覧することでこれらのコレクションに達することができますが、各代替パスはより多くの摩擦を追加します。
Baymard Instituteの研究は、メインナビゲーションで表示されていないカテゴリーが大幅に低い使用を見ることを示しています。メニューで見えるカテゴリーと比較して、通常30〜50%少ないトラフィック。これらの15個の非表示コレクションが適切に公開された場合、それぞれ月あたり平均$2,000の売上を生成し、それらを非表示にすることでトラフィックが35%削減された場合、あなたは失っています。ナビゲーション摩擦だけから、月あたり約$10,500、年間$126,000。
数字はカタログでスケーリングします。16ブロック制限に達しているストアで60個のコレクションを持つストアは、44個のコレクションを非表示にしています。保守的な推定でさえ、買い物客が単に見つけることのないカテゴリーからの潜在的な売上の大幅な損失を示唆しています。
テーマ内のブロック制限を回避する
アプリに切り替える前に、テーマの制限を拡張する正当な方法があります。
メニューの見出しと画像を統合します。 メガメニューがセクション見出しとプロモーション画像のためにブロックを使用する場合、これらのいくつかを削除することで、実際のカテゴリーリンク用のスロットを解放します。「ショッピング（カテゴリー別）」と言う見出しは、コレクションへの直接リンクであるかもしれないブロックを取得しています。買い物客はカテゴリーを見ていることを言わされる必要はありません。コンテキストは明白です。
より少ないプロモーションブロックを使用します。 メガメニューの特集商品画像と季節バナーは見栄えが良いですが、それぞれがブロックを消費します。最大カテゴリーの可視性が必要な期間（季節的な発売、セール）中は、プロモーションブロックを一時的にカテゴリーリンクで交換します。
カテゴリー階層を再構成します。 時々、本当の問題はブロック制限ではなく、過度に細かいカテゴリー構造です。「青いTシャツ」、「赤いTシャツ」、「緑のTシャツ」のための別のコレクションがある場合、それらを「Tシャツ」に統合し、色用の商品フィルターを使用することで、機能を失わずにブロック使用量を減らします。
テーマコードを編集して制限を増やします。 デベロッパーアクセスがある場合、テーマのセクションスキーマのmax_blocks値を増やすことができます。関連する.liquidセクションファイルを開き、max_blocksパラメータを見つけ、それを増やします。これは低リスクのコード変更ですが、注意してください。
- ブロックをテーマが設計した以上に増やすと、レイアウトの問題が発生する可能性があります
- テーマの更新があなたの変更を上書きする可能性があります
- テーマエディタのパフォーマンスは、より高いブロック数で低下する可能性があります
コード変更は次のようなものです。
// テーマのヘッダーセクションスキーマで
{
"name": "Mega menu",
"max_blocks": 16 // これを30または50に変更
}
これは機能しますが、解決ではなくパッチです。レイアウトは16項目用に設計されているため、30を追加するとおそらく処理が必要な予期しない問題が発生します。
メニューアプリに移動する時期
決定ポイントは、回避策を使い尽くしたとき明確です。
カテゴリーを統合しましたが、それでもブロックが不足しています。 カテゴリー構造がそれが可能な限り効率的で、それでも制限に達している場合、テーマは単純にカタログをサポートできません。
ナビゲーションとマーチャンダイジング用のブロックが必要です。 メガメニュー戦略にプロモーション画像、特集商品、完全なカテゴリーリンクが含まれている場合、ブロックをすぐに使い果たします。アプリはこれらの関心事を分離します。ナビゲーション構造はアプリ内に住んでおり、メガメニューはカテゴリー範囲を犠牲にすることなく豊かなマーチャンダイジングコンテンツを含むことができます。
カタログが季節ごとに成長します。 休日シーズン中に10〜20個のコレクションを追加し、その後削除する場合、ブロック制限内にとどまるようにメニューを常に調整することは繰り返される保守の負担です。コレクションリストから動的にカテゴリーをレンダリングするアプリは、季節的な変化を自動的に処理します。
複数のスタッフメンバーがメニューを管理する必要があります。 アプリは通常、テーマエディタのブロックシステムより使いやすいビジュアルエディタを提供します。非技術的なチームメンバーがメニュー項目を追加または再編成する必要がある場合、アプリのドラッグアンドドロップインターフェースはエラーと訓練時間を削減します。
Navi+のようなアプリはテーマのブロックアーキテクチャとは独立してナビゲーションをレンダリングします。つまり、16ブロックまたは50ブロックの制限は単純に適用されません。アプリでメニュー構造を定義し、それはストアフロントで直接レンダリングされます。テーマの組み込みヘッダーセクションはまだ存在します（ロゴ、検索、カート用）ですが、ナビゲーションレイヤーは完全にアプリによって管理されます。
切り替える前にアプリをインストールする前に現在のメニュー構造をエクスポートします（すべてのリンクとそのネストレベルをスクリーンショットまたはドキュメント化）。これはアプリで複製するためのベースラインを提供し、移行中にカテゴリーが失われないことを保証します。
テーマブロックからアプリへの移行：何を期待するか
テーマメガメニューからアプリ管理メニューへの移行は、通常、20〜50個のコレクションがあるストアに1〜3時間かかります。プロセスは以下を含みます。
- アプリをインストールして設定します。 ほとんどのメニューアプリはオンボーディングウィザードを提供し、既存のShopifyメニュー構造を読み込んでインポートします。
- コレクションをメニュー項目にマッピングします。 テーマメニューにいなかったコレクション（ブロック制限のため）のために、アプリのメニュー構造に追加します。これは非表示カテゴリーを復元するステップです。
- レイアウトを設定します。 メガメニュースタイル、列数、プロモーション要素を選択します。アプリは通常、アイテムカウントに適応する複数のレイアウトオプションを提供します。
- モバイルとデスクトップでテストします。 メニューがデバイス全体で正しくレンダリングされることを確認します。モバイルでは、メガメニューパネルサイズ、スクロール動作、タップターゲットに注意してください。
- テーマの組み込みメニューを無効化します。 ほとんどのアプリは重複メニューを避けるためにテーマのネイティブナビゲーションを非表示にするための指示を提供します。
移行中の最も一般的な問題は重複メニューです。テーマの組み込みナビゲーションがアプリのメニューの横に表示されます。これはテーマのヘッダーセクションが正しくナビゲーションを非表示にするように設定されていない場合に発生します。ほとんどのアプリはこれを処理するためのテーマ固有のドキュメントを含み、サポートチームは切り替えを支援できます。
移行後、2〜4週間の分析を監視します。変化を探してください。
- コレクションページトラフィック（以前非表示だったカテゴリーで増加すべき）
- モバイルナビゲーション使用（より多くのタップ、低いバウンスレート）
- カテゴリー用語のサイト検索ボリューム（カテゴリーがメニューで見えるようになるので、減少すべき）
数値が改善された場合（研究はブロック制限に達していたストアではそうなることを示唆しています）、アプリは元を取っています。
この記事は、Shopifyテーマのメニュー制限：メニューアプリを使うべき時期についての大きなガイドの一部です。