「作成したShopifyのコレクションをトップページ上に反映される方法知りたい」
こんな疑問も解決します。
具体的にやりたいことはこんな感じです↓このカテゴリーはコレクションで作成したものです。
![](https://daredemo-ec.jp/wp-content/uploads/2021/04/image-5-1024x615.png)
Shopifyのコレクションを作成していない方はこちらのステップを参照ください
Shopifyコレクションの用途は様々!
Shopifyでコレクションを作成してトップページに反映することができるようになれば、トップページに「商品タイプ別で商品を並べたり」「売れ筋ランキング」を並べたりできます。
はたまた、上の例のように商品カテゴリーを並べることだってできちゃいます。
たとえば、Shopifyで作られたallbirds ではこちらのようにカテゴリーをトップページに並べています。
![画像2](https://assets.st-note.com/production/uploads/images/44347820/picture_pc_379a5379ef09a0d0f2218a2c07434254.png)
これもコレクションを作成してトップページに配置しているのです。
トップページで追加すべきコレクションは?
商材やターゲットにもよりますが、一般論ではトップページには以下コレクションを設置すべきです。
・人気商品のコレクション
・いちおし商品のコレクション(ストアいちおしの商品リスト)
・新着商品のコレクション
では、これらのコレクションをトップページに設定する方法を解説していきます。
Shopifyで作成したコレクションをトップページで表示させる方法
今回は無料テーマのMinimalというテーマで、一番使われる「商品タイプ一覧」追加していきます。(カテゴリー一覧や地域別などのコレクションを並べる)
テーマによって、追加できるコレクションや形式が若干異なるのでご注意ください。
❶ オンラインストア→テーマ→カスタマイズをクリック。
![画像2](https://assets.st-note.com/production/uploads/images/44348716/picture_pc_bf1a046bdb9bd32ccb1dcf5ad0d0123d.png)
❷ テーマのカスタマイズ画面上部のドロップダウンで「ホームページ」となっているか確認。
![画像3](https://assets.st-note.com/production/uploads/images/44348886/picture_pc_c9cafdd26d1774ec4a9d2c00a07dded0.png)
❸ サイドバーから「セクションを追加する」をクリック。
※元々入っているセクションを編集してもOKです。
![画像4](https://assets.st-note.com/production/uploads/images/44348973/picture_pc_ac0fe3823039e5efbab3a082ddb845f3.png)
❹ 「コレクションリスト」を選択。
※ここでコレクションリストが存在しない場合は、設定しているテーマでは追加できません。
![画像5](https://assets.st-note.com/production/uploads/images/44349381/picture_pc_86ebf5a7d19ccb1bb96c1dafb61acb50.png)
❺ コレクションを選択して、1つずつコレクションを紐付けする。
![画像6](https://assets.st-note.com/production/uploads/images/44349523/picture_pc_dc93d27c5d6bd58db914d053ca3a0a37.png)
❻ すると、追加ごとにプレビューで確認できます。
![画像7](https://assets.st-note.com/production/uploads/images/44349622/picture_pc_f72a2f52505fc550ba929cbde35f2522.png)
❼ 表示するコレクションの数を減らしたい場合は、空のコレクションを選択して、サイドバー右上の3点マークをクリックして、「コレクションを削除する」をクリックすれば、削除可能です。
![画像8](https://assets.st-note.com/production/uploads/images/44349710/picture_pc_b32f9990a8ab0576cec005856c23a2c4.png)
❽ 「見出し」に見出しとして表示させたいテキストを入力します。
![画像9](https://assets.st-note.com/production/uploads/images/44349904/picture_pc_778b67d7e9b09f468eab01c54d76b591.png)
❾ これでカテゴリー一覧というコレクションリストが追加できました!
![画像10](https://assets.st-note.com/production/uploads/images/44349958/picture_pc_eb2fe6c869a8d56092b6f77cc9aab8c7.png)
この方法で様々な場所にコレクションを追加できます。
その他にどんなコレクションが表示可能?
使用しているテーマに依存しますが、ほぼどのテーマにも存在しているのが「特集コレクションの追加」です。
これは選択したコレクション内にある商品をすべて一覧で表示することができます。
例えば、「店長いちおし商品」というコレクションを作成しておけば、そのコレクション内にある商品を表示することができます。
※もちろん、表示する商品点数も調整できます。
以上がShopifyコレクションのトップページ反映方法でした!