[Shopify] API でパンくずリストを無料で作成する

2020年9月22日

こんにちは、ECペンギンです。

今回はSEO的にも非常に重要な『パンくずリスト』の作り方を解説していきます。ざっと調べてみるとパンくずリストを作成するShopify Appがあったりしたのですが、有料で使いにくそうというのが正直な感想でした。

またShopify APIを使ったものでも英語ソースしか見当たらなかったので日本語で解説する記事を書いていきます。

おそらくこの記事にたどり着いた人は『パンくずリスト』がどんなものなのかを、すでに理解していると思うので、説明は省きます。

ただShopify関係の英語ソース記事を探す際に役立つ知識として一つ挙げると、『パンくずリスト』は英語で『Breadcrumb navigation』と訳せます。

それでは早速、パンくずリストの作り方。

STEP1. まずパンくず用のSnippetを作成する

まずは、breadcrumb.liquidというsnippetを作成します。

Shopifyの管理画面からは

テーマ→アクション→コードを編集→ Snippetフォルダに移動→Add a new snippet→breadcrumbs（全て小文字）で作成

shopify パンくずリスト作成 snippets [参照] 公式Shopify API

これで、snippetが作成できました。Atomなど自分のエディター上で編集している方はsnippetフォルダの中にbreadcrumbs.liquidファイルを作成してください。

STEP2. 作成したbreadcrumbs.liquidファイルを編集

次にパンくずリストの内容を記述していきます。

コードはコピペでOKです。


{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="/" title="Home">Home</a>

  {% if template contains 'page' %}
    <span aria-hidden="true">›</span>
    <span>{{ page.title }}</span>

  {% elsif template contains 'product' %}
    {% if collection.url %}
      <span aria-hidden="true">›</span>
      {{ collection.title | link_to: collection.url }}
    {% endif %}
    <span aria-hidden="true">›</span>
    <span>{{ product.title }}</span>

  {% elsif template contains 'collection' and collection.handle %}
    <span aria-hidden="true">›</span>
    {% if current_tags %}
      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
      {{ collection.title | link_to: url }}
      <span aria-hidden="true">›</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
      <span>{{ collection.title }}</span>
    {% endif %}

  {% elsif template == 'blog' %}
    <span aria-hidden="true">›</span>
    {% if current_tags %}
      {{ blog.title | link_to: blog.url }}
      <span aria-hidden="true">›</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
    <span>{{ blog.title }}</span>
    {% endif %}

  {% elsif template == 'article' %}
    <span aria-hidden="true">›</span>
    {{ blog.title | link_to: blog.url }}
    <span aria-hidden="true">›</span>
    <span>{{ article.title }}</span>

  {% else %}
   <span aria-hidden="true">›</span>
   <span>{{ page_title }}</span>
  {% endif %}
</nav>
{% endunless %}

ちなみに上記コードは、page, product, collection, blog, articleのページによって表示されるパンくずリストが異なります。基本的には編集不要です。