【Shopify】簡単3STEPでパンくずリストを実装する方法

2024年8月2日2024年9月14日

Shopifyストアにパンくずリストを追加したい…
顧客の現在位置をわかりやすく表示したい…
複雑なコード編集は避けたい…

そんなお悩みを解決する、シンプルで効果的な方法があります。

この記事では、3つのステップで、Shopifyストアにパンくずリストを簡単に追加する方法を解説します。

無料テーマでも実装可能なので、ぜひ参考にしてみてください。
この方法でShopifyストアの使いやすさを向上させ、売上アップにつなげていきましょう。

Shopifyパンくずリスト実装の3ステップ

Shopifyストアに以下の機能のパンくずリストを追加する方法を、3つのステップで解説します。

トップページとカートページを除くすべてのページでパンくずリストを表示。
商品、コレクション、ブログ、記事、一般ページに対応したパンくずリストを生成。
上下の余白（パディング）と背景色をテーマカスタマイザーから調整できます。

今回は無料テーマのDawnで解説していきます。

注意：テーマによっては、パンくずリストが既に実装されている場合がありますので確認してください。

ステップ1：テーマファイルの確認と編集

Shopify管理画面にログインし、「オンラインストア」>「テーマ」に移動します。
現在使用中のテーマの「カスタマイズ」ドロップダウンメニューから「コードを編集」を選択します。

ステップ2：パンくずリストのコード挿入

sections/breadcrumb.liquid ファイルを作成し、以下のコードを挿入します

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .breadcrumb-nav {
    background-color: {{ section.settings.background_color }};
  }
{%- endstyle -%}

{%- unless template == 'index' or template == 'cart' -%}
  <nav class="breadcrumb-nav page-width section-{{ section.id }}-padding" aria-label="breadcrumbs">
    <ol class="breadcrumb__list" role="list">
      <li class="breadcrumb__item">
        <a class="breadcrumb__link" href="{{ routes.root_url }}">ホーム</a>
      </li>
      {%- if template == 'product' -%}
        {%- if collection -%}
          <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="{{ collection.url }}">{{ collection.title }}</a>
          </li>
        {%- endif -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ product.title }}</span>
        </li>
      {%- elsif template == 'collection' and collection.handle -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ collection.title }}</span>
        </li>
      {%- elsif template == 'blog' -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ blog.title }}</span>
        </li>
      {%- elsif template == 'article' -%}
        <li class="breadcrumb__item">
          <a class="breadcrumb__link" href="{{ blog.url }}">{{ blog.title }}</a>
        </li>
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ article.title }}</span>
        </li>
      {%- elsif template == 'page' -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ page.title }}</span>
        </li>
      {%- else -%}
        <li class="breadcrumb__item">
          <span class="breadcrumb__text" aria-current="page">{{ page_title }}</span>
        </li>
      {%- endif -%}
    </ol>
  </nav>
{%- endunless -%}

{% schema %}
{
  "name": "パンくずリスト",
  "class": "section",
  "settings": [
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "上部の余白",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "下部の余白",
      "default": 36
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "背景色",
      "default": "#ffffff"
    }
  ]
}
{% endschema %}

ステップ3：スタイルのカスタマイズ

assets/breadcrumb.css ファイルを作成し、以下のCSSを追加します

.breadcrumb-nav {
  display: flex;
  align-items: center;
}

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

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item:not(:last-child)::after {
  content: '/';
  margin: 0 0.5em;
  color: rgba(var(--color-foreground), 0.55);
}

.breadcrumb__link {
  color: rgba(var(--color-link), 0.75);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: rgb(var(--color-link));
}

.breadcrumb__text {
  color: rgba(var(--color-foreground), 0.75);
}

layout/theme.liquid ファイルの <head> セクション内に、以下の行を追加してスタイルシートをリンクします

{{ 'breadcrumb.css' | asset_url | stylesheet_tag }}

同じく layout/theme.liquid ファイルで、パンくずリストを表示したい位置（通常はヘッダーの下、メインコンテンツの上）に以下のコードを追加します

{% section 'breadcrumb' %}

これらでShopifyストアにパンくずリストが実装されます。
テーマカスタマイザーから「パンくずリスト」セクションを選択することで、上部と下部の余白、および背景色を調整できます。

また、今回はヘッダーの直後に追加しましたが、フッターの直後など、任意の場所に表示可能ですので要件にあわせて調整してください！

まとめ

Shopifyストアへのパンくずリスト実装について、解説いたしました。

Dawnでパンくずリストを実装したい！というお客様は非常に多いのでぜひ参考に、実装してみてください。

このブログでは、他にもShopifyのカスタマイズについて解説していますので、そちらもあわせて参考にしてみてください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！