【コピペ＋簡単CSS調整】Shopifyでパンくずを追加する方法 │ カワロク　-カワのお役立ちノート-

Shopifyのデフォルトのテーマである「Dawn」には、標準ではパンくずナビゲーションがついていません。今回はパンくずを設定する方法を紹介します。

1. 1. Shopify Partnerのコードをそのままコピペ
2. 2. <main>の中へ貼り付け
3. 3. デザインの簡単な調整
4. FAQ

1. Shopify Partnerのコードをそのままコピペ

Shopify Partnerのページで、パンくずを設定するためのソースコードが公開されています。以下をまずはコピーしましょう。

<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 -%}

コピーしたソースコードをtheme.liquidに貼り付けます。Shopifyの管理画面から「オンラインストア」＞「テーマ」をクリックし、対象のテーマの「カスタマイズ」の左側の三点リーダーをクリックし、「コードの編集」をクリックしましょう。

左側に各ソースファイルがあるので、そこからtheme.liquidをクリックし開きます。

2. <main>の中へ貼り付け

上記のソースコードはtheme.liquidのどこに貼り付けてもパンくずが表示されます。細かいことを気にしなければ、自分の表示したい場所に貼り付けて、プレビューで確認するだけでもOKです。

一番無難なところに貼っておきたい、という場合は以下のコードが<main>のタグを探し、その直後へ貼り付けると良いでしょう。

<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">

3. デザインの簡単な調整

上記のコードはパンくずを自動で表示し、最低限のレイアウトで表示するためのものです。

多くの場合では、デフォルトだと少しデザインが合わず修正したい、という希望が出てくるでしょう。

自分で多少CSSが修正できる場合は、コードの上段の<style>内を修正すれば反映されます。

もう少しデザインが整っている方がいいが、CSSの修正まではちょっと、という場合は、以下のソースコードも試してみて下さい。

<style>
        .breadcrumbs {
          font-size:0.8em;
          margin: 0 0 2em;
          background-color:#f4f4f4;
        }

        .breadcrumbs a{
          color:rgba(var(--color-foreground),.75);
        }
      
        .breadcrumbs__list {
          list-style-type: none;
          margin: 0 auto 2em;
          padding: 0.5em 5rem;
        }
      
        .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 page-width">
          <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 -%}

パンくずの開始位置をメインコンテンツと同じ位置に調整し、背景をグレー、リンクの文字色を標準の青から通常の黒の文字へ変更しています。

FAQ

Q.　コレクション、商品、ブログ、全てにパンくずを出したいのですが、表示可能ですか？また、一部ではパンくずを表示しないことは可能ですか？

A.　はい、可能です。デフォルトで全てに表示されており、ソースコードの編集で一部に表示しない方法もあります。

上記ソースコードで「{%- when」を検索すると、その後に{%- when ‘page’ -%}、{%- when ‘product’ -%}などが確認できます。

pageはページ、productは商品、collectionはコレクション（カテゴリー）、blogはブログのカテゴリー（ブログのトップページ、投稿一覧が表示されるページ）、articleはブログの個別投稿のことです。

非表示にしたいものを、{%- whenから次の{%- endif -%}まで選択し（{%- whenと{%- endif -%}も含む）、全て削除すれば、対象のものにはパンくずは表示されなくなります。

【コピペ＋簡単CSS調整】Shopifyでパンくずを追加する方法

1. Shopify Partnerのコードをそのままコピペ

2. <main>の中へ貼り付け

3. デザインの簡単な調整

FAQ

ガジェットカテゴリの最新記事

【コピペ＋簡単CSS調整】Shopifyでパンくずを追加する方法

Reactの再レンダリングとは何が行われているか

海外駐在で英語が必要。どのような勉強法がおすすめか？

海外の仕事を請け負うフリーランスになるには？

BLOCKCHAINのウォレットを使ってみよう

Xiaomi(シャオミ)のスマホ「Redmi 5 Plus」の使用レビュー1【動作スピード・耐久性の評価】