商品リスト
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
概要：プロダクトリスト要素は、ストアページで厳選されたプロダクトのリストを表示するために設計されています。この要素はプロダクトのプレゼンテーションを強化し、顧客がより簡単にブラウジングして買い物できるようにします。ベストセラー、新着商品、または特定のプロダクトカテゴリを表示したい場合でも、プロダクトリスト要素は柔軟なカスタマイズオプションを提供します。
この記事では、PageFlyでプロダクトリスト要素を効果的に使用するための手順をご案内します。プロダクトリスト要素の詳細については、こちらのビデオチュートリアルをご覧ください：
ステップ1：「エレメント」アイコンをクリック > 次に、「Shopify」タブでプロダクトリストを選択
ステップ2：目的のプロダクトリストバリアントをページエディターにドラッグアンドドロップ
プロダクトリスト要素は、可能な限り最高のコンバージョン率のために外観を最適化するためのさまざまなパラメーターを提供します。設定を表示するには、レイアウトで要素を選択します。
プロダクトソース
読み込みあたりのアイテム数
レイアウトタイプ
プロダクトリスト要素は、グリッドとスライドショーの2つのレイアウトタイプでプロダクトリストを表示できます。
グリッドレイアウトの場合： プロダクトを構造化されたグリッド形式で配置し、顧客が複数のアイテムを一度に簡単に表示できるようにします。以下の設定オプションを確認してください：
| 配置： プロダクトリスト要素内のアイテムの位置を指定します。
| |
| 読み込みモード：3つのオプションがあります
なし：追加の読み込み機能が適用されないデフォルトのオプションです。
ページネーション：ナビゲーション用のページ番号を表示します。
もっと読み込む：「もっと読み込む」ボタンを表示して追加のプロダクトを読み込みます。 注意：この機能はライブページでのみ機能します。Shopifyの制限により、一度に50個のプロダクトしか読み込むことができません。 |
スライドショーの場合： プロダクトをスライディングバナー形式で配置し、多くの場合アニメーション効果を使って、顧客がアイテムを1つずつブラウジングできるようにします。以下の設定オプションを確認してください：
スタイリングタブでは、要素のサイズ、間隔、境界線、タイポグラフィ、色など、さまざまなパラメーターを変更して、プロダクトリスト要素がページの全体的なレイアウトと一致するようにすることができます。
ベストセラーの紹介：最も人気のあるプロダクトを強調して、より多くの顧客を引き付けます。
新着商品のフィーチャー：ストアの最新の追加商品に注目を集めます。
季節のプロモーションとセール：割引アイテムや特別オファーを宣伝して、売上を伸ばします。
カテゴリ別のリスト：特定のカテゴリのプロダクトを表示して、ナビゲーションを容易にします。
1. プロダクトリストで特定のプロダクトのみを表示するにはどうすればいいですか？
プロダクトリストで特定のプロダクトのみを表示するには、まずShopifyで目的のコレクションを作成します。Shopify > プロダクト > コレクションに移動し、「コレクションを作成」ボタンをクリックします。次に、プロダクトソースセクションでカスタムコレクションオプションを使用して、その特定のコレクションからプロダクトを選択して表示します。
2. プロダクトリスト要素でプロダクトの順序を変更できますか？
はい、可能です。プロダクトの順序を変更するには、Shopifyの関連コレクションにアクセスし > プロダクトセクションで、プロダクトを手動でソートすることを選択し、希望通りにプロダクトを並べ替えます。新しいプロダクトの順序は、PageFlyエディターのプロダクトリストに自動的に適用されます。
3. モバイルビューとデスクトップビューで異なるプロダクトを表示できますか？
はい、表示機能を使用して、さまざまなデバイスでさまざまなプロダクトを表示および非表示にすることができます。
4. プロダクトリストの外観をカスタマイズするにはどうすればいいですか？
スタイリングタブで、間隔、境界線、タイポグラフィ、色など、さまざまなスタイリングオプションを調整して、ストアのデザインと一致させることができます。
| すべてのプロダクト： ストア内のすべてのプロダクトを表示します。コレクションページで作業している場合、プロダクトソースを自動に設定できます。表示されるプロダクトリストは、そのページに割り当てられたコレクションからのものになります。 | |
| カスタムコレクション： 表示する特定のコレクションを選択できます。このオプションを選択した場合、下にスクロールして「コレクションを選択」ボタンをクリックし、プロダクトのソースとするコレクションを選択します。 |
| 関連プロダクト： カスタムプロダクトを選択するオプションがあり、選択したプロダクトと同じコレクション内の関連プロダクトが表示されます。このオプションを選択した場合、下にスクロールして「プロダクトを選択」ボタンをクリックし、関連アイテムのソースとするプロダクトを選択します。 | |
読み込みごとに表示されるアイテム数を調整します。Shopifyの制限により、プロダクトリスト要素は一度に最大50個のプロダクトしか表示できません。詳細はこちらで確認できます：。
| 行あたりのアイテム数： 各行に表示されるアイテム数を調整します。 | |
| 最終行を埋める： このオプションをオンにすると、最終行の要素はその行の幅全体を占有します。 | |
| アイテムの間隔： アイテム間の間隔を調整します。 | |
|
| 現在のプロダクトを除外： このオプションは、プロダクトページで現在表示されているプロダクトをプロダクトリストから除外します。この機能はプロダクトページでのみ機能することに注意してください。 | |
| 表示されるアイテム数： 一度に表示されるスライドの数を設定します。 | |
| スクロールするアイテム数： ナビゲーションボタンをクリックしたときにスクロールするスライドの数を設定します。上記の表示されるアイテム数の値が、スクロールするアイテムの最大数です。 | |
| アイテムの間隔： スライド間の間隔を調整します。 | |
| 部分的なアイテムを表示： このオプションを有効にすると、前後のアイテムが部分的に表示されます。 | |
| ナビゲーションタイプ：左/右矢印ナビゲーションボタンには5種類のスタイルがあります。「なし」を選択してこれらのボタンを非表示にすることもできます。注：デスクトップおよびラップトップでは、一部のオプションはマウスオーバー時のみ表示されます。 | |
| ページネーションタイプ：ページネーションインジケーターには3種類のスタイルがあります。 | |
| 最大高さを設定： 有効にすると、スライドショーの高さは非表示スライドを含む最も高いスライドの高さと一致します。 | |
| 垂直方向の配置： 「最大高さを設定」が無効になっている場合、希望通りにスライドを配置するために3つの垂直方向の配置オプションから選択します。 | |
スタイリングタブの詳細については、こちらで確認できます：。
詳細な手順については、こちらのビデオチュートリアルをご覧ください：。
