【Shopify マスターへの道】#3 コレクションを登録しよう

1. ストア構築の準備をしよう
2. 商品を登録しよう
3. コレクションを登録しよう（← 今回はここ）
4. ブログ記事を作成しよう
5. サイトのデザインを選ぼう
6. テーマを編集しよう（セクション編）
7. テーマを編集しよう（テーマ設定編）
8. ティザーサイトを作成しよう
9. サイトのフォントを編集しよう
10. アカウントページを作成しよう
11. コンタクトフォーム を作成しよう
12. About ページを作成しよう
13. 規約を入力しよう
14. メニューの編集をしよう
15. 送料を設定しよう
16. 一般設定を編集しよう
17. 各種設定を編集しよう
18. 決済テストを行おう
19. ストアの所有権を移行しよう

今回は、コレクションの登録を行っていきます。前回登録した商品を商品タイプや商品タグをもとにグループ化していきます。このグループのことをコレクションと呼びます。

デモサイトでは、商品の種類ごとに分けたイヤリングコレクション・ネックレスコレクション・ブレスレットコレクションと、開店セール商品をグループ化したセールコレクションを作成します。

2024 年最新版の「新・Shopify マスターへの道」も公開しております。最新の UI を体験したい方は、ぜひ以下の記事をご覧ください。

【新・Shopify マスターへの道】#3 コレクションを登録しよう【2024 年最新版】

この記事の目標

• なぜコレクションを作成するのか理解する
• 商品タイプや商品タグから自動でコレクションを登録する
• 手動でコレクションを登録する方法を理解する

デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。

【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード

コレクションを作成する理由

商品をコレクションに分けることで、管理画面での商品の分類がしやすくなり、ストアに買い物にきたユーザーの UX も向上します。

身近な例を出すと、ユニクロの店舗を思い浮かべてください。ユニクロでは、店内の半分はメンズ、もう半分はウィメンズというように分かれていますよね。もし、これがぐちゃぐちゃに陳列してあったらどうでしょう？メンズの T シャツの隣に、ウィメンズのジーンズが置いてある。何がどこにあるのかわからないので、すぐにお店を出てしまうと思います。

オンラインストアでも全く同じことが言えます。

コレクションを作るということは、商品をきれいにグループ化して陳列するということなんです。商品がきれいに並んでいるとユーザーも買い物をしやすくなります。

もちろん、商品をきれいに整理すると運営もしやすくなります。

このような理由から、体系的にコレクションを作成する必要があります。

コレクションを作成する方法

Shopify では、コレクションを作成する方法は 2 種類あります。

1 つは、商品登録の際に設定した商品タイプや商品タグをもとに自動で商品を組み込む方法です。商品の分類は、商品の重量や価格、在庫数などでも行うことができます。
新しく入荷した商品を登録する際に、商品タイプや商品タグを設定すると、自動でコレクションへの追加も行われます。このように、自動でコレクションを作成しておくと、在庫管理が比較的簡単になります。

もう 1 つは、手動でコレクションに商品を追加していく方法です。空のコレクションを作成した後、手動で商品を選び追加していきます。
手動で追加したコレクションは、追加や削除を手動でしない限り同じ商品が入り続けます。

今回作成するコレクション

今回は、次の図のようにコレクションを作成していきます。

商品のタイプでグループ化した「Earrings コレクション」「Necklaces コレクション」「Bracelets コレクション」と、セール商品をグループ化した「Sale コレクション」を作成していきます。

デモサイトに表示するコレクションは全て自動で登録されるように設定していきます。

自動でコレクションを登録する

では、自動でコレクションを登録する手順を説明していきます。

ストアの管理画面左側メニューの「商品管理」をクリックします。すると、商品管理項目のサブメニューが表示されるので、コレクションをクリックします。

このページで、ストアのコレクションを管理していきます。表示されている「ホームページ」コレクションはデフォルトで設定されているコレクションです。

新たにコレクションを追加したいので、画面右上の「コレクションを作成する」をクリックします。

次の画像のようなコレクション作成画面が表示されるので、作成に必要な項目を設定式ています。

タイトルと説明の設定

「タイトル」の項目には、そのコレクションの名前を入力します。このタイトルはストアに表示されます。
デモサイトの見出しは英語で統一するので、コレクションのタイトルも英語で「Earrings」としましょう。

「説明」の項目には、そのコレクションの説明を入力します。この説明は、コレクションのページに表示されます。
今回は、どのような商品がまとめて表示されているのか説明する必要はなさそうなので、空欄で大丈夫です。

コレクションの公開状況を設定する

「コレクションの公開状況」では、コレクションを公開する販売チャネルを選択することができます。右上の「管理」をクリックすると、モーダルが表示され、連携している販売チャネルが全て表示されます。チェックボックスのチェックで公開・非公開を管理します。
現在は、連携しているチャネルはないので、特に設定は必要ありません。

コレクション画像の設定

次に「コレクションの画像」を設定します。コレクションの画像は、トップページなどコレクションリストなどのセクションで表示されます。

画像の追加

「画像を追加する」をクリックします。
ファイル管理のドロワーが出てくるので追加したい画像を選択します。ドラッグ&ドロップでも設定することができます。ここの画像には、Earring_Collection.jpg を使用してください。

画像の編集

右上の「編集」をクリックするとメニュードロワーが表示されます。画像の変更や削除はこちらから行いましょう。

「画像の代替テキストを編集する」をクリックする（もしくは画像をクリックする）と、代替テキスト（alt 属性）を設定するモーダルが出てきます。SEO 対策を万全にしておきたい場合は、適切なワードを入力しましょう。

デモサイトでは、特に設定する必要はありません。

コレクションの種類を設定する

「コレクションの種類」の項目では、コレクションに追加する商品を設定することができます。

まずは、自動で商品を追加していく手順を説明します。「自動」にチェックがついていることを確認します。自動の場合、設定する条件に当てはまった商品を自動でコレクションに追加してくれます。

次に条件を選択します。

商品タグとなっている部分をクリックするとドロップダウンメニューが表示されます。メニューの中から「商品タイプ」を選択します。

「と一致する」となっている部分をクリックすると同じようにドロップダウンメニューが表示されます。ここは、変更しなくて大丈夫です。

右の空欄になっている入力欄にカーソルを合わせると、商品を登録した際に、分類の項目で設定した商品タイプが表示されます。この選択肢から選ぶか、入力することもできます。
今回は、イヤリングを選択してください。

さらに条件を追加する場合は、「別の条件を追加する」をクリックし、同じように条件を設定しましょう。
今回は、条件を増やす必要はありません。

「商品の条件合致」を「すべての条件」にすると、複数の条件すべてを満たす商品をコレクションに追加します。「いずれかの条件」にすると、複数の条件のどれかに当てはまっていれば、商品をコレクションに追加します。

検索結果のプレビューの設定

「検索結果のプレビュー」では、コレクションページの SEO 対策をすることができます。SEO 対策を正しく行うことで検索順位をアップさせることができます。Shopify の SEO 対策に関する詳しい解説は以下の記事をご覧ください。

検索順位が上がる！Shopify の SEO 対策について解説【今すぐできる】

【簡単】Shopify で必須の SEO 対策の手順を画像付きで解説！

左上の「ウェブサイトの SEO を編集する」クリックすると設定項目が現れます。

設定項目は、「ページタイトル」「説明」「URL とハンドル」です。
それぞれ「Earrings | コレクション」「ダミーテキスト」「earrings」と設定します。

ここまで設定したら、保存するをクリックしましょう。

これでコレクションの自動登録は完了です。

同じように、「Necklaces コレクション」「Bracelets コレクション」「Sale コレクション」も登録してください。

Necklaces コレクション

• タイトル：Necklaces
• 説明：なし
• コレクション画像：Necklace_Collection.jpg
• 条件：商品タイプ・と一致する・ネックレス
• ページタイトル：Necklaces | コレクション
• 説明：ダミーテキスト
• URL とハンドル：necklaces

Bracelets コレクション

• タイトル：Bracelets
• 説明：なし
• コレクション画像：Bracelets_Collection.jpg
• 条件：商品タイプ・と一致する・ブレスレット
• ページタイトル：Bracelets | コレクション
• 説明：ダミーテキスト
• URL とハンドル：bracelets

Sale コレクション

Sale コレクションは、商品タイプではなく「商品タグ」でコレクション化します。各商品の種類の C 商品には「セール」というタグをつけているので、「商品タグがセールと一致する」という条件にするとセールコレクションを作成することができます。

• タイトル：Sale
• 説明：なし
• コレクション画像：Sale_Collection.jpg
• 条件：商品タグ・と一致する・セール
• ページタイトル： Sale | コレクション
• 説明：ダミーテキスト
• URL とハンドル：sale

全てのコレクションを追加し終わったら、コレクションの登録は完了です。

手動でコレクションを登録する

手動で登録する方法は、ほとんど自動で登録する際と同じです。

「手動コレクション」を作成してみます。（後ほど削除します。）

新しいコレクションを作成し、タイトルを「手動コレクション」としてください。手動で登録する際は、「コレクションの種類」の選択項目を手動にします。

手動にチェックを入れたら、一度「保存する」をクリックし保存します。

「商品」項目の「閲覧する」をクリックします。すると、登録済みの商品がモーダルで表示されるので、そこからコレクションに追加する商品を選びます。

商品を選び終えたら、追加ボタンをクリックします。商品が追加されていれば OK です。

コレクションを削除する

コレクションを削除する場合は、まず削除したいコレクションのチェックボックスにチェックを入れ選択状態にします。

選択状態にしたら「アクション」をクリックします。ドロワーメニューば開くので「選択したコレクションを削除する」をクリックします。
コレクションの削除以外にも、公開設定やコレクションの利用を制限することができます。

確認モーダルが開くので、「削除」をクリックします。

これでコレクションの削除は完了です。

同じ手順で、デフォルトで存在する「ホームページ」コレクションも削除しておきましょう！

まとめ

今回は、登録した商品をコレクションに登録していく手順を解説しました。

基本的には、商品登録の際に登録するタグなどを利用して自動でコレクションを管理していくことになると思います。

今回の振り返り

• コレクションを作成する理由を理解した
• 商品情報から自動でコレクションを作成することができた
• 手動でコレクションを作成することができた

以下はおすすめの Shopify アプリです。

• 「シンプル Coming Soon ｜商品ページ発売予告アプリ」
  「シンプル Coming Soon ｜商品ページ発売予告アプリ」は、Shopify ストアで商品毎に発売予告を行えるアプリです。
  

「シンプル Coming Soon ｜商品ページ発売予告アプリ」

• シンプルランキング表示｜お手軽ベストセラー
  「シンプルランキング表示｜お手軽ベストセラー」は、ノーコードであらかじめ作成したコレクションにランキングラベルを表示することができます。

Shopify にランキングバッジを導入するアプリについて徹底解説｜ご利用ガイド

次回は、ブログ記事を作成していきます。

今回はここまでです。お疲れ様でした。