はじめに

今回は、Shopify で階層構造のあるパンくずリストを実装する方法について調べてみました。

Shopify アプリを用いて実装する方法と、コーディング等を利用して階層構造のあるパンくずリストを実装する方法について解説していきます。

それでは、頑張っていきましょう。

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

Shopify でパンくずリストを導入するメリットとデメリット

パンくずリストとは、ウェブサイトのナビゲーション機能の一つで、ユーザーが現在のページに至るまでの階層を表示するものです。主にユーザーエクスペリエンス（UX）の向上を目的として導入されますが、Shopify ストアにおいてもパンくずリストは重要な役割を果たします。ここでは、Shopify でパンくずリストを導入するメリットとデメリットについて考察します。

パンくずリストを導入するメリット

まずは、パンくずリストを Shopify に導入するメリットについて考えていきましょう。

1. ユーザーエクスペリエンスの向上

パンくずリストは、ユーザーが自分の現在位置を視覚的に把握しやすくすることで、ナビゲーションをスムーズにします。特に多階層のカテゴリーを持つ Shopify ストアでは、ユーザーが容易に上位階層へ戻ったり、他の関連商品を探索したりする際に役立ちます。これにより、ユーザーが迷子になるリスクを減らし、サイト内での滞在時間や閲覧ページ数を増やすことが期待できます。

2. SEO の向上

パンくずリストは、検索エンジンに対してサイトの構造を明確に伝える役割も持っています。Google などの検索エンジンは、パンくずリストをクローリングする際に、そのサイトの階層構造を理解しやすくなります。これにより、サイト全体のインデックス効率が向上し、SEO（検索エンジン最適化）の観点からも有利になります。また、パンくずリストは検索結果ページにも表示されることがあり、ユーザーがクリックする確率を高める要因にもなります。

3. 高いコンバージョン率の期待

ユーザーが簡単に別のカテゴリーページや商品ページにアクセスできるため、購入までのステップを短縮する効果があります。これは、特にリピーターや特定の商品を探しているユーザーにとって便利であり、コンバージョン率の向上に寄与する可能性があります。

パンくずリストを導入するデメリット

次に、Shopify ストアにパンくずリストを導入するデメリットについて考えていきましょう。

1. デザインの複雑化

パンくずリストを導入することで、サイトのデザインが複雑化する可能性があります。特に、モバイルユーザーにとっては画面スペースが限られているため、パンくずリストが邪魔になることも考えられます。デザインの一貫性を保ちつつ、パンくずリストを効果的に配置するには、細かな調整が必要です。

2. 実装と管理の手間

パンくずリストを正しく実装するには、サイト構造をしっかりと把握し、適切にマークアップする必要があります。これには追加の開発時間とリソースが必要となるため、特に規模の大きな Shopify ストアでは管理が複雑になる可能性があります。また、サイトの階層構造が頻繁に変更される場合、その都度パンくずリストの更新が必要になるため、メンテナンスの手間が増えることもデメリットです。

3. 必ずしも全てのユーザーに必要とは限らない

パンくずリストはユーザーエクスペリエンス向上に役立ちますが、必ずしも全てのユーザーがそれを必要としているわけではありません。直感的なナビゲーションメニューや検索機能がしっかりしている場合、パンくずリストの必要性が薄れることもあります。そのため、サイトの特性やユーザー行動を十分に理解した上で、導入を検討する必要があります。

パンくずリストを利用したマーケティング戦略

ここからは、パンくずリストを利用したマーケティング戦略について考えていきましょう。

1. サイト全体の滞在時間を延ばす

パンくずリストを利用することで、ユーザーは特定の商品のみに留まらず、関連商品やカテゴリへと簡単に移動できます。この機能は、クロスセル（関連商品の提案）やアップセル（上位商品の提案）を促進するのに非常に効果的です。ユーザーがパンくずリストを利用して別の商品ページに簡単にアクセスできるようになると、サイト全体の滞在時間が増加し、その結果として購入機会も増える可能性があります。

2. SEO とコンテンツの最適化

パンくずリストは、Google などの検索エンジンに対してサイトの階層構造を明確に伝える役割を果たします。この構造化データを活用することで、検索エンジンのインデックス精度が向上し、サイト全体の SEO 効果が高まります。さらに、パンくずリストは検索結果ページにも表示されることがあり、ユーザーにとってクリックしやすいリンクとなるため、CTR（クリック率）の向上が期待できます。

3. ユーザーの購買意欲を引き出す

パンくずリストは、ユーザーが特定のカテゴリや商品ラインに対する関心を深める助けとなります。例えば、ユーザーがあるカテゴリの商品ページを閲覧している際に、パンくずリストを使用して上位のカテゴリページに戻ると、そのカテゴリ内の他の商品にも目を向ける可能性が高まります。これにより、ユーザーがより多くの商品を検討し、最終的に複数の商品を購入する確率が上がります。

4. リピーター育成のサポート

パンくずリストをうまく活用することで、ユーザーは自分が気に入ったカテゴリや商品ページに再度簡単にアクセスできるようになります。これにより、リピーターを育成するためのツールとしてもパンくずリストは有効です。特にリピーター向けのプロモーションや限定セールを行う際には、パンくずリストを使って対象カテゴリへのアクセスを促すことができます。

5. 特定キャンペーンとの連携

パンくずリストを活用したマーケティング戦略として、特定のキャンペーンやセールと連携させる方法もあります。例えば、「期間限定セール」や「特定カテゴリの商品全品10%オフ」といったキャンペーン時に、パンくずリストを通じてユーザーが簡単に対象商品にアクセスできるようにすることで、キャンペーンの効果を最大化することができます。

それでは次に、Shopify でパンくずリストを実装する方法について解説していきます。

まずは、Shopify アプリを用いてパンくずリストを導入する方法について解説していきます。

今回紹介するアプリは、シンプルパンくずリスト｜お手軽 Breadcrumbsというアプリです。

シンプルパンくずリスト｜お手軽 Breadcrumbs について

ここからは、シンプルパンくずリスト｜お手軽 Breadcrumbsについて解説していきます。

以下が、Shopify 公式のアプリストアです。

主な機能とメリット

1. コーディング不要で簡単導入

このアプリの最大のメリットは、コーディングの知識がなくても、パンくずリストをストアに導入できる点です。初心者のストアオーナーでも、直感的な操作で美しいパンくずリストを作成し、サイトのナビゲーションを強化することができます。難しい設定や複雑なコードの記述は一切不要です。

2. デザイン性を高めるカスタマイズオプション

パンくずリストのデザインは、ストア全体のビジュアルアイデンティティに影響を与えます。このアプリでは、区切り文字の種類や表示位置、テキストサイズ、カラーリングなどを自由に設定できるため、ストアのデザインにマッチしたパンくずリストを簡単に作成できます。また、ホームリンクテキストをカスタマイズすることで、ストアの個性をさらに引き立てることが可能です。

3. デバイスに応じたレスポンシブ対応

モバイルデバイスとデスクトップPCの両方で、最適な表示を自動的に調整できる機能も、このアプリの大きな特徴です。スマートフォンでの表示とデスクトップPCでの表示を別々にカスタマイズできるため、どのデバイスからでも一貫したユーザー体験を提供することができます。これにより、訪問者がどのデバイスを使用しても快適にサイトを利用できるようになります。

それでは、実際にこちらのアプリを導入していきましょう。

アプリのインストール

まずは、アプリのインストールを行っていきましょう。

Shopify App Store の検索窓に、シンプルパンくずリスト｜お手軽 Breadcrumbsと入力しましょう。

以下のアプリリストが表示されます。

こちらのアプリは 2024年の6月にリリースされた非常に新しい Shopify アプリです。

ノーコードで簡単にパンくずリストを導入することができます。

それでは、こちらのアプリをインストールしていきましょう。

インストールをクリックしてください。

画面が遷移するので、もう一度インストールをクリックしてください。

以下のアプリの管理画面に遷移します。

ここまでで、アプリのインストールは終了です。

それでは次に、アプリブロックを Shopify ストアに導入していきましょう。

パンくずリストのアプリブロックを導入

パンくずリストのアプリブロックを Shopify ストアに導入していきましょう。

テーマに追加をクリックして、アプリブロックを自動的にShopifyストアに導入しましょう。

アプリブロックをストアに導入できました。

もし、自動追加に失敗した場合も手動で追加できます。

サイドバーの以下のアイコンをクリックしてください。

埋め込みアプリの一覧を確認できます。該当のアプリブロックを有効化しましょう。

パンくずリストのアプリブロックの編集

ここからは、パンくずリストのアプリブロックを編集していきましょう。

以下のように、様々な項目を編集できます。

いくつかの編集項目について紹介していきます。

区切り文字

挿入したパンくずリストの区切り文字を編集できます。

以下のように、区切り文字を編集可能です。

ホームのリンクテキスト

トップページのリンクテキストを編集できます。

以下のように、トップページへのリンクテキストを編集できます。

表示場所

パンくずリストの表示場所を編集できます。

ヘッダーの下とフッターの上の二種類から選択できます。

このように、様々な項目を編集できます。

ここまでで、Shopify アプリを用いてパンくずリストを編集する方法についての解説は終了です。

コーディングを利用してパンくずリストを作成する方法

以下が、パンくずリストを導入するためのサンプルコードです。

<style>
  .breadcrumbs {
    margin-bottom: 1.5em;
    font-size: 0.9em;
  }

  .breadcrumbs__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .breadcrumbs__item {
    margin-right: 0.5em;
  }

  .breadcrumbs__item:not(:last-child)::after {
    content: '/';
    margin-left: 0.5em;
    color: #ccc;
  }

  .breadcrumbs__link {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
  }

  .breadcrumbs__link:hover,
  .breadcrumbs__link:focus {
    color: #0056b3;
    text-decoration: underline;
  }

  .breadcrumbs__link[aria-current="page"] {
    color: #333;
    text-decoration: none;
    font-weight: bold;
  }
</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">
            <span aria-current="page">{{ page.title }}</span>
          </li>
        {% when 'product' %}
          {% if collection.url %}
            <li class="breadcrumbs__item">
              <a class="breadcrumbs__link" href="{{ collection.url }}">{{ collection.title }}</a>
            </li>
          {% endif %}
          <li class="breadcrumbs__item">
            <span aria-current="page">{{ product.title }}</span>
          </li>
        {% when 'collection' %}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ collection.url }}">{{ collection.title }}</a>
          </li>
          {% if current_tags %}
            <li class="breadcrumbs__item">
              <span aria-current="page">{{ current_tags | join: " + " }}</span>
            </li>
          {% endif %}
        {% when 'blog' %}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ blog.url }}">{{ blog.title }}</a>
          </li>
          {% if current_tags %}
            <li class="breadcrumbs__item">
              <span aria-current="page">{{ current_tags | join: " + " }}</span>
            </li>
          {% endif %}
        {% when 'article' %}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ blog.url }}">{{ blog.title }}</a>
          </li>
          <li class="breadcrumbs__item">
            <span aria-current="page">{{ article.title }}</span>
          </li>
        {% else %}
          <li class="breadcrumbs__item">
            <span aria-current="page">{{ page_title }}</span>
          </li>
      {% endcase %}
    </ol>
  </nav>
{% endunless %}

それでは、こちらのサンプルコードについて解説します。

まずは、CSS のスタイル設定について解説していきます。

CSS のスタイル設定

.breadcrumbs {
  margin-bottom: 1.5em;
  font-size: 0.9em;
}

.breadcrumbs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumbs__item {
  margin-right: 0.5em;
}

.breadcrumbs__item:not(:last-child)::after {
  content: '/';
  margin-left: 0.5em;
  color: #ccc;
}

.breadcrumbs__link {
  color: #007bff;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus {
  color: #0056b3;
  text-decoration: underline;
}

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

.breadcrumbs クラスは、パンくずリスト全体の余白とフォントサイズを設定します
.breadcrumbs__list クラスは、パンくずリストを水平に並べるために使用されます。display: flex; によって、各アイテムが横並びになります
.breadcrumbs__item クラスは、各パンくずリストの要素を定義します。margin-right: 0.5em; によって各アイテム間にスペースが設けられています
.breadcrumbs__item:not(:last-child)::after は、各アイテムの後に区切り文字（/）を追加します。最後のアイテムにはこの区切り文字が表示されないようにしています
.breadcrumbs__link クラスは、リンクのスタイルを定義します。デフォルトでは青色（#007bff）で、ホバー時には濃い青色（#0056b3）になります
[aria-current="page"] 属性を持つリンクは、現在表示しているページであることを示し、スタイルが異なります（通常のテキスト色と太字）

次に、Liquid テンプレートによるパンくずリストを生成してみましょう。

{% 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">
            <span aria-current="page">{{ page.title }}</span>
          </li>
        {% when 'product' %}
          {% if collection.url %}
            <li class="breadcrumbs__item">
              <a class="breadcrumbs__link" href="{{ collection.url }}">{{ collection.title }}</a>
            </li>
          {% endif %}
          <li class="breadcrumbs__item">
            <span aria-current="page">{{ product.title }}</span>
          </li>
        {% when 'collection' %}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ collection.url }}">{{ collection.title }}</a>
          </li>
          {% if current_tags %}
            <li class="breadcrumbs__item">
              <span aria-current="page">{{ current_tags | join: " + " }}</span>
            </li>
          {% endif %}
        {% when 'blog' %}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ blog.url }}">{{ blog.title }}</a>
          </li>
          {% if current_tags %}
            <li class="breadcrumbs__item">
              <span aria-current="page">{{ current_tags | join: " + " }}</span>
            </li>
          {% endif %}
        {% when 'article' %}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ blog.url }}">{{ blog.title }}</a>
          </li>
          <li class="breadcrumbs__item">
            <span aria-current="page">{{ article.title }}</span>
          </li>
        {% else %}
          <li class="breadcrumbs__item">
            <span aria-current="page">{{ page_title }}</span>
          </li>
      {% endcase %}
    </ol>
  </nav>
{% endunless %}

unless文によって、パンくずリストを表示しないテンプレート（index, cart, list-collections, 404）が指定されています。これらのテンプレートではパンくずリストは不要とされています
assignで、現在のテンプレート名を取得し、パンくずリストの構造を動的に生成します
case文で、現在のテンプレートに応じて適切なパンくずリストのリンクを生成しています
pageテンプレートの場合は、ページタイトルを表示します
product テンプレートでは、コレクションリンクと商品タイトルを表示します
collection テンプレートでは、コレクション名とタグ（存在する場合）を表示します
blogテンプレートでは、ブログ名とタグ（存在する場合）を表示します
articleテンプレートでは、ブログ名と記事タイトルを表示します

こちらのサンプルコードを利用すれば、Shopify でパンくずリストを作成することができるかと思います。

最後に

今回は、Shopify アプリとコーディングを用いて Shopify のパンくずリストを作成する方法について解説しました。

お疲れさまでした。

参考記事

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