テンプレート「ENVY」を使用しています。
パンくずリストを作成したいのですが設定方法がわかりません。
linklistというコードをliquidファイルにコピペするというところまでは理解できています。
どのliquidファイルのどの位置にコピペしたらいいのかわかりません。
どなたかお教えいただけませんでしょうか。
参考にしたサイトです↓
Topic summary
Shopifyテーマ「ENVY」でパンくずリストの導入と設置位置の相談。linklistコードをどのLiquidファイルのどこへ置くかを質問。
提案：theme.liquidの直下に配置。不要ページではLiquidのunless条件で index／cart／list-collections／404 を除外するコード例が提示。
最新状況：設置後、パンくずが縦並びで表示され、スマホでも同様。ENVY標準のパンくず（横並び、商品ページのみ表示）とは別に、追加したパンくずが縦表示になっている。添付画像が現象把握に重要。
依頼事項：
- CSSで横並び、余白、フォントの調整方法の具体例の提示を希望。
- ENVYデフォルトのパンくずを非表示にする方法の確認。
- unless条件に商品ページも追加して非表示にできるかの可否の確認。
技術補足：LiquidはShopifyのテンプレート言語。template変数でページ種別を判定し表示／非表示を制御可能。
進捗・結論：設置位置の指針は得られたが、CSS調整と既定パンくずの無効化方法は未回答。議論は継続中。
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ボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 園畑
1 Like
フルバランス
園畑 様
とても詳しく説明してくださり、ありがとうございます。
よくわかりました。
早速設定してみたのですが、添付画像のように縦に表示されてしまいました。
スマホ版も同じです。
（横並びになっているパンくずリストはENVYでデフォルトで表示されるものです。）
位置も余白がなかったりフォントも他とは異なるので修正をしたいのですが、
CSSで変更することは可能でしょうか？
その場合どのようにしたらよいかも教えていただけませんでしょうか。
また、ENVYは商品ページのみパンくずリストが表示される仕様です。
今回の目的はコレクションページや自作のページでパンくずリストを表示させることです。
ENVYでデフォルトで表示されているパンくずリストを消す方法はあるのでしょうか？
もしくは先ほど教えていただきました非表示設定のコードに商品ページを追加することはできるのでしょうか？
{%- unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ or template == ‘404’ -%}
お忙しいところ恐縮ですがご回答いただけますと幸いです。
何卒よろしくお願い申し上げます。
フルバランス
園畑 様
返信方法を誤ってしまったようで再度質問させていただきます。
すぐにご返信いただきましたのに申し訳ありません。
とても詳しく説明してくださり、ありがとうございました。
よくわかりました。
早速設定してみたのですが、添付画像のように縦に表示されてしまいました。
スマホ版も同じです。
（横並びになっているパンくずリストはENVYでデフォルトで表示されるものです。）
位置も余白がなかったりフォントも他とは異なるので修正をしたいのですが、
CSSで変更することは可能でしょうか？
その場合どのようにしたらよいかも教えていただけませんでしょうか。
また、ENVYは商品ページのみパンくずリストが表示される仕様です。
今回の目的はコレクションページや自作のページでパンくずリストを表示させることです。
ENVYでデフォルトで表示されているパンくずリストを消す方法はあるのでしょうか？
もしくは先ほど教えていただきました非表示設定のコードに商品ページを追加することはできるのでしょうか？
{%- unless template == ‘index’ or template == ‘cart’ or template == ‘list-collections’ or template == ‘404’ -%}
お忙しいところ恐縮ですがご回答いただけますと幸いです。
何卒よろしくお願い申し上げます。