Shopifyのコレクションで「カテゴリー」を作る【ECサイト制作ビギナー】

by TAKADA

｜ 11867 PV ｜ 2022.12.12

favorite_border

Shopifyで商品登録をしていると、カテゴリーごとの一覧ページが欲しい、という場面が結構出てきます。和菓子屋なら「羊羹」、アパレルなら「セーター」など、お客様も欲しい物がありそうなカテゴリーから見ますよね。

今回はShopifyのコレクション機能を使って、カテゴリー別の一覧ページを作る方法を紹介します。専用のページテンプレートを作るので、特集など複数の用途でコレクションを作りたい時にも活用できます。

制作ストア・今回の目標

制作内容の詳細

コレクションを作成する

コレクションのテンプレートを作る
カテゴリー代わりのコレクションを作成

コード編集とカスタマイズ

コレクションのテンプレートを見てみる
カテゴリー表示専用のセクションを作成
セクションを作り込む
ホームページをカスタマイズ

制作ストア・今回の目標

Shopifyで架空の和菓子屋『江戸屋』のECサイトを制作する、という想定です。
テーマはShopifyデフォルトテーマ“Dawn”をベースにカスタマイズしています。

詳細は、下記記事を参照してください。

Skillhubブログ

Shopifyの狭い商品説明部分をカスタマイズ！【ECサイト制作ビギナー】

今回の目標は「カテゴリー別の一覧ページを作る」です。
以下のことができるようになります。

コレクションを使って一般的なECのような“カテゴリー”を作る
コレクションに合わせた、複数のテーマテンプレートを作成・設定する
テーマカスタマイズ画面から追加・削除が不可能なセクションを作る

制作内容の詳細

Shopifyでは商品カテゴリーや商品タイプを登録しても、その一覧ページは自動生成されません。例えば、砂糖菓子（琥珀糖や金平糖など）だけを一覧表示したい場合、コレクションの機能を使って商品をグループ化する必要があります。

ですが、コレクションは特集を組むときにも使いますよね。
そこで、カテゴリー別一覧として使うコレクションは、専用のテンプレートを使ってちょっと見た目を変えます。完成イメージは下図です。

そして、ストアのトップページには、各カテゴリーへのリンクを作ります。
購入したい商品がある程度絞れているユーザーは、目的の商品を探しやすくなるでしょう。

Shopifyのコレクションは、商品をグループ化する機能。
今回は「カテゴリー」の役割を持つコレクションを作りますが、紹介する方法は特集などにも活用できます。購入ユーザーが欲しい物を見つけやすくする・イチオシ商品へ目を向けてもらいやすくする、どちらにも役立ちます。

コレクションを作成する

コレクションのテンプレートを作る

最初に“カテゴリー”として使うコレクション用のテンプレートを作りましょう。

これは、コレクション毎にテンプレートを選ぶ必要があるためです。
後からでも変更できますが、1つずつテンプレートの設定をし直すのは面倒。なので、初めからテンプレートを分ける想定の場合は、先に作っておきましょう。

テーマのコード編集画面を開きます。
テンプレートのすぐ下にある「新しいテンプレートを追加する」をクリック。

作成するテンプレートはcollectionを選択します。
ファイル名はcollection.任意のワード.json。任意のワード部分には、そのテンプレートの目的や特徴を入れると良いです。今回は「category」にしました。

完了ボタンをクリックすると、ファイルが作成されます。

これで新しいテンプレートの作成は完了。
左上のアイコン（閉じる）で、コード編集画面を終了してください。

カテゴリー代わりのコレクションを作成

1.商品登録から、商品タイプを設定

左メニューから商品管理を開きます。
登録している商品名をクリックし、編集画面を開いてください。

商品整理というグループ内の商品タイプ欄に入力します。
見本では「琥珀糖」と入力しました。
※商品カテゴリー欄は設定しても、しなくても、構いません。

保存するボタンを押して、変更を保存してください。

2.自動コレクションを作成する

商品管理 > コレクションを開きます。
右上の「コレクションを作成する」から作成画面を開いてください。

以下1～5までを入力・設定していきます。

１.コレクションのタイトル
２.コレクションの説明

コレクションのタイトル、カテゴリー名として使う言葉を入力します。
説明は非必須。ですが、説明文も入れるデザインなので、入力しておきましょう。適当な文言を長めに入れておくと、長文でも表示が崩れないかも確認できます。

３.コレクションの種類

コレクションの種類は、自動を選択します。
下部では、自動的に商品をコレクションに加える条件が設定できます。
商品タイプが“琥珀糖”の商品を登録しました。

複数の商品タイプを登録したい場合は「別の条件を追加」で出来ます。

４.コレクションの画像

コレクションの画像は、コレクションのアイキャッチ/サムネイルのようなもの。
コレクションのイメージビジュアルや、コレクションを代表する商品の画像などを登録すると良いでしょう。

画像アップロードは、点線内をクリック、もしくはファイルを点線内にドラッグ・アンド・ドロップすると行うことができます。

コレクション画像には、以下の写真素材を使わせていただきました。
上から眺める琥珀糖の写真素材 - ぱくたそ

５.テーマテンプレート

このコレクションを表示するテンプレートを選びます。
最初に作ったテンプレート（category）を選んでください。

１～５まで設定したら、保存するボタンをクリック。
コレクションを作成してください。

コード編集とカスタマイズ

作成したコレクションを使って、表示をカスタマイズします。

コレクションのテンプレートを見てみる

テーマのカスタマイズをする前に、Dawnデフォルトのコレクションテンプレート、テンプレートで使われているセクションを見てみましょう。

コレクションの中から、新しく作成した「category」を選びます。

作成しただけで手を加えていないので、現在のcategory（collection.category.json）は、デフォルトのコレクション（collection.json）の複製状態です。
作りたいレイアウトと見比べてみると、特徴やカスタマイズ箇所が見えてきます。

カスタマイズが必要なのは、コレクションバナーのセクションですね。

なお、コレクションバナーのセクションが削除できないのは、セクションのschemaに"presets": []の記述がないためです。presetsが書かれていないセクションは、カスタマイズ画面からの追加・削除ができません。

カテゴリー表示専用のセクションを作成

今回は学習も兼ねて“コレクションバナー”と同様の、カスタマイズ画面からの追加・削除ができないセクションを作ってみましょう。カテゴリーの役割を果たすコレクションテンプレートでのみ使えるセクションを作るイメージです。

セクションファイルの新規作成

“コレクションバナー”の代わりに表示するセクションを新規作成します。

コード編集画面から、新しいセクションを追加。
ファイル名は main-collection-categorytop.liquid とします。

とりあえず、nameだけ分かりやすいよう変更して保存します。

テンプレートファイルから読み込む

最初に作成した、カテゴリーに利用するためのコレクションのテンプレートファル（collection.category.json）を開きます。

赤い線を引いた部分で、読み込むセクションファイルを指定しています。
main-collection-bannerからmain-collection-categorytopに変更しましょう。
青い線で囲った部分は削除してください。

　↓

カスタマイズ画面を開いて、読み込むセクションが切り替わっているか確認します。

商品グリッドの上が、自作した「トップセクション」になっていれば成功。
あとはトップセクション、 main-collection-categorytop.liquidの中身を作っていくだけです。

セクションを作り込む

カテゴリー表示用コレクションの、ページトップ部分になるセクション（トップセクション/main-collection-categorytop.liquid）を作り込んでいきましょう。

1.ざっくりと表示を作る

セクションのデザイン、Liquidを使って出力する必要がある情報を整理します。

今回の場合、必要な情報とLiquidのコードは以下3つです。

コレクションの画像 → {{ collection.image }}
コレクションのタイトル → {{ collection.title }}
コレクションの説明 → {{ collection.description }}

HTML、CSSと組み合わせて書いてみましょう。

collection.imageは、imgタグで書き出すようにimg_urlフィルターを使います。
collection.titleは、escapeフィルターを使ってエスケープ処理をします。
これは特殊文字が含まれていても、タグとして認識されないようにするためです。

main-collection-categorytop.liquid

<div class="collection-categorytop">
  <img src="{{ collection.image | img_url: 'master' }}">
  <div class="collection-categorytop__inner page-width">
    <h1>
      {{ collection.title | escape }}
    </h1>
    {{ collection.description }}
  </div>
</div>

style.css

.collection-categorytop{
  height: 35vh;
  min-height: 380px;
  position: relative;
  overflow: hidden;
}

.collection-categorytop img,
.collection-categorytop__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: auto;
}

.collection-categorytop img{
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.65;
}

.collection-categorytop__inner{
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

保存して、コレクションページの表示を確認します。

大体イメージしたレイアウトになっていますが、スマホ幅だとタイトルが消えています。
これは、設定した高さの中に、説明文が収まらないほど長いことが原因。
説明文表示の対応を考えてみましょう。

2.説明文の文字数を制限する

説明は、どこまでも長い文を打ち込めます。
更に、画像やテーブルなんかも挿入できてしまいます。

ですので、以下２つの設定を追加して対応します。

画像上の場合は、レイアウトが崩れないよう文字数を制限する
図や表を入れて説明を作り込みたい場合、画像下に表示する

まずは、1つめの文字数制限を作りましょう。
Liquidのtruncateフィルターを使って、最大の文字数を設定します。
合わせてstrip_htmlという、文字列からすべてのHTMLタグを削除するフィルターも同時に記述します。これはstrip_htmlが無いと、文字数のカウントがうまく出来ず、エラー表示が出てしまう可能性があるためです。

{{ collection.description | strip_html | truncate: 170 }}

スマホ幅でも、タイトル+説明文が見きれず表示できていればOK。
truncateの文字数や.collection-categorytopの高さは、表示を見ながら調整してください。

3.説明の表示位置を選択可能にする

次に、説明の表示位置をカスタマイズ画面から選択できるようにします。
schemaで選択肢を作ります。

main-collection-categorytop.liquid

{% schema %}
  {
    "name": "トップセクション",
    "settings": [
      {
        "type": "paragraph",
        "content": "説明文が長い時、文字以外を使用している場合は画像下がおすすめです。"
      },
      {
        "type": "radio",
        "id": "desc_position",
        "label": "説明の表示位置",
        "options": [
          {
            "value": "top",
            "label": "画像と重ねる"
          },
          {
            "value": "bottom",
            "label": "画像下に表示"
          },
          {
            "value": "none",
            "label": "説明を表示しない"
          }
        ],
        "default": "top"
      }
    ]
  }
{% endschema %}

作った選択肢に応じて、説明の表示位置を変えましょう。
if文でvalueの値が〇〇ならという条件分岐を作ります。

if section.settings.desc_position == [valueの値]

main-collection-categorytop.liquid

<div class="collection-categorytop">
  <img src="{{ collection.image | img_url: 'master' }}">
  <div class="collection-categorytop__inner page-width">
    <h1>
      {{ collection.title | escape }}
    </h1>
    {%- if section.settings.desc_position == 'top' -%}
      {{ collection.description | strip_html | truncate: 170 }}
    {%- endif -%}
  </div>
</div>
<div class="page-width">
  {%- if section.settings.desc_position == 'bottom' -%}
    {{ collection.description }}
  {%- endif -%}
</div>

コードを上書き保存して、カスタマイズ画面で動作を確認します。
選択に応じて、説明の表示場所が切り替われば成功です！

ホームページをカスタマイズ

ここまででコレクションのページテンプレート部分はできました。

次は、ホームページからカテゴリーのリンクを作りましょう。
こちらはShopifyテーマ“Dawn”に標準搭載されている機能だけで出来ます。

テーマのカスタマイズ画面（テーマエディター）を開いてください。
ホームページに“コレクションリスト”のセクションを追加します。
特集コレクション～マルチカラムあたりのセクションは非表示にしておくと、カスタマイズ画面すっきりして見やすいです。

セクションの見出しを「カテゴリーから探す」と打ち替えます。
お好みでモバイルの列数も調整してください。

次にブロックの設定を行います。
ブロックを選択して、コレクションを選択するだけで設定できます。

これで、トップページからのリンク作成も完了です。

他にもカテゴリー目的のコレクションを作って、ブロックを埋めると雰囲気が出ます。

コレクションは、コレクションの種類（手動or自動）のみ変更不可。
それ以外は変更できるので、自動コレクションで適当に条件を設定して、コレクションのタイトルと画像だけ設定すれば、ホームページのセクションから呼び出せますよ。