カテゴリーの本数が多いことが原因ですので、表示させたいカテゴリーを減らすことで解決が可能です。
＜対処策１：表示するカテゴリを減らす＞
商品管理 / カテゴリ設定
カテゴリの「ステータス」を「非公開」に設定すると、そのカテゴリはカテゴリ一覧には表示されなくなります。
＜対処策２：メニューにスクロールバーを出す＞
スクロールバーを出すデザインに変更します。
以下はデザイン追加の一例です。
編集する前にデザインセットのコピーボタンをクリックしてバックアップを保管し、元の状態に戻せるように準備したうえで作業をおこなってください。
■makeshopサポート
ショップデザインバックアップしてますか？！
※すでにデザインセットが5個以上ある場合は以下を参照してください。
■よくある質問
【クリエイターモード】デザインセットが5個以上あるとコピーできません。バックアップを取る方法を教えてください。
＜手順＞
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
（１）「CSS」欄の末尾に以下を追記してください。
@media screen and (min-width: 768px) {
/* カテゴリのプルダウンを画面内に収めてスクロール表示 */
.header-left-nav .header-category > .header-category-main {
max-height: calc(100vh - var(--layout-header) - 16px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* 子階層（サブカテゴリ）も同じく */
.header-left-nav .header-category > .header-category-main li > .header-category-sub {
max-height: calc(100vh - var(--layout-header) - 16px);
overflow-y: auto;
overscroll-behavior: contain;
}
}
@media screen and (max-width: 767px) {
/* メニュー本体：高さを画面内に収め、ここでスクロールさせる */
.header-left {
height: calc(100vh - var(--layout-header));
height: calc(100dvh - var(--layout-header)); /* iOS Safari 対応 */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* 子要素の二重スクロールを解除（既存の overflow-y: scroll を打ち消す） */
.header-left-nav,
.header-left-nav .header-category {
overflow-y: visible;
}
/* 背面（body）のスクロールロック */
body.is-menu-open {
overflow: hidden;
position: fixed;
width: 100%;
}
}
（２）「JavaScript」欄の末尾に以下を追記し、保存してください。
$(function () {
$('.header-hm-btn').on('click', function () {
// 既存スクリプトが .header-left に .active を付け外しするので、
// それに合わせて body にもクラスを同期させる
setTimeout(function () {
var isOpen = $('.header-left').hasClass('active');
$('body').toggleClass('is-menu-open', isOpen);
}, 0);
});
});
上記で背面のスクロールはなくなり、メニュー内のみ縦のスクロールが表示されます。
＜ご注意＞
上記はデザインの一例です。
弊社のテスト環境にて動作を確認していますが、ショップの設定が異なる場合など、すべての条件下での動作については検証をおこなっておりません。あくまでもひとつの例として参考にしてください。
上記のソースを追加してスクロールバーが出ない場合でも、JavaScriptの修正についてはサポートの対象外です。
修正が難しい場合は有料の制作代行プランのご利用を検討してください。