> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/pagefly-help-center-japanese/pjito/shopify-elements/product/shopify-elements-product-list.md). # 商品リスト ### プロダクトリスト要素について 概要：プロダクトリスト要素は、ストアページで厳選されたプロダクトのリストを表示するために設計されています。この要素はプロダクトのプレゼンテーションを強化し、顧客がより簡単にブラウジングして買い物できるようにします。ベストセラー、新着商品、または特定のプロダクトカテゴリを表示したい場合でも、プロダクトリスト要素は柔軟なカスタマイズオプションを提供します。 この記事では、PageFlyでプロダクトリスト要素を効果的に使用するための手順をご案内します。プロダクトリスト要素の詳細については、こちらのビデオチュートリアルをご覧ください： {% embed url="" %} ### プロダクトリスト要素へのアクセス方法 * ステップ1：「**エレメント**」アイコンをクリック > 次に、「**Shopify**」タブでプロダクトリストを選択 * ステップ2：目的のプロダクトリストバリアントをページエディターにドラッグアンドドロップ ![](/files/CBjN3mCscQLeFxX85WTn) ### プロダクトリスト要素の設定方法 プロダクトリスト要素は、可能な限り最高のコンバージョン率のために外観を最適化するためのさまざまなパラメーターを提供します。設定を表示するには、レイアウトで要素を選択します。 #### 一般設定 **プロダクトソース** \| **すべてのプロダクト：** ストア内のすべてのプロダクトを表示します。コレクションページで作業している場合、プロダクトソースを自動に設定できます。表示されるプロダクトリストは、そのページに割り当てられたコレクションからのものになります。 | | \| **カスタムコレクション：** 表示する特定のコレクションを選択できます。このオプションを選択した場合、下にスクロールして「コレクションを選択」ボタンをクリックし、プロダクトのソースとするコレクションを選択します。![](/files/rffQkkzgNC4H9itabhoD) | \| **関連プロダクト：** カスタムプロダクトを選択するオプションがあり、選択したプロダクトと同じコレクション内の関連プロダクトが表示されます。このオプションを選択した場合、下にスクロールして「プロダクトを選択」ボタンをクリックし、関連アイテムのソースとするプロダクトを選択します。 |![](/files/S0oaLRbmNcsqHfQNrOH9) | **読み込みあたりのアイテム数** 読み込みごとに表示されるアイテム数を調整します。Shopifyの制限により、プロダクトリスト要素は一度に最大50個のプロダクトしか表示できません。詳細はこちらで確認できます：[here](https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-more-products)。 ![](/files/bzgao9YA1Vu4kYeYMCPV) **レイアウトタイプ** プロダクトリスト要素は、グリッドとスライドショーの2つのレイアウトタイプでプロダクトリストを表示できます。 ![](/files/EuRv3MTYXbHWs7mioOHZ) * **グリッドレイアウトの場合：** プロダクトを構造化されたグリッド形式で配置し、顧客が複数のアイテムを一度に簡単に表示できるようにします。以下の設定オプションを確認してください： \| **行あたりのアイテム数：** 各行に表示されるアイテム数を調整します。 |![](/files/TTpPpEZYeSX8m4cuFv67) | \| **最終行を埋める：** このオプションをオンにすると、最終行の要素はその行の幅全体を占有します。 |![](/files/ICc6Gz9ktSI8mAxEuf7S) | \| **配置：** プロダクトリスト要素内のアイテムの位置を指定します。 {% hint style="info" %} **注意**：最終行を有効にすると、配置は機能しません。 {% endhint %} |\ !\[]\(../../../images/AD\_4nXcm-e5G4L6U8kM9WEVvlux0GMgoq6UrxKZIisrDRI27\_wc-VNwS-JkqR77GBR0SkP0R-qAv1Bb7-6-\_NPyVGzbFA1O7ZGWW9n0v4C-MIq04EqCu9Rq6cH3fD2diTGRRuFLeaae2Z5SGt9Q9PZGwgkey6I5fqzYHNRROoeAxWDpeUQ.gif)| \| **アイテムの間隔：** アイテム間の間隔を調整します。 |![](/files/cfBkcBFQLYYsWWx8Ptne) | \| **読み込みモード**：3つのオプションがあります * **なし**：追加の読み込み機能が適用されないデフォルトのオプションです。 * **ページネーション**：ナビゲーション用のページ番号を表示します。 * **もっと読み込む**：「もっと読み込む」ボタンを表示して追加のプロダクトを読み込みます。\ 注意：この機能はライブページでのみ機能します。Shopifyの制限により、一度に50個のプロダクトしか読み込むことができません。 | ![](/files/N95TmFhqj03X4ZjTGZYQ) | \| **現在のプロダクトを除外：** このオプションは、プロダクトページで現在表示されているプロダクトをプロダクトリストから除外します。この機能はプロダクトページでのみ機能することに注意してください。 |![](/files/EU1Q2067yfBoDrQTsL44) | * **スライドショーの場合：** プロダクトをスライディングバナー形式で配置し、多くの場合アニメーション効果を使って、顧客がアイテムを1つずつブラウジングできるようにします。以下の設定オプションを確認してください： \| **表示されるアイテム数：** 一度に表示されるスライドの数を設定します。 |![](/files/c0UUvIAPPpY4QBYqgkSB) | \| **スクロールするアイテム数：** ナビゲーションボタンをクリックしたときにスクロールするスライドの数を設定します。上記の表示されるアイテム数の値が、スクロールするアイテムの最大数です。 |![](/files/WJEvpofffwqmqAcbVc3y) | \| **アイテムの間隔：** スライド間の間隔を調整します。 |![](/files/xQPamikE8HNf2C5i5ki2) | \| **部分的なアイテムを表示：** このオプションを有効にすると、前後のアイテムが部分的に表示されます。 |![](/files/sWwXHKwglCjurYjp9UCK) | \| **ナビゲーションタイプ**：左/右矢印ナビゲーションボタンには5種類のスタイルがあります。「なし」を選択してこれらのボタンを非表示にすることもできます。注：デスクトップおよびラップトップでは、一部のオプションはマウスオーバー時のみ表示されます。 |![](/files/FfWxSmyFv3o0KhoIpXqv) | \| **ページネーションタイプ**：ページネーションインジケーターには3種類のスタイルがあります。 |![](/files/rIVZ5Pv1QFagJ4WNJK9j) | \| **最大高さを設定：** 有効にすると、スライドショーの高さは非表示スライドを含む最も高いスライドの高さと一致します。 |![](/files/pqXTFJE3CHsCLBBWMf9I) | \| **垂直方向の配置：** 「最大高さを設定」が無効になっている場合、希望通りにスライドを配置するために3つの垂直方向の配置オプションから選択します。 |![](/files/x6nbqPX5bIPeFNlFXbCW) | #### スタイリング設定 スタイリングタブでは、要素のサイズ、間隔、境界線、タイポグラフィ、色など、さまざまなパラメーターを変更して、プロダクトリスト要素がページの全体的なレイアウトと一致するようにすることができます。 スタイリングタブの詳細については、こちらで確認できます：[here](https://help.pagefly.io/manual/elements-style-settings/)。 ![](/files/rChOonqkNB0bKLjX0gND) ### ヒントとベストプラクティス * ベストセラーの紹介：最も人気のあるプロダクトを強調して、より多くの顧客を引き付けます。 * 新着商品のフィーチャー：ストアの最新の追加商品に注目を集めます。 * 季節のプロモーションとセール：割引アイテムや特別オファーを宣伝して、売上を伸ばします。 * カテゴリ別のリスト：特定のカテゴリのプロダクトを表示して、ナビゲーションを容易にします。 ### よくある質問 **1. プロダクトリストで特定のプロダクトのみを表示するにはどうすればいいですか？** プロダクトリストで特定のプロダクトのみを表示するには、まずShopifyで目的のコレクションを作成します。Shopify > プロダクト > コレクションに移動し、「**コレクションを作成**」ボタンをクリックします。次に、プロダクトソースセクションでカスタムコレクションオプションを使用して、その特定のコレクションからプロダクトを選択して表示します。 **2. プロダクトリスト要素でプロダクトの順序を変更できますか？** はい、可能です。プロダクトの順序を変更するには、Shopifyの関連コレクションにアクセスし > プロダクトセクションで、プロダクトを手動でソートすることを選択し、希望通りにプロダクトを並べ替えます。新しいプロダクトの順序は、PageFlyエディターのプロダクトリストに自動的に適用されます。 詳細な手順については、こちらのビデオチュートリアルをご覧ください：[How to change Shopify Product Order in the PageFly Product List](https://www.youtube.com/watch?v=vxYtnw0cqFg)。 **3. モバイルビューとデスクトップビューで異なるプロダクトを表示できますか？** はい、表示機能を使用して、さまざまなデバイスでさまざまなプロダクトを表示および非表示にすることができます。 **4. プロダクトリストの外観をカスタマイズするにはどうすればいいですか？** スタイリングタブで、間隔、境界線、タイポグラフィ、色など、さまざまなスタイリングオプションを調整して、ストアのデザインと一致させることができます。 ### その他のリソース * [How to Use PageFly List Element](https://help.pagefly.io/manual/list-element/) * [How to Edit PageFly Content List Element](https://help.pagefly.io/manual/content-list-element-2/) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/shopify-elements/product/shopify-elements-product-list.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.