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

Kiwi_bro · ‎09-07-2022

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

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

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

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

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

参考にしたサイトです↓

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

株式会社フルバランス · ‎09-07-2022

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ボタンを押して頂ければ嬉しいです。

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

フルバランス　園畑

株式会社フルバランス（Shopify Experts）
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』株式会社フルバランス

Kiwi_bro · ‎09-07-2022

フルバランス

園畑様

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

よくわかりました。

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

スマホ版も同じです。

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

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

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

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

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

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

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

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

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

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

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

Kiwi_bro · ‎09-14-2022

フルバランス

園畑様

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

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

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