サムネイル

Shopify ストアにパンくずリストを実装する方法について徹底解説!

目次

はじめに

本記事では、Shopify ストアでパンくずリストを実装する方法について解説します。Shopify ストアにパンくずリストを実装することで、ユーザービリティの向上や SEO の強化ができます。

今回は、以下の記事を参考にしています。

Shopify ストアのパンくずリストとは

Shopify ストアのパンくずリストとは、Shopify ストアのページ階層をリスト化して表示したテキストリンクのことです。

パンくずリストは、ページ上部に表示されることが多く、Shopify ストアの顧客が「どこのページを見ているのか」を視覚的にわかりやすくすることができます。

パンくず、パンくずナビ、ブレッドクラム、トピックパス、フットパスも同義として使われることが多いです。

Shopify ストアでパンくずリストを表示するメリット

Shopify ストアにパンくずリストを表示するメリットは以下の通りです。

  • ユーザービリティが向上する
  • SEO を強化できる
  • サイト構造の明確化できる
  • バウンス率を低下できる

Shopify ストアにパンくずリストを表示するメリットの詳細についてそれぞれ解説します。

ユーザービリティの向上

Shopify のパンくずリストは顧客に現在位置を明示し、サイト内のナビゲーションを容易にします。これにより、顧客は迷うことなく、必要な情報や商品に素早くアクセスできます。

SEO の強化

Shopify のパンくずリストは Google などの検索エンジンにサイト構造を伝えるため、SEO に好影響を与えます。検索結果ページにパンくずリストが表示されることで、クリック率の向上にも繋がります。

サイト構造の明確化

Shopify のパンくずリストは、Shopify ストアの階層構造を視覚的に表示するため、顧客がサイト内でどのように移動しているかを容易に把握できます。これにより、サイトの使いやすさが向上します。

バウンス率の低下

ユーザビリティの向上はサイト滞在時間の延長に寄与し、結果としてバウンス率が低下します。顧客が求める情報に簡単にたどり着けると、サイト内でのアクション(購入、お問い合わせ等)に結びつきやすくなります。

Shopify ストアにパンくずリストを表示する方法

Shopify ストアにパンくずリストを表示する方法は以下の通りです。

  • パンくずリストが実装されている Shopify テーマを選択する
  • パンくずリストを導入できる Shopify アプリをインストールする
  • Shopify テーマのコードを編集する

Shopify でパンくずリストを出す方法についてそれぞれ詳細を解説します。

パンくずリストが実装されている Shopify テーマを選択する

Shopify ストアにパンくずリストを表示する方法に、パンくずリストが実装されている Shopify テーマを選択する方法があります。

パンくずリストが実装されている Shopify テーマを選択することで、コーディングやアプリを導入することなく、パンくずリストを表示できます。

パンくずリストが実装されたテーマを選択する際は、「Breadcrumbs」で絞り込んで探すと手間を省くことができます。

Shopify テーマストア|「Breadcrumbs」で絞り込み

パンくずリストを導入できる Shopify アプリをインストールする

Shopify ストアにパンくずリストを表示する方法に、パンくずリストを導入できる Shopify アプリをインストールする方法があります。

Shopify アプリを導入することで、プログラミングの知識や Shopify テーマで実装されていなくてもパンくずリストを表示させることができます。

こちらの「シンプルパンくずリスト|お手軽 Breadcrumbs」は、ストアにノーコードでデザイン性の高いパンくず機能を追加できるおすすめのアプリです。

シンプルパンくずリスト|お手軽 Breadcrumbs

このアプリを使えば、コーディング不要でデザイン性の高いパンくずアプリを追加できます。区切り文字、ホームリンクテキスト、表示位置、文字サイズ、色など様々な要素をカスタマイズできます。さらに、スマートフォンとデスクトップPCで表示を切り替えることもできます。

無料お試し期間もございますので、ご興味のある方はこちらからインストールしてみてください。
また、こちらでより詳しいアプリの使い方を解説しています。

「シンプルパンくずリスト|お手軽 Breadcrumbs」を利用すれば、ストアのどのページにもパンくずを表示させられます。

どのページにもパンくずを挿入できる

こちらのアプリでは、ノーコードでパンくずの見た目を自由にカスタマイズできます。

ノーコードで見た目をカスタマイズ
さまざまなデザインにカスタマイズ

それでは、「シンプルパンくずリスト|お手軽 Breadcrumbs」を使ってストアにパンくずを実装する方法を解説していきます。

アプリのインストール

それでは、実際にアプリのインストールを行なっていきましょう。

ストア管理画面左下の「設定」をクリックします。

ストア管理画面左下の「設定」をクリック

ストアの管理画面の「アプリと販売チャネル」画面に表示されている「Shopify App Store」をクリックして、Shopify App Store に移動します。

アプリと販売チャネルの「Shopify App Store」をクリック

検索窓に、「シンプルパンくずリスト|お手軽 Breadcrumbs」と入力してください。以下の画像のアプリをクリックします。

「シンプルパンくずリスト|お手軽 Breadcrumbs」と入力

「インストール」ボタンをクリックし、ストアにアプリを追加しましょう。マーチャント用のアカウント(実際に物販などで運用しているアカウント)ですと、月額$3.99 でご利用いただけます。インストール後、7 日間は無料でご利用いただけます。

「インストール」ボタンをクリック

「インストール」ボタンをクリックすると以下の画面に遷移します。右下の「インストール」ボタンをクリックして、アプリをインストールしましょう。

右下の「インストール」ボタンをクリック

以下の管理画面が表示されます。

管理画面が表示

アプリをテーマに追加

アプリをテーマに追加していきます。

自動でアプリをテーマに追加

管理画面の「設定」ページの「テーマにアプリを追加」セクションでアプリをテーマに追加します。

「テーマにアプリを追加」セクションでアプリをテーマに追加

追加したいテーマを選択し、「テーマに追加」ボタンをクリックします。

「テーマに追加」ボタンをクリック

これでテーマにアプリを追加できます。
忘れないように、右上の「保存する」ボタンをクリックしておきましょう。

右上の「保存する」ボタンをクリック

手動でアプリをテーマに追加

手動でアプリをテーマに追加します。

まず、テーマカスタイマイズ画面に移動してください。

※「シンプルパンくずリスト|お手軽 Breadcrumbs」と入力」は、TOP ページ以外に挿入可能です。

管理画面の「設定」ページの「テーマにアプリを追加」セクションから行います。

「テーマにアプリを追加」セクションでテーマカスタイマイズ画面に移動

「テーマをプレビュー」ボタンをクリックします。

「テーマをプレビュー」ボタンをクリック

以下のような商品ページに遷移します。

商品ページに移動

以下の画像の左側にある埋め込みアプリアイコンをクリックします。

埋め込みアプリアイコンをクリック

アプリを有効化してください。忘れないように「保存する」ボタンをクリックしましょう。

アプリを有効化

以上でアプリを使ってストアにパンくずを追加できました。

また、「シンプルパンくずリスト|お手軽 Breadcrumbs」と入力」の詳しいカスタマイズ方法はこちらからご確認いただけます。

Shopify テーマのコードを編集する

Shopify ストアにパンくずリストを表示する方法に、Shopify テーマのコードを編集する方法があります。

Shopify テーマのコードを編集してパンくずリストを表示するは以下の通りです。

  1. breadcrumbs.liquid ファイルを作成
  2. パンくずリストのコードを貼り付け
  3. 表示箇所でパンくずリストのスニペットを呼び出す
  4. パンくずリストの表示確認

こちらの記事では Shopify ストアを GitHub と連携させて、テーマを編集する方法をより詳しく解説しています。
Shopify で作られているサイトを見分ける方法 3 選を徹底解説!

1. breadcrumbs.liquid ファイルを作成

パンくずリストを追加したいテーマのコード編集画面に移動します。
テーマのコード編集画面

「新しいスニペットを追加する」をクリックして、スニペットディレクトに breadcrumbs.liquid ファイルを作成します。

「新しいスニペットを追加する」をクリック

ファイルを作成

2. パンくずリストのコードを貼り付け

breadcrumbs.liquid ファイルに下記のコードを貼り付けます。

<style>
  .breadcrumbs {
    margin: 0 0 2em;
  }

  .breadcrumbs__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumbs__item {
    display: inline-block;
  }

  .breadcrumbs__item:not(:last-child):after {
    border-style: solid;
    border-width: .10em .10em 0 0;
    content: '';
    display: inline-block;
    height: .20em;
    margin: 0 .20em;
    position: relative;
    transform: rotate(45deg);
    vertical-align: middle;
    width: .20em;
  }

  .breadcrumbs__link {
    text-decoration: underline;
  }

  .breadcrumbs__link[aria-current="page"] {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
  }

  .breadcrumbs__link[aria-current="page"]:hover,
  .breadcrumbs__link[aria-current="page"]:focus {
    text-decoration: underline;
  }
</style>

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="/">Home</a>
    </li>
    {%- case t -%}
      {%- when 'page' -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
        </li>
      {%- when 'product' -%}
        {%- if collection.url -%}
          <li class="breadcrumbs__item">
            {{ collection.title | link_to: collection.url }}
          </li>
        {%- endif -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
        </li>
      {%- when 'collection' and collection.handle -%}
        {%- if current_tags -%}
          <li class="breadcrumbs__item">
            {{ collection.title | link_to: collection.url }}
          </li>
          <li class="breadcrumbs__item">
            {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
            <a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
          </li>
        {%- else -%}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
          </li>
        {%- endif -%}
      {%- when 'blog' -%}
        {%- if current_tags -%}
          <li class="breadcrumbs__item">
            {{ blog.title | link_to: blog.url }}
          </li>
          <li class="breadcrumbs__item">
            {%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
            <a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
          </li>
        {%- else -%}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
          </li>
        {%- endif -%}
      {%- when 'article' -%}
        <li class="breadcrumbs__item">
          {{ blog.title | link_to: blog.url }}
        </li>
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
        </li>
      {%- else -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
        </li>
    {%- endcase -%}
  </ol>
</nav>
{%- endunless -%}

編集後のスニペット画面

3. 表示箇所でパンくずリストのスニペットを呼び出す

任意の場所で、breadcrumbs.liquid スニペットを呼び出します。

{% render breadcrumbs %} で呼び出すことができます。

本記事では、theme.liquid ファイルで呼び出しています。

theme.liquid でファイルを呼び出す

4. パンくずリストの表示確認

オンラインストアで、表示を確認してください。

オンラインストアで、表示を確認する

パンくずリストの作成方法は Shopify 公式サイトにも記載されています。

まとめ

本記事では、Shopify ストアのパンくずリストとはどういったものなのかやメリット、実装方法について解説しました。また、「シンプルパンくずリスト|お手軽 Breadcrumbs」を利用することで、誰でも簡単にパンくずを実装することができます。
ぜひ、本記事を参考にパンくずリストを実装してみてください!

おすすめ Shopify アプリ

シンプルブログタグ絞り込み|お手軽タグ一覧挿入のアイコン

シンプルブログタグ絞り込み|お手軽タグ一覧挿入

シンプルなブログ絞り込みアプリ。ストアにタグによるブログ絞り込み機能を簡単に導入できます。

シンプル会員商品割引|お手軽ログイン商品セール設定のアイコン

シンプル会員商品割引|お手軽ログイン商品セール設定

シンプルな日本製の商品割引アプリ。ログインしている顧客を対象とした商品割引を簡単に実現できます。

シンプルボリュームディスカウント|お手軽まとめ買い割引のアイコン

シンプルボリュームディスカウント|お手軽まとめ買い割引

商品毎に、割引テーブルに応じたまとめ買い割引を行えます。

シンプルノベルティ|お手軽ギフト特典のアイコン

シンプルノベルティ|お手軽ギフト特典

シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。

シンプルおひとり様一点限りの購入制限設定のアイコン

シンプルおひとり様一点限りの購入制限設定

シンプルな日本製のおひとり様一点限りの購入制限アプリ。商品毎に、おひとり様一点限りの購入制限を行えます。

シンプル期間限定セール|お手軽バーゲンセールのアイコン

シンプル期間限定セール|お手軽バーゲンセール

「シンプル期間限定セール|お手軽バーゲンセール」は、ストアの全商品に対して期間限定セールを簡単に実現できるアプリです。

シンプルVIP会員商品割引|お手軽VIP商品セール設定のアイコン

シンプルVIP会員商品割引|お手軽VIP商品セール設定

シンプルな日本製の条件に応じた商品割引アプリ。特別な顧客を対象とした商品割引を簡単に実現できます。

シンプル決済カスタマイズ|お手軽条件ごとの決済方法のアイコン

シンプル決済カスタマイズ|お手軽条件ごとの決済方法

シンプルな日本製の決済カスタマイズアプリ。チェックアウト画面で、特定の条件に基づいて、決済方法の非表示を行えます。

シンプル配送カスタマイズ|お手軽条件ごとの配送方法のアイコン

シンプル配送カスタマイズ|お手軽条件ごとの配送方法

シンプルな日本製の配送カスタマイズアプリ。指定した条件下で特定の配送方法を非表示にできます。

シンプルクラウドファンディング|お手軽自社クラファンのアイコン

シンプルクラウドファンディング|お手軽自社クラファン

シンプルなクラウドファンディングアプリ。商品毎にクラウドファンディングを実現できます。

シンプル会員初回注文割引|お手軽初回ログインセール設定のアイコン

シンプル会員初回注文割引|お手軽初回ログインセール設定

シンプルな日本製の条件に応じた注文割引アプリ。ログインしている顧客を対象とした初回購入時の注文割引を簡単に実現できます。

シンプル顧客タグ注文割引|顧客タグ BtoB 割引のアイコン

シンプル顧客タグ注文割引|顧客タグ BtoB 割引

シンプルな日本製の注文割引アプリ。顧客タグに応じて注文を割引したり、無料にしたりできます。

シンプル会員初回送料割引|お手軽初回ログイン送料無料のアイコン

シンプル会員初回送料割引|お手軽初回ログイン送料無料

シンプルな日本製の条件に応じた送料割引アプリ。ログインしている顧客を対象とした初回購入時の配送料割引を簡単に実現できます。

シンプル会員送料割引|お手軽ログイン送料無料のアイコン

シンプル会員送料割引|お手軽ログイン送料無料

シンプルな日本製の会員配送料割引アプリ。ログイン状態に応じて配送料を割引できます。

シンプル会員注文割引|お手軽ログインセール設定のアイコン

シンプル会員注文割引|お手軽ログインセール設定

シンプルな日本製の注文割引アプリ。顧客のログイン状態に応じて注文を自動割引できる。

シンプルセット商品在庫連携|お手軽セット商品管理の自動化のアイコン

シンプルセット商品在庫連携|お手軽セット商品管理の自動化

シンプルな日本製のセット商品在庫連携アプリ。在庫連携したセット商品販売を簡単に実現できます。

シンプルVIP注文割引|お手軽VIP会員セール設定のアイコン

シンプルVIP注文割引|お手軽VIP会員セール設定

シンプルな日本製の条件に応じた注文割引アプリ。特別な顧客を対象とした注文割引を簡単に実現できます。

シンプル延長保証|お手軽保証付き商品販売のアイコン

シンプル延長保証|お手軽保証付き商品販売

シンプルな保証付与アプリ。商品毎に保証付与ができます。

シンプルVIP送料割引|お手軽VIP会員送料無料のアイコン

シンプルVIP送料割引|お手軽VIP会員送料無料

シンプルな日本製の条件に応じた送料割引アプリ。特別な顧客を対象とした配送料割引を簡単に実現できます。

シンプル追従カート|追従購入ボタン(Buy Button)のアイコン

シンプル追従カート|追従購入ボタン(Buy Button)

シンプルな追従カートアプリ。ストアに追従カートを簡単に導入できます。

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料のアイコン

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料

シンプルな日本製の送料割引アプリ。顧客タグに応じて配送料を割引したり、無料にしたりできます。

シンプルパンくずリスト|お手軽 Breadcrumbsのアイコン

シンプルパンくずリスト|お手軽 Breadcrumbs

カスタマイズ性の高いパンくずをストアに表示できる!

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事