パンくずリスト の使い方

商品ページ、コレクションページ、ブログ、記事、固定ページなどで、訪問者に現在位置を示すパンくずリストを自動表示するセクションです。区切り文字、ホームリンク、テキストの見た目、PC/モバイル別余白までテーマエディターから調整できます。

目次

設定項目

パンくずリスト

表示されないテンプレート - トップページ、カートページ、コレクションリストページ、404ページでは自動的に非表示になります。

商品ページ、コレクションページ、ブログ、記事、固定ページなどで、現在位置を示すパンくずリストを自動生成します。

Copilify パンくずリスト ヘルプ パンくずリスト

コレクションの階層

階層メニュー - 管理画面「コンテンツ > メニュー」で作ったメニューを選ぶと、その入れ子(最大3階層)がそのままパンくずの親子関係になります。例: ホーム > メンズ > 時計 > 商品名。

商品が複数のコレクションに属する場合は、メニューの並び順を優先順位として親を1件だけ表示します。同じ枝の中では、より深い(具体的な)コレクションが親になります。

未設定でもそのまま動作し、その場合は商品が属する先頭のコレクション1件を表示します。パンくず専用のメニューを作れば、ストアのナビゲーションには影響しません。

Copilify パンくずリスト ヘルプ コレクションの階層

テキストの見た目

サイズ-PC(px) - PC表示時のパンくずテキストサイズを調整します。

サイズ-モバイル(px) - モバイル表示時のパンくずテキストサイズを調整します。

テキスト色 - リンクと現在ページ名の文字色を変更します。

テキストの太さ - 通常または太字を選べます。

Copilify パンくずリスト ヘルプ テキストの見た目

区切り文字

パンくずリストの区切り文字 - ホーム、コレクション、現在ページの間に表示する記号を変更します。初期値は「>」です。

Copilify パンくずリスト ヘルプ 区切り文字

ホームリンク

アイコン画像 - ホームリンクの前に表示する画像を設定します。未設定の場合はテキストのみ表示されます。

アイコン画像のサイズ(px) - ホームアイコン画像の表示サイズを調整します。

テキスト - ホームリンクとして表示する文言を変更します。

Copilify パンくずリスト ヘルプ ホームリンク

PC表示での余白

左右 - PC表示時の左右余白を調整します。

- PC表示時の上余白を調整します。

- PC表示時の下余白を調整します。

Copilify パンくずリスト ヘルプ PC表示での余白

モバイル表示での余白

左右 - モバイル表示時の左右余白を調整します。

- モバイル表示時の上余白を調整します。

- モバイル表示時の下余白を調整します。

Copilify パンくずリスト ヘルプ モバイル表示での余白

その他

背景色 - パンくずリスト部分の背景色を変更します。

最大幅(px) - パンくずリストを表示する内側コンテンツ幅の上限を設定します。

Copilify パンくずリスト ヘルプ その他

よくある質問

どのページに表示できますか?

商品ページ、コレクションページ、ブログ、記事、固定ページなどに表示できます。トップページ、カートページ、コレクションリストページ、404ページでは自動で非表示になります。

商品が複数コレクションに入っている場合はどう表示されますか?

親にするコレクションを1件だけ選んで表示します。「階層メニュー」を設定している場合はメニューの並び順が優先順位になり、同じ枝の中ではより深いコレクションが親になります。未設定の場合は先頭のコレクション1件です。

コレクションページから商品ページへ移動した場合は、実際に辿ってきたコレクションが親になります。

検索結果に出るパンくず(リッチリザルト)に対応していますか?

はい。表示しているパンくずと同じ階層を BreadcrumbList 構造化データ(JSON-LD)として自動出力します。設定は不要です。

Googleの検索結果でURLの代わりに階層が表示される「リッチリザルト」に必要なマークアップが揃います(実際に表示されるかはGoogle側の判断になります)。商品・コレクション・ブログ・記事・固定ページで出力し、検索結果ページなどでは出力しません。

ホームアイコンは必須ですか?

必須ではありません。アイコン画像を設定しない場合は、ホームリンクのテキストだけを表示できます。