【クリエイターモード】商品詳細ページにその商品が所属するカテゴリーを表示させることはできますか。 – makeshop よくある質問

商品詳細ページ用の、パンくずリストの変数タグを使用することで、その商品が所属しているカテゴリーを表示させることは可能です。

パンくずリストの変数タグを使用するため、パンくずの階層でカテゴリー名が表示されます。
不要な部分をCSSで非表示に指定し、調整してください。

＜表示例＞

（１）パンくずリストを「全部表示」に設定してください。

■makeshopサポート
設定かんたん！商品詳細ページのパンくずを（全て表示か、一つ表示）に切り替える方法

（２）HTML、CSSを追記してください。

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

カテゴリ―名のリンクを表示させたい位置に追記してください。

＜例＞
商品名の前または後ろなどに追記する場合は、HTML入力欄内に一度カーソルを置いた状態でキーボードのCtrlとFキーを同時に押し、表示される検索窓に

$item.name

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して商品名の変数タグを使用して記述されたソース

<{$item.name}>

を探し、その前または後ろに追記してください。

＜HTML例＞

<{if $item.breadcrumb_list_group.has_item}>
	<div class="breadcrumb-list">
	<{section name=i loop=$item.breadcrumb_list_group.list}>
	    <{if $item.breadcrumb_list_group.list[i].has_item}>
	      <div class="breadcrumb-icon-list">
	        <{section name=j loop=$item.breadcrumb_list_group.list[i].list}>
	            <span class="breadcrumb-icon"><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}>
    </div>
<{/if}>

商品詳細「CSS」欄にCSSを追記し、保存してください。

＜CSS例＞

/* breadcumb icon */
.breadcrumb-icon a:link,.breadcrumb-icon a:visited {
  color:#444444; /*文字色*/
  text-decoration: none; /*下線非表示*/
  font-size:12px; /*文字のサイズ*/
  padding: 2px 4px; /*余白調整*/
  border-radius: 3px; /*角丸*/
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border:1px #dddddd solid; /*枠線*/
  background-color:#fff; /*背景色*/
  margin-right: 5px;
  display: inline-block;
}
/*マウスオーバー*/
.breadcrumb-icon a:hover {
  font-size:12px; /*文字のサイズ*/
  padding: 2px 4px; /*余白調整*/
  border-radius: 3px; /*角丸*/
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border:1px #dddddd solid; /*枠線*/
  background-color:#f5f5f5; /*背景色*/
  color:#444444; /*文字色*/
}
.breadcrumb-icon-list span{
  display:none;
}
.breadcrumb-icon-list span:last-child{
  display:inline-block;
}
.breadcrumb-list{
  display:flex;
  margin-bottom:1em;
}

関連記事