Zenn
🦔

Shopifyでパンくずリストを実装する方法を考察

2024/08/18に公開
Shopify
tech

はじめに

今回は、Shopify でパンくずリストを実装する方法について考察しました。

HTML・CSS でパンくずリストを実装する方法や、Liquid を用いてパンくずリストを実装する方法を考察していきます。

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

Shopify でパンくずリストを実装する定義

パンくずリストは、ウェブサイトのナビゲーションにおいて、ユーザーが現在のページの位置を直感的に把握できるようにするツールです。主に階層構造を持つサイトで利用され、ページ階層を視覚的に示すことで、ユーザーが前の階層に戻ったり、別のカテゴリーに移動したりするのを容易にします。これにより、サイトの使いやすさが向上し、ユーザーエクスペリエンスの改善やSEOの強化にもつながります。

Shopify でパンくずリストを実装するメリット

まずは、Shopify でパンくずリストを実装するメリットについて解説していきます。

せっかくパンくずリストを実装していくので、メリットを考えていきましょう。

パンくずリストは、ECサイトのナビゲーションにおいて重要な役割を果たします。Shopify でパンくずリストを実装することには、いくつかの大きなメリットがあります。以下に、その主なメリットを解説します。

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

パンくずリストを実装することで、ユーザーは現在のページの位置を簡単に把握でき、直感的なナビゲーションが可能になります。特に、多階層のカテゴリー構造を持つショップでは、ユーザーが目的の商品やページに迅速にアクセスできるため、サイトの使いやすさが向上します。

このようなパンくずリストは、ユーザーが閲覧履歴をたどるのに役立ち、迷子になることを防ぎます。

2. SEO の強化

パンくずリストは、SEO（検索エンジン最適化）の観点でも非常に有用です。Google などの検索エンジンは、パンくずリストを通じてサイトの階層構造を理解しやすくなります。これにより、検索結果にパンくずリストが表示され、ユーザーが検索結果から直接関連ページにアクセスできるようになります。

3. バウンス率の低減

パンくずリストがあることで、ユーザーはサイト内をスムーズに移動しやすくなり、ページからの早期離脱を防ぐことができます。これにより、バウンス率の低減が期待でき、コンバージョン率の向上にもつながります。

4. サイト構造の明確化

パンくずリストは、サイトの構造を視覚的に明示する役割も果たします。これにより、ユーザーだけでなく、管理者側でもサイトの階層やコンテンツの整理が容易になります。新しいコンテンツや商品を追加する際にも、サイト全体の一貫性を保つことができます。

5. モバイルユーザーへの配慮

パンくずリストは、特にモバイルデバイスを使用しているユーザーにとって便利です。画面が小さいモバイル環境でも、ユーザーは簡単に上位階層のページに戻ることができるため、快適なブラウジング体験が提供されます。

Shopify でパンくずリストを実装するデメリット

それでは次に、Shopify でパンくずリストを実装するデメリットについて考察していきましょう。

パンくずリストは、ECサイトにおいて便利なナビゲーションツールですが、Shopify で実装する際にはいくつかのデメリットも考慮する必要があります。以下に、その主なデメリットを解説します。

1. 実装の手間とコスト

Shopify テーマによっては、パンくずリストがデフォルトで実装されていない場合があります。その場合、カスタムでパンくずリストを実装する必要がありますが、これには一定の技術的スキルと時間が求められます。特に、テーマのカスタマイズが複雑な場合や、Liquid テンプレートを操作する必要がある場合、開発コストがかさむことがあります。

2. デザインの一貫性を損なう可能性

パンくずリストのデザインが、サイト全体のデザインと調和しない場合、サイトの一貫性が損なわれる可能性があります。特に、複雑なテーマやカスタムデザインを採用しているサイトでは、パンくずリストを適切にスタイリングするのが難しくなることがあります。このため、デザインの統一感を保つためには、デザイン面での細かな調整が必要です。

3. ユーザーに対する効果が限定的な場合がある

パンくずリストは、多階層のサイトでは効果的ですが、すべてのユーザーにとって必須のナビゲーションツールではありません。特に、シンプルな構造のサイトや、モバイルユーザーが多いサイトでは、パンくずリストの使用頻度が低く、実装効果が限定的になることがあります。そのため、ユーザーが実際にパンくずリストを活用するかどうかを事前に検討する必要があります。

4. ページの表示速度に影響を与える可能性

パンくずリストを実装する際、サイトのコードが複雑化することで、ページの表示速度に影響を与える可能性があります。特に、大規模なショップや多くのカテゴリーを持つサイトでは、パンくずリストの生成に時間がかかることがあり、これがユーザー体験を損なう要因となる可能性があります。

それではここから、Shopify でパンくずリストを実装する方法について考察していきます。

Shopify でパンくずリストを実装する方法

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

まずは、HTML・CSS のコードから始めていきます。

以下が、サンプルコードです。

<!-- パンくずリストの HTML -->
<nav class="breadcrumb">
  <div class="breadcrumb--wrapper">
    <ol class="breadcrumb--list">
      <li class="breadcrumb--item">
        <a class="breadcrumb--text" href="/">Home</a>
      </li>

      <!-- ページの場合 -->
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Page Title</span>
      </li>

      <!-- 商品ページの場合 -->
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <a class="breadcrumb--text" href="/collections/collection-url">Collection Title</a>
      </li>
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Product Title</span>
      </li>

      <!-- コレクションページの場合 -->
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Collection Title</span>
      </li>

      <!-- ブログの場合 -->
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <a class="breadcrumb--text" href="/blogs/blog-url">Blog Title</a>
      </li>
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Article Title</span>
      </li>

      <!-- その他のページ -->
      <li class="breadcrumb--item breadcrumb--item-current">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Other Page Title</span>
      </li>
    </ol>
  </div>
</nav>

<!-- パンくずリストの CSS -->
<style>
  .breadcrumb {
    /* 必要に応じて背景色を設定 */
  }
  
  .breadcrumb--wrapper {
    max-width: 1200px;
    padding: 0;
    margin: 0 auto;
    background-color: #f9f9f9;
  }

  .breadcrumb--list {
    margin: 0;
    padding: 0 15px;
    list-style: none;
    display: flex;
    overflow: auto;
    position: relative;
  }
  
  .breadcrumb--list::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb--item {
    display: flex;
    font-size: 16px;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .breadcrumb--text {
    display: block;
    line-height: 1.5;
    text-decoration: none;
    color: #007bff;
  }

  .breadcrumb--text-current {
    color: #333;
  }

  .breadcrumb--delimiter {
    display: block;
    line-height: 1.5;
    color: #ccc;
    margin-right: 10px;
  }
</style>

<!-- パンくずリストをページに挿入するための JavaScript -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const breadcrumbConfig = {
      displayPosition: 'header', // パンくずの表示場所 ('header' または 'footer')
      breadcrumbElm: document.querySelector('.breadcrumb'), // パンくずの要素
      mainElm: document.querySelector('main'), // テーマの main タグを取得
      isTopPage: false, // 現在トップページにいるかどうかのフラグ値
    };

    const insertBreadcrumbs = (config) => {
      const { displayPosition, breadcrumbElm, mainElm, isTopPage } = config;

      if (isTopPage) return;

      switch (displayPosition) {
        case 'header':
          mainElm.insertAdjacentElement('afterbegin', breadcrumbElm);
          break;
        case 'footer':
          mainElm.insertAdjacentElement('beforeend', breadcrumbElm);
          break;
      }
    };

    insertBreadcrumbs(breadcrumbConfig);
  });
</script>

以下のような見た目になります。

それでは、上記の HTML・CSS のサンプルコードを解説していきます。

パンくずリストのコードを解説

パンくずリストのコードについて解説をしていきます。

パンくずリストの HTML 要素について

まずは、HTML の構造から解説していきます。

<nav class="breadcrumb">
  <div class="breadcrumb--wrapper">
    <ol class="breadcrumb--list">
      <li class="breadcrumb--item">
        <a class="breadcrumb--text" href="/">Home</a>
      </li>

      <!-- ページの場合 -->
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Page Title</span>
      </li>

      <!-- 商品ページの場合 -->
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <a class="breadcrumb--text" href="/collections/collection-url">Collection Title</a>
      </li>
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Product Title</span>
      </li>

      <!-- コレクションページの場合 -->
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Collection Title</span>
      </li>

      <!-- ブログの場合 -->
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <a class="breadcrumb--text" href="/blogs/blog-url">Blog Title</a>
      </li>
      <li class="breadcrumb--item">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Article Title</span>
      </li>

      <!-- その他のページ -->
      <li class="breadcrumb--item breadcrumb--item-current">
        <span class="breadcrumb--delimiter">/</span>
        <span class="breadcrumb--text breadcrumb--text-current">Other Page Title</span>
      </li>
    </ol>
  </div>
</nav>

HTML 構造についての解説を、以下にまとめます。

  • <nav class="breadcrumb"> タグで、パンくずリスト全体をラップしています。
  • <div class="breadcrumb--wrapper"> でパンくずリストを包むことで、スタイリングや配置の調整がしやすくなっています。
  • <ol class="breadcrumb--list"> 内に <li> タグを使って各パンくずアイテムをリスト化しています。
  • breadcrumb--item クラスを使ったリストアイテムは、それぞれのナビゲーションリンクやテキストを持っています。
  • breadcrumb--delimiter クラスを使用して、パンくず間に区切り文字（例: "/”）を追加しています。

パンくずリストの CSS について

次は、CSS の要素について解説していきます。

.breadcrumb {
  /* 必要に応じて背景色を設定 */
}

.breadcrumb--wrapper {
  max-width: 1200px;
  padding: 0;
  margin: 0 auto;
  background-color: #f9f9f9;
}

.breadcrumb--list {
  margin: 0;
  padding: 0 15px;
  list-style: none;
  display: flex;
  overflow: auto;
  position: relative;
}

.breadcrumb--list::-webkit-scrollbar {
  display: none;
}

.breadcrumb--item {
  display: flex;
  font-size: 16px;
  margin-right: 10px;
  flex-shrink: 0;
}

.breadcrumb--text {
  display: block;
  line-height: 1.5;
  text-decoration: none;
  color: #007bff;
}

.breadcrumb--text-current {
  color: #333;
}

.breadcrumb--delimiter {
  display: block;
  line-height: 1.5;
  color: #ccc;
  margin-right: 10px;
}

CSS の解説を、以下にまとめます。

  • .breadcrumb クラスはパンくずリスト全体のコンテナにスタイルを適用します。
  • .breadcrumb--wrapper クラスは、パンくずリストの最大幅と背景色を設定します。
  • .breadcrumb--list クラスはリストのスタイルを定義し、フレックスボックスを使用してアイテムを横並びにします。
  • .breadcrumb--item クラスは、リストの各アイテムにスタイルを適用し、適切な余白を設定しています。
  • .breadcrumb--text クラスはリンクのスタイルを定義し、.breadcrumb--text-current クラスは現在のページのテキストスタイルを定義します。
  • .breadcrumb--delimiter クラスはパンくず間の区切り文字にスタイルを適用します。

それでは次に、パンくずリストをページに挿入するための JavaScript について解説していきます。

document.addEventListener('DOMContentLoaded', () => {
  const breadcrumbConfig = {
    displayPosition: 'header', // パンくずの表示場所 ('header' または 'footer')
    breadcrumbElm: document.querySelector('.breadcrumb'), // パンくずの要素
    mainElm: document.querySelector('main'), // テーマの main タグを取得
    isTopPage: false, // 現在トップページにいるかどうかのフラグ値
  };

  const insertBreadcrumbs = (config) => {
    const { displayPosition, breadcrumbElm, mainElm, isTopPage } = config;

    if (isTopPage) return;

    switch (displayPosition) {
      case 'header':
        mainElm.insertAdjacentElement('afterbegin', breadcrumbElm);
        break;
      case 'footer':
        mainElm.insertAdjacentElement('beforeend', breadcrumbElm);
        break;
    }
  };

  insertBreadcrumbs(breadcrumbConfig);
});
  • DOMContentLoaded イベントでページの読み込み完了を待ち、パンくずリストの設定を行います。
  • breadcrumbConfig では、パンくずリストの表示位置、要素、フラグ値などを設定します。
  • insertBreadcrumbs 関数は、breadcrumbConfig に基づいてパンくずリストを適切な場所に挿入します。
  • headerを選択した場合、main 要素の最初に挿入します。
  • footerを選択した場合、main 要素の最後に挿入します。
  • isTopPageが true の場合はパンくずリストを表示しません。

ここまでで、HTML・CSS を用いたパンくずリストの実装は終了です。

Liquid を用いたパンくずリストの実装

それでは、先ほどの HTML・CSS のパンくずリストから、Liquid のパンくずリストを作成する方法を考察していきましょう。

現在のページがトップページかどうかを判定する方法

パンくずリストは、トップページでは表示しません。

そのため、現在のページがトップページかどうかを判定する必要があります。

以下の Liquid のtemplateオブジェクトを使用することで、判別できそうです。

https://shopify.dev/docs/api/liquid/objects/template
![](https://storage.googleapis.com/zenn-user-upload/6f77f480886a-20240811.png

{
  "directory": null,
  "name": "product",
  "suffix": null
}

これで、トップページにパンくずリストを表示しない実装は完了です。

商品ページで階層構造のパンくずリストを表示する方法

商品ページで階層構造のパンくずリストを表示させるために、Liquid のproductオブジェクトを確認しましょう。

以下が、Shopify の公式ドキュメントです。

https://shopify.dev/docs/api/liquid/objects/product

以下が、productオブジェクトのサンプルコードです。

{
  "available": true,
  "collections": [],
  "compare_at_price": "25.00",
  "compare_at_price_max": "25.00",
  "compare_at_price_min": "25.00",
  "compare_at_price_varies": false,
  "content": "<h3>Are you low on health? Well we've got the potion just for you!</h3>\n<p>Just need a top up? Almost dead? In between? No need to worry because we have a range of sizes and strengths!</p>",
  "created_at": "2022-04-13 14:46:16 -0400",
  "description": "<h3>Are you low on health? Well we've got the potion just for you!</h3>\n<p>Just need a top up? Almost dead? In between? No need to worry because we have a range of sizes and strengths!</p>",
  "featured_image": {},
  "featured_media": {},
  "first_available_variant": {},
  "gift_card?": false,
  "handle": "health-potion",
  "has_only_default_variant": false,
  "id": 6786188247105,
  "images": [],
  "media": [],
  "metafields": {},
  "options": [
    "Size",
    "Strength"
  ],
  "options_by_name": {},
  "options_with_values": [],
  "price": "10.00",
  "price_max": "22.00",
  "price_min": "10.00",
  "price_varies": true,
  "published_at": "2022-04-13 14:53:34 -0400",
  "quantity_price_breaks_configured?": false,
  "requires_selling_plan": false,
  "selected_or_first_available_selling_plan_allocation": {},
  "selected_or_first_available_variant": {},
  "selected_selling_plan": null,
  "selected_selling_plan_allocation": null,
  "selected_variant": null,
  "selling_plan_groups": [],
  "tags": [
    "healing"
  ],
  "template_suffix": "",
  "title": "Health potion",
  "type": {},
  "url": {},
  "variants": [],
  "vendor": "Polina's Potent Potions"
}

上記のtitleとcollectionsを使用することで、階層構造のパンくずリストを表示できます。

同様に、コレクションんページやブログ詳細ページにおいても、Liquid のオブジェクトを参考にして条件分岐を行えば、Shopify で階層構造のパンくずリストを表示できそうですね。

しかし、非エンジニアの方には難しいかと思いますので、念のため Shopify アプリを用いてパンくずリストを実装する方法を紹介していきます。

Shopify アプリを用いてパンくずリストを実装する方法

それでは、Shopify アプリを用いてパンくずリストを実装する方法について紹介していきます。

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

以下の記事を参考にしています。

https://unreact.jp/blog/shopify-breadcrumbs

https://unblog.unreact.jp/blog/1vby-ji7og

https://unreact.jp/shopify-apps/sa-042-ur-breadcrumbs-app/guide

https://qiita.com/eijiSaito/items/38fae878e8ccd8cd1278#参考記事

以下が、Shopify 公式のアプリストアになります。

https://apps.shopify.com/ur-smart-breadcrumbs?locale=ja

それでは、こちらのアプリについて紹介していきます。

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

シンプルパンくずリスト｜お手軽 Breadcrumbsは、Shopify ストアに簡単に階層構造のパンくずリストを挿入できるアプリです。

以下のように、ストアのどのページにもパンくずリストを挿入できます。

また、Shopify のセクションのスキーマを用いて、ノーコードで見た目をカスタマイズできます。

以下のように、様々なデザインにカスタマイズできます。

安価で使いやすい日本製の Shopify パンくずアプリなので、コーディングでパンくずリストを実装するのが難しい場合には、選択肢の一つに入ってくるかと思います。

https://apps.shopify.com/ur-smart-breadcrumbs?locale=ja

最後に

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

お疲れさまでした。

参考記事

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

https://unreact.jp/blog/shopify-breadcrumbs

https://unblog.unreact.jp/blog/1vby-ji7og

https://unreact.jp/shopify-apps/sa-042-ur-breadcrumbs-app/guide

https://qiita.com/eijiSaito/items/38fae878e8ccd8cd1278#参考記事

Discussion