【クリエイターモード】テンプレートWabisabiの商品詳細ページにパンくずリストを表示したいです。方法を教えてください。

パンくずリストを表示するための記述を追加してください。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

(1)「HTML」欄

<section class="contents-section">

の後ろに以下をコピー＆ペーストしてください。

<!--パンくず-->
<{if $item.breadcrumb_list_group.has_item}>
<{section name=i loop=$item.breadcrumb_list_group.list}>
    <{if $item.breadcrumb_list_group.list[i].has_item}>
    <div class="breadcrumb">
        <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
        <{section name=j loop=$item.breadcrumb_list_group.list[i].list}>
        <{if $item.breadcrumb_list_group.list[i].list[j].is_current}>
        <span class="breadcrumb-item"><{$item.breadcrumb_list_group.list[i].list[j].name}></span>
        <{else}>
        <span class="breadcrumb-item"><a href="<{$item.breadcrumb_list_group.list[i].list[j].url}>"><{$item.breadcrumb_list_group.list[i].list[j].name}></a></span>
        <{/if}>
        <{/section}>
    </div>
    <{/if}>
<{/section}>
<{/if}> 

(2)「CSS」欄に以下をコピー＆ペーストしてください。

.contents-section {
  padding-top: 30px;
}
.item-breadcrumb {
  display: flex;
 } 
.detail {
  margin-top: 20px;
}

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

「CSS」欄の

.detail {
  margin-top: 200px;
  display: flex;
  justify-content: space-around;
}

から、

margin-top: 200px;

を削除してください。

＜削除後＞

.detail {
  display: flex;
  justify-content: space-around;
}

(4)同（全ページ共通）の「CSS」欄　

.detail {
  margin-top: 130px;
  display: block;
} 

から

margin-top: 130px;

を削除してください。

＜削除後＞

.detail {
  display: block;
} 

(5)同（全ページ共通）の「CSS」欄に以下をコピー＆ペーストしてください。
記述する位置は管理のしやすい位置か、特に決まらない場合は末尾に追記してください。

.breadcrumb {
  text-align: left;
  font-size: 0.8rem;
  padding:8px 0;
}
.breadcrumb-item {
  display: inline-block;
  margin-right: 8px; }
  .breadcrumb-item::after {
    content: ">";
    margin-left: 8px;
}
.breadcrumb-item:last-child::after {
    display: none; 
}