【クリエイターモード】パンくずを表示させる方法を教えてください。 – makeshop よくある質問

パンくずリストの変数タグを使用してHTMLを記述してください。

テンプレート【Complete】の初期値ソースは以下です。ご利用のテンプレートにあわせてclassなどをつけて使用してください。

※テンプレートのアップデートにともない、適用した時期によって記述が異なる場合があります。
定期的にデザインセットのバックアップをおこなってください。

■makeshopサポート　ショップデザインバックアップしてますか？！

◆ CSS

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」に記述

.breadcrumb {
  font-size: 12px;
  padding-top: 10px;
}

.breadcrumb-item {
  margin-right: 8px;
}
.breadcrumb-item::after {
  content: ">";
  margin-left: 12px;
}
.breadcrumb-item:last-child::after {
  display: none;
}

◆ 商品カテゴリー

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

◆ 商品検索結果

<!--パンくず-->
<div class="breadcrumb">
       <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
       <span class="breadcrumb-item current">検索結果</span>
</div>

または

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item current">検索結果
        （
        <{if $search.keyword}>
        キーワード：<{$search.keyword}>、
        <{/if}>
        <{if $search.category.name}>
        カテゴリ：<{$search.category.name}>
        <{else}>
        カテゴリ：すべてのカテゴリー
        <{/if}>
        <{if $search.price_low || $search.price_high}>
        、価格：<{if $search.price_low}><{$search.price_low}>円<{/if}>～<{if $search.price_high}><{$search.price_high}>円<{/if}>
        <{/if}>
        ）
    </span>
</div>

◆ 商品詳細

<!--パンくず-->
<{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}>
            <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>
        <{/section}>
        </div>
    <{/if}>
<{/section}>
<{/if}>

◆ 商品レビュー一覧

<!--パンくず-->
<div class="breadcrumb">
  <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
  <span class="breadcrumb-item current"><{$item.name|escape:html}>のレビュー一覧</span>
</div>

または

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item current"><a href="<{$item.url}>"><{$item.name}></a>のレビュー一覧</span>
</div>

◆ 商品レビュー投稿

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item current"><{$item.name|escape:html}>のレビュー投稿</span>
</div>

または

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item current"><a href="<{$item.url}>"><{$item.name}></a>のレビュー投稿</span>
</div>

◆ 買い物かご

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item">買い物かご</span>
</div>

◆ お知らせ一覧

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item">お知らせ一覧</span>
</div>

◆ お知らせ詳細

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item"><{$news.title}></span>
</div>

◆ 利用案内

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item">ご利用ガイド</span>
</div>

◆ 会社概要

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item">会社概要</span>
</div>

◆ 特定商取引法

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item">特定商取引法</span>
</div>

◆ プライバシーポリシー

<!--パンくず-->
<div class="breadcrumb">
    <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
    <span class="breadcrumb-item">プライバシーポリシー</span>
</div>

関連記事