# コレクションリスト ### コレクションリストエレメントについて 概要：[コレクションリスト](https://help.pagefly.io/manual/shopify-elements-collection-list/)は、ページにコレクションのリストを表示するために設計されています。コレクションを魅力的な方法で表示することで、コンバージョン率を高めるために特別に調整されています。 コレクションリストを利用して、商品を効果的にアップセルおよびクロスセルすることで、全体の販売戦略を強化できます。 このエレメントについてさらに理解するには、こちらのチュートリアルビデオをご覧ください。 {% embed url="" %} ### コレクションリストエレメントへのアクセス方法 コレクションリストエレメントにアクセスするには： * ステップ1：エレメント機能をクリックします。 * ステップ2：「**Shopify**」セクションで、コレクションリストエレメントをクリックします。 * ステップ3：エレメントをページエディターにドラッグ＆ドロップして使用を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c45aee05cd4252df1804fae14bfad21bf6de7865%2FAD_4nXcEZTeJxpA-aOc8-SWACE0X66Kbg71pWKRzJGCsQek77BBNZ2OlF_JgC7I57ZjM5G5qdpENTFY1Rl0sLIttZc-kzwrRj6vE3PB0WMimHzyx7_m1POg2c1jMH_718xBLHFLFhDj8MEKdHuuwSYJslgkeyAj2r1DLPrir5V1hrCgdN2Q.gif?alt=media) なお、このエレメントは、サイドバーで探す代わりに検索機能を使用して検索することもできます。 ### コレクションリストエレメントの設定方法 コレクションリストエレメントには、コンテンツの外観を微調整して最高のコンバージョン率を実現するための多くのパラメーターが付属しています。 レイアウトでエレメントを選択し、全般タブとスタイルタブに移動してパラメーターを確認します。 #### 全般設定 **Gen 2 エディター** Gen 2 エディターを使用する場合、全般設定とスタイル設定は基本エディターと似ていますが、いくつかの追加オプションがあります： 基本エディターと同じオプションが含まれており、最後の行を埋める機能と配置機能が追加されています： * **最後の行を埋める**: グリッドの最後の行にアイテムが少ない場合にその行を埋めるかどうかを**はい**または**いいえ**で選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c7842c879aef7485d7ca748a1599e7723ed8ef5a%2FAD_4nXfrSXVZKO7GoKM9aonqYwtFpj2Rts8hDSQICunkLWZilrDX_TMGnz0oAFDb554575ISA5zrM6fzARJZw4yWsaWRN1sGFz1EORO2XSmTRfJe9jZIiQqad_p3wrbEzp5J5wgddErTRWDyt0RaBEyGUAkeyAj2r1DLPrir5V1hrCgdN2Q.gif?alt=media) * **配置**: コンテナ内でのアイテムの配置方法を調整します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdqKf_BHLDneS4h6kGLTAKoOZby_fkcFhdQJc-U68C4CsL-cb1Qsc-kdOTZVQPcWhHfX6DNl8RJtBaspEzIHqOwUWsHJ-QC1NtMwQjEZod3SKrMX__sRr7oG-PoGgrLZ20W2kJn0pyIPxtJvjNGkeyAj2r1DLPrir5V1hrCgdN2Q.gif) 属性、表示、アニメーションのパラメーターに関する詳細は、[こちら](https://help.pagefly.io/manual/elements-general-settings/)でご確認いただけます。 **レガシーエディター** \| コレクションソース：以下の2つのオプションから選択できます。 - すべてのコレクション：ストアのすべてのコレクションを表示します。 - カスタムコレクション：表示したいコレクションを選択します。 | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcNNuUxUl1ylENff8-U83lwvl60MugOKkX402vL5xfqb6jU09r7INLNXdu4azaw0eK2HtfVjp0pxdlNWbqIfu5eVwABCK8SZJsbJ-_IwsfTvU11zzD4RcAU57WKDBfP9Eg8Oa3V0wX30Z_sLy0keyAj2r1DLPrir5V1hrCgdN2Q.png) | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | アイテム/読み込み数：表示されるコレクションの数を調整します。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b9f0c9d8c076a1e9dde49e630f048629af50dbfe%2FAD_4nXf0z6B5mq-qfOmQjWQ76Eu4pGMUYE9O2RN4CTseHU9Y0KcY59FOfgF6FbmKc_fmbqpJ-GU7XvXAOu20BtX9FDxEoTO7vVOl5gKnnnbGdv-VY9XZ61sL9wX8-yALyjUu2fGk0h8aRkWIaPmJ67YAVAkeyAj2r1DLPrir5V1hrCgdN2Q.gif?alt=media) |\ \| レイアウトタイプ：2つのタイプがあります。 - グリッド - スライドショー |\ | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcf6A-N2wPbb_VUV2wJR_xV2It7VKFqO29gJGS0dgtJqSjxg7wp2ozY9CeMQY0rq2r8NBDIgZr3fF4I5JlCqz1uWX1vsHa5a5jUwgR_t_bKNCVb-TbKnDjiMJF3fqaSWEVBXtlWeH9z8I_h0VM-tQkeyAj2r1DLPrir5V1hrCgdN2Q.gif) ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-27035ad45116d8ad9a1f8f87973c4515a0112239%2Fcollection-list.gif?alt=media) |\ \| グリッドレイアウトタイプを選択した場合、以下のパラメーターに進みます。 - 1行あたりのアイテム数：1行のアイテム数を調整します。 - アイテム間隔：アイテム間のスペースを調整します。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-67492f622ccede748bfa2e1aa4816304d1ae9947%2FAD_4nXe0imYM8U38NNAgKF-gmU4kSrQR6T19TAazC7VfkONmScEvwCMj7oOJF1Webce-oEchEXcQiVuryV-M3RQnq-n6CFfCtnN6jeD2DtI9U7EBy9uW4LplCKzqUlJ-qOCfUB_4pd3rXunPgGyuuWEUkeyAj2r1DLPrir5V1hrCgdN2Q.png?alt=media) |\ \| スライドショーレイアウトタイプを選択した場合、以下のパラメーターに進みます。 - 表示されるアイテム数：1行のアイテム数を調整します。 - スクロールするアイテム数：一度にスクロールするアイテム数を調整します。 - アイテム間隔：アイテム間のスペースを調整します。 - 一部表示アイテムを表示：スライドショーの端で部分的に見えるアイテムを表示するかどうかを選択します。 - ナビゲーションタイプとページネーションタイプ - 最大高さを設定：デザインに合わせてスライドショーの最大高さを制限します。 | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a9d490a7e4f54893f17d2c0c846080af193b4913%2FAD_4nXfw1C3xEJcqR76goLBR1PzPPVTtg__CzWjNOqfkggd9fawaDpm5pXPuzsFs9BdxQ8QNraXsmAb3KCLLQRSrtofLGq-J2WwS-HEfDvVVveXDI_2MNA-SSlNVZJnP8qkLGD4ozDCngkMSWdx9ZsUYCgkeyAj2r1DLPrir5V1hrCgdN2Q.png?alt=media) | #### スタイル設定 スタイルタブでは、コンテンツの色、間隔、背景、タイポグラフィなどのパラメーターを使用して、コレクションリストエレメントの外観をカスタマイズできます。スタイルタブの詳細については、[こちら](https://help.pagefly.io/manual/elements-style-settings/)のリンクを参照してください。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcrLil4iugQtdm5VzBygkItKk8MttE_TNkBFncx_JRlGaKgHRuPcJjV27E8_ngMhmVTtgeC-TXGPQ5anNT1zAK5fhFbDbSlvysGM_7cf02Zglu4TLMDMiTKdisCfAJ9EEPfY6KgOYjhGpq6OmOZkeyAj2r1DLPrir5V1hrCgdN2Q.png) ### 一般的なケース コレクションリストにおけるデバイスの感応性ケースは、ラップトップ、タブレット、携帯電話を含むすべてのデバイスで適切に表示されるようにすることで対応されます。トップメニューのデバイススイッチャーにアクセスし、希望するデバイスを選択することで、そのパフォーマンスを確認できます。 明確にするために、以下の例を参照してください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-01924ae3987d85dc8d3472f01209df55b27408c7%2FAD_4nXeiwcN7vmKamx2-h4P-dQtTRD1EMhLbO1SjGtrrSInl1ziH7Z0XsbCL9-dGpxJ1okQC5BaATqvMKrJfjhQ8lKSq8vO6mkLK7fNVv9ELJo5FlptbzfthtraR4ZaSpILBIhFOVQ7K_zlgWzW10bb9zAkeyAj2r1DLPrir5V1hrCgdN2Q.gif?alt=media) * ラップトップとタブレットでは、デフォルト表示では1行あたり4つのアイテムが表示されます。 * 携帯電話では、表示が自動的に1行あたり2つのアイテムに調整され、明確さと簡潔さが向上します。 ### よくある質問 **1. Shopifyに複数のコレクションを作成できますか？** Shopifyでは、商品は複数のコレクションに表示できるため、販売者は好きなだけコレクションを作成できます。 **2. コレクションリスト内のコレクションの順序を変更できますか？** はい、通常はテーマエディターまたはテーマが提供するカスタマイズオプションを使用して、コレクションリスト内のコレクションの順序を変更できます。これにより、特定のコレクションを優先したり、ストアに合った方法で整理したりできます。 ### 追加リソース [Shopify製品リスト | PageFlyで作成する方法](https://help.pagefly.io/manual/shopify-elements-product-list/) [Shopify LookBookをPageFlyで使用する方法](https://help.pagefly.io/manual/lookbook-shoppable-galleries/)