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

目次

• はじめに
• Shopify ストアのパンくずリストとは
• Shopify ストアでパンくずリストを表示するメリット
  • ユーザービリティの向上
  • SEO の強化
  • サイト構造の明確化
  • バウンス率の低下
• Shopify ストアにパンくずリストを表示する方法
  • パンくずリストが実装されている Shopify テーマを選択する
  • パンくずリストを導入できる Shopify アプリをインストールする
  • 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 テーマで実装されていなくてもパンくずリストを表示させることができます。

Shopify アプリストア｜「Breadcrumbs」で絞り込み

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

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

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

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

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 ファイルで呼び出しています。

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

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

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

まとめ

本記事では、Shopify ストアのパンくずリストとはどういったものなのかやメリット、実装方法について解説しました。ぜひ、本記事を参考にパンくずリストを実装してみてください！