【クリエイターモード】テンプレートShiroでヘッダーのカテゴリーに2階層目のカテゴリーを表示させることはできますか。 – makeshop よくある質問

2階層目のHTMLを追加することで、PC、スマホの両方に表示させることが可能です。

＜表示例＞

（１）2階層目のカテゴリーのHTMLを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理

モジュール名「ヘッダー」　モジュールID：$module.header

欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に

<ul class="menu-category-wrap">

をコピー＆ペーストし、Enterキーを押して以下のソースを探してください。

<ul class="menu-category-wrap">
    <{section name=i loop=$category_menu.list}>
        <li class="menu-category-item"> <a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a> </li>
    <{/section}>
</ul>

このソースに、子（２階層目）カテゴリーのHTMLを追記し、保存してください。

＜追記後＞
太字の部分を追記してください。

<ul class="menu-category-wrap">
    <{section name=i loop=$category_menu.list}>
        <li class="menu-category-item">
            <a href="<{$category_menu.list[i].url}>"><{$category_menu.list[i].name}></a>
            <!-- 2階層目-->
            <{if $category_menu.list[i].child_category.has_item}>
            <ul class="nav-child-category nav-category-list">
                <{section name=j loop=$category_menu.list[i].child_category.list}>
                <li class="nav-category-item">
                    <a href="<{$category_menu.list[i].child_category.list[j].url}>">
                        <{$category_menu.list[i].child_category.list[j].name}>
                    </a>
                </li>
                <{/section}>
            </ul>
            <{/if}>
        </li>
    <{/section}>
</ul>

（２）表示調節用のCSSを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ぺージ共通

「CSS」欄の末尾に以下をコピー＆ペーストし保存してください。

/* 2階層目 */
.nav-child-category {
  padding-left: 2.5vw;
}
.nav-child-category a {
  padding: 0 2vw;
  color: #5d737e;
  height: 10px;
}
.nav-child-category a:hover, .nav-child-category a:active {
  background-color: #f0f4f8;
}

■makeshopサポート
クリエイターモード"カテゴリーツリー"を3～5階層目まで表示したい
https://www.support.makeshop.jp/design/?p=17319

関連リンク：
折りたたんで子カテゴリーを表示させたい場合は、下記のよくある質問をご参照ください。
【クリエイターモード】テンプレートShiroのヘッダーで子カテゴリーを折りたたんで表示させる方法はありますか。

関連記事