SHARE

Shopifyのコレクションページの作成方法は?手順を解説

ネットショップで販売する商品の種類が増えてくると、ユーザーが目的の商品を見つけにくくなってしまうことがあります。ショップの利便性を向上させるために、「商品ジャンルごとにページを作成したい」と考えている方も多いのではないでしょうか。

Shopifyには、販売している商品をジャンルや仕様など、特定の条件に当てはまる商品をグループ化できるコレクション機能が備わっています。本記事では、Shopifyでコレクションを作成する手順や編集方法を解説するので、ぜひご覧ください。

デザイン・開発・動画編集・SNS運用など、経験豊富なプロに直接頼める!

Shopifyのコレクションページの役割

コレクションページ機能は、商品のタイプや仕様など、特定の条件に当てはまる商品をグループ化できる機能です。カテゴリーによる商品分類とは異なり、コレクションページ機能では価格や値引き商品など、さまざまな条件をもとに商品を分類できます。

コレクションページの役割は、商品を分類してユーザーが目的の商品を見つけやすくすることです。ECサイトのトップページにコレクションページへのリンクを設置すれば、ユーザーが目的の商品ページへすぐにたどりつけます。コレクションページを作成すれば、ユーザーの利便性を向上させられるのです。

Shopifyの2つのコレクション機能

PICK UPの文字ブロック

Shopifyでは、以下の2つの方法でコレクションページを作成できます。

  1. 自動コレクション機能
  2. 手動コレクション機能

それぞれの機能の特徴やメリット・デメリットを解説します。

1. 自動コレクション機能

自動コレクション機能は、自動的にコレクションページを作成する機能です。商品タグや商品の種類などをもとに、システムが商品を自動的に選択します。自動コレクション機能を使用する際は、ショップ管理者が商品をピックアップする条件を指定する必要があります。

自動コレクション機能では、複数の条件を指定できます。特定の条件に当てはまる商品をコレクションに加えるだけではなく、条件に当てはまる商品を除外することも可能です。条件を細かく設定すれば、分類の精度も高まります。

自動コレクション機能のメリット・デメリット

自動コレクション機能のメリットは、コレクションページを作成する手間を省ける点です。ECサイトで取り扱っている商品数が多くなるほど、商品を分類する際の作業負担も大きくなります。自動コレクション機能を利用すれば、商品数が多いECサイトでも短時間でコレクションページを作成できます。

一方のデメリットは、条件の設定に慣れが必要な点です。自動コレクションでは、しっかりと条件を設定しなければ、うまく商品を分類できません。

2. 手動コレクション機能

手動コレクション機能は、ショップ管理者が商品を手動で選んでコレクションページを作成する機能です。人の手で商品を分類するので、思い通りのコレクションページを作成できます。自動コレクション機能による商品の分類がうまくいかないときに利用するとよいでしょう。

手動コレクション機能のメリット・デメリット

手動コレクション機能のメリットは、自動コレクション機能では分類が難しい商品のコレクションページを作成できる点です。一方で手動のため分類に時間がかかるデメリットもあります。まずは、自動コレクション機能で商品を分類し、必要に応じて手動コレクション機能を使用するといった方法で運用するとよいでしょう。

Shopifyで自動コレクションを作成・編集する方法

PC画面を指さしてアドバイスする社員

Shopifyの自動コレクション機能をうまく使いこなせれば、ECサイトを効率的に運営できます。Shopifyで自動コレクションを作成する手順やコンテンツを編集する方法をご紹介しましょう。

  1. 自動コレクションの追加方法
  2. 60個まで自動コレクションの選択条件を追加できる
  3. 自動コレクションのコンテンツを変更する方法

1. 自動コレクションの追加方法

自動コレクションの追加方法は、使用するデバイスによって少し異なりますが、基本的な流れは類似しています。本記事では、主にPCを使用した自動コレクションの追加方法を紹介します。自動コレクションの作成手順は以下の通りです。

  1. 「管理画面」の「商品」をクリックし、コレクションを選択
  2. コレクション名と説明を入力
  3. 「コレクションの種類」の「自動」をクリック。すべての条件と一致する商品をピックアップするのか、一部の条件が一致している商品をピックアップするのかを指定して、条件を設定
  4. 「保存」をクリックすると、コレクションページに追加する商品が表示される
  5. 並べ替え順を指定
  6. 販売チャネルセクションでコレクションを表示する販売チャネルを設定
  7. コレクション画像セクションの「画像をアップロード」からコレクション画像を追加
  8. 「保存」をクリック

最後にECサイトのメニューに、コレクションページへのリンクを追加すれば作業は完了です。

2. 60個まで自動コレクションの選択条件を追加できる

自動コレクション機能では、最大60個まで商品の選択条件を指定できます。指定可能な条件は以下の通りです。

  • 商品名
  • 商品価格
  • 割引前価格
  • 商品タグ
  • 商品タイプ
  • 商品の販売元
  • 在庫数
  • バリエーション名
  • 重量

商品の選択条件は、コレクションページを作成した後で追加することもできます。条件を追加する際は、「条件セクション」の「別の条件を追加する」をクリックします。

1番目のドロップダウンリストで条件のタイプを指定し、2番目のドロップダウンリストで、全部一致・部分一致を指定します。3番目のフィールドには、価格や商品名などの条件値を入力します。

3. 自動コレクションのコンテンツを変更する方法

自動コレクションのコンテンツを変更したい場合は、選択条件を変更する必要があります。コンテンツは以下の手順で変更します。

  1. 「管理画面」の商品のコレクションを選択
  2. コンテンツを変更したいコレクション名をクリック
  3. 条件セクションで条件を変更
  4. 不要な商品を削除して保存をクリック

コンテンツの変更手順もPCとスマートフォンで若干異なりますが、基本的な流れは同じです。

Shopifyで手動コレクションを作成する方法

黒いノートPCで作業する人

手動コレクション機能では、任意の商品を追加・削除できます。それぞれの操作方法をご紹介しましょう。

  1. 手動コレクションの作成方法
  2. 手動コレクションに商品を追加する方法
  3. 手動コレクションの商品を削除する方法

1. 手動コレクションの作成方法

PCを使用して手動コレクションを作成する手順は以下の通りです。

  1. 「管理画面」の「商品」から「コレクション」を選択
  2. 「コレクションの作成」をクリック
  3. コレクション名と説明を入力
  4. コレクションタイプセクションの「手動」を選択し、「保存」をクリック
  5. 商品セクションで追加したい商品を検索。もしくは「閲覧する」をクリックして商品を選択
  6. 商品の並び順を指定
  7. 販売チャネルセクションの「管理」から、コレクションを表示する販売チャネルを選択
  8. コレクション画像セクションの「画像を追加」をクリックし、コレクション画像を追加
  9. 「保存」をクリック

自動コレクションと同様に、ECサイトのメニューにコレクションのリンクを追加すれば作業は完了です。スマートフォンで手動コレクションを作成する際は、「自動的に商品を選択」が有効になっていると、自動コレクションが作成されるので、無効にしておきましょう。

2. 手動コレクションに商品を追加する方法

手動コレクション機能では、コレクションページを作成した後から任意の商品を追加することもできます。PCで手動コレクションに商品を追加する手順は以下の通りです。

  1. 「管理画面」から「商品」の「コレクション」をクリック
  2. 商品を追加したいコレクション名をクリック
  3. 商品セクションで追加したい商品を検索するか、「閲覧する」をクリックして商品を選択

Shopifyでは、商品詳細ページから商品を追加することもできます。「管理画面」の商品で、「すべての商品」を表示し、コレクションに追加したい商品を選択します。コレクションセクションで、コレクション名を選択すれば、既存のコレクションに商品が追加されます。

3. 手動コレクションの商品を削除する方法

手動コレクションの商品を削除する方法をご紹介します。PCで商品を削除する手順は以下の通りです。

  1. 「管理画面」の「商品」の「コレクション」を選択
  2. 商品を削除したいコレクション名を選択
  3. 商品セクションに表示されている各商品横の「X」マークをクリック

スマートフォンのShopifyアプリで削除する場合は、「商品」の「コレクション」でコレクション名をタップし、「編集」から商品のチェックを外せば削除できます。上記の操作は、あくまでも手動コレクションから商品を削除する方法です。コレクションから商品を削除しても、Shopifyから商品データが削除されるわけではないので注意しましょう。

検索結果のプレビュー設定でSEO対策

Shopifyでは、コレクションページにSEO対策を施すこともできます。操作の手順は以下の通りです。

  1. 「管理画面」の「商品」から「コレクション」へ移動
  2. SEO対策を施したいコレクション名をクリック
  3. 検索結果のプレビューセクションの「ウェブサイトのSEOを編集する」をクリック
  4. 「ページタイトル」「説明」「URLとハンドル」を入力
  5. 「保存」をクリック

「説明」に入力した文章は、検索結果ページのディスクリプションに表示されます。タイトルやディスクリプションによってクリック率も変化するので、ユーザーが思わずクリックしたくなるような「ページタイトル」「説明」を設定しましょう。

Shopifyのコレクションを削除する方法

ShopifyのコレクションをPCで削除する流れは以下の通りです。

  1. 「管理画面」の「商品」から「コレクション」をクリック
  2. 削除したいコレクション名をクリック
  3. 「コレクションを削除する」をクリック
  4. 「確認ボックス」内の「コレクションを削除する」をクリック

コレクションを削除すると、ECサイトのメニューのリンクも自動的に削除されます。Shopifyアプリでコレクションを削除する場合も、基本的な流れはPCと同じです。

Shopifyのコレクションに使用する画像のサイズに注意

白い木板の上に雑多に置かれたカラフルな文房具

Shopifyのコレクションに使用できる画像サイズには、上限が設定されています。4,472px×4,472pxを超えるサイズの画像を使用できないので注意しましょう。加えて、ファイルサイズの上限も決められており、20MB以上の画像は使用できません。Shopifyの公式ヘルプでは、2,048px×2,048pxが推奨されています。

Shopifyで使用できるファイル形式は以下の3種類です。

  • PNG
  • JPEG
  • GIF

PSDやTIFF、BMPも登録できますが、アップロードする際にPNGかJPEGに変換されます。ShopifyではPNGとJPEGを推奨しているので、PNG・JPEG形式の画像を使用しましょう。

商品タグでShopifyのコレクションを整理しよう

自動コレクション機能を効果的に活用するには、適切なタグ付けが重要です。商品に不適切なタグが付いていると、思うように商品が分類されない場合もあります。特に商品数が多くなると、商品の管理も難しくなるので、タグ付けのルールをあらかじめ決めておいた方がよいでしょう。

加えて、コレクションを複数作成した際は、不必要なコレクションは非表示にしておきましょう。すべてのコレクションを表示してしまうと、ユーザーが商品を探しにくくなってしまいます。

Shopifyのコレクションが表示されないときのチェックポイント

Shopifyの操作に慣れない内は、コレクションページをうまくECサイトに表示できないことがあります。コレクションページが表示されないときは、コレクションがしっかり作成できているかどうかチェックしましょう。

「管理画面」の「商品」から「コレクション」をクリックし、作成したコレクション名が表示されていなければ、コレクションが作成されていません。

コレクションが作成できているのにもかかわらず、ECサイトに表示されていない場合は、ECサイトのメニューにコレクションのリンクが追加されているか確認しましょう。

コレクションページをカスタマイズするにはテーマのカスタマイズが必要

先に解説した通り、コレクションページのタイトルやディスクリプション、URLは任意の値に設定できます。しかし、コレクションページのデザインをカスタマイズするには、テーマをカスタマイズしなければなりません。

Shopifyのテーマを本格的にカスタマイズするためには、HTMLに加えて、Shopifyのために開発されたプログラミング言語「Liquid」の知識も求められます。そのため、レイアウトやデザインをカスタマイズするのであれば、Shopifyに精通したエンジニアへ依頼する必要があります。

Shopifyのカスタマイズはプロに依頼しよう!

Shopifyのコレクションページの作成方法について解説しました。商品タグを適切に設定して、コレクション機能を上手に活用しましょう。

一方で、コレクションページのデザインは使用しているテーマに依存します。他社のECサイトとの差別化を図るために、デザインをカスタマイズしたいと考えている方も多いのではないでしょうか。コレクションページの本格的なカスタマイズには、専門的な知識・スキルが求められます。

ランサーズには、Shopifyの認定を受けた経験豊富なランサーが多数登録しています。コレクションページのカスタマイズでお困りの方は、お気軽にお問い合わせください。

フリーランサーにShopifyのカスタマイズを依頼する

デザイン・開発・動画編集・SNS運用など、経験豊富なプロにカンタン依頼