パンくずリスト作成 コードの設定箇所について

[Kiwi_bro]

テンプレート「ENVY」を使用しています。

パンくずリストを作成したいのですが設定方法がわかりません。

linklistというコードをliquidファイルにコピペするというところまでは理解できています。

どのliquidファイルのどの位置にコピペしたらいいのかわかりません。

どなたかお教えいただけませんでしょうか。

参考にしたサイトです↓

https://hon-dana.org/online-shop/bread-crumbs-shopify/

[株式会社フルバランス]

Kiwi_broさま

はじめまして、フルバランスの園畑です。

ご質問を確認いたしました。

パンくずリストってテーマによっては導入されていないので少し厄介ですよね。。

どのファイルにコピペするかという話ですが、

基本的にヘッダーの下に表示されるかと思いますので、theme.liquidのmainタグ(<main ~~~>)の下に配置すれば良いかと存じます。

また、TOPページやカートページ等で表示したくない場合は、

下記のコードでパンくずリストを囲うと良いかと存じます(参考までに)。

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}

ここにパンくずのコード

{%- endunless -%}

上記の場合、TOP、カート、コレクションリスト、404ページでパンくずリストを非表示にしています。

ご参考になりましたでしょうか。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス　園畑

[Kiwi_bro]

フルバランス

園畑 様

とても詳しく説明してくださり、ありがとうございます。

よくわかりました。

早速設定してみたのですが、添付画像のように縦に表示されてしまいました。

スマホ版も同じです。

（横並びになっているパンくずリストはENVYでデフォルトで表示されるものです。） 

 

位置も余白がなかったりフォントも他とは異なるので修正をしたいのですが、

CSSで変更することは可能でしょうか？

その場合どのようにしたらよいかも教えていただけませんでしょうか。

また、ENVYは商品ページのみパンくずリストが表示される仕様です。

今回の目的はコレクションページや自作のページでパンくずリストを表示させることです。

ENVYでデフォルトで表示されているパンくずリストを消す方法はあるのでしょうか？

もしくは先ほど教えていただきました非表示設定のコードに商品ページを追加することはできるのでしょうか？

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}

お忙しいところ恐縮ですがご回答いただけますと幸いです。

何卒よろしくお願い申し上げます。

[Kiwi_bro]

フルバランス

園畑 様

返信方法を誤ってしまったようで再度質問させていただきます。

すぐにご返信いただきましたのに申し訳ありません。

とても詳しく説明してくださり、ありがとうございました。

よくわかりました。

早速設定してみたのですが、添付画像のように縦に表示されてしまいました。

スマホ版も同じです。

（横並びになっているパンくずリストはENVYでデフォルトで表示されるものです。） 

 

位置も余白がなかったりフォントも他とは異なるので修正をしたいのですが、

CSSで変更することは可能でしょうか？

その場合どのようにしたらよいかも教えていただけませんでしょうか。

また、ENVYは商品ページのみパンくずリストが表示される仕様です。

今回の目的はコレクションページや自作のページでパンくずリストを表示させることです。

ENVYでデフォルトで表示されているパンくずリストを消す方法はあるのでしょうか？

もしくは先ほど教えていただきました非表示設定のコードに商品ページを追加することはできるのでしょうか？

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}

お忙しいところ恐縮ですがご回答いただけますと幸いです。

何卒よろしくお願い申し上げます。