Shopifyのブログ記事や商品ページにパンくずリストを追加したい・・・
こういったお悩みを解決します。
手順①:パンくずリストのコードを格納するファイルを作る
下記動画を参考にして、パンくずリストのコードを書くためのファイルを準備しましょう。
動画:https://gyazo.com/f2dfd0d4a06fc811031ce15d79adb614
Shopifyの管理画面から「オンラインストア」→「テーマ」→パンくずリストを設置したいテーマを選ぶ→「コードを編集」→スニペットフォルダの中の「新しいスニペットを追加する」をクリック→「breadcrumbs」と入力し、「完了」を押す
手順②:パンくずリストを表示するコードを入れる
ファイルが準備できたので、そのファイルの中にパンくずリストのコードを書いていきましょう。
この記事は、非技術者向けなので、Shopify公式が提供しているパンくずリストのサンプルコードをそのまま使います。
上の動画のように、下記のコードをコピーして、①で作ったファイルにまるっと貼り付けてください。
See the Pen Untitled by 福水正太 (@shotafukumizu) on CodePen.
手順③:①②で作ったファイルを任意の場所に表示させる
動画のように、下記コードをテーマの中の任意の場所に貼ることで、①②で作った breadcrumbs.liquid ファイルを表示させることができます。
{% render 'breadcrumbs' %}
個人的なおすすめは、動画のように、theme.liquid 内の {{ content_for_layout }} の真上です。
手順④:位置や余白を微調整する
動画のように、表示したパンくずリストの位置が微妙な場合は、微調整してあげます。
まとめ
Shopifyのブログ記事や商品ページにパンくずリストを追加する方法を紹介しました。
この記事が、あなたのEC運営のお役に立てれば幸いです。
※こちらは、Shopifyテーマ開発に詳しくない方向けのHowtoになります
※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。
\ShopifyでEC構築を検討中の方へ/
現在、Shopify公式は無料のお試しキャンペーンを実施しています。
百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。
下記の案内ページからキャンペーンの詳細をご確認ください。