logo

Shopifyのブログ記事や商品ページにパンくずリストを追加する方法

Shopifyのブログ記事や商品ページにパンくずリストを追加する方法

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 }} の真上です。

手順④:位置や余白を微調整する

動画のように、表示したパンくずリストの位置が微妙な場合は、微調整してあげます。

参考:CSSの余白調整・余白指定方法

まとめ

Shopifyのブログ記事や商品ページにパンくずリストを追加する方法を紹介しました。

この記事が、あなたのEC運営のお役に立てれば幸いです。

※こちらは、Shopifyテーマ開発に詳しくない方向けのHowtoになります

参考:  Debutテーマ パンくずリストを表示したい

※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【150円×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。