製品リスト要素

商品リスト要素について

その 商品リスト さまざまな製品を紹介することで、重要な役割を果たします。その目的は、顧客へのアップセルとクロスセルを可能にして、販売価値を効果的に高めることです。以前のバージョンとは異なり、製品リスト要素 V7 では、表示する特定の製品を選択できる機能が提供され、Web ページ デザインの柔軟性が向上します。

ページに製品リスト要素を追加するにはどうすればいいですか?

GemPages で製品リスト要素の使用を開始するには、次の手順に従います。

ステップ1： あなたにログインする Shopify管理者 およびアクセス GemPagesダッシュボード > ページ.

ステップ2： 対象ページを見つけてエディターを開きます。

ステップ3： 左側のサイドバーから、 商品リスト 要素の下 製品 セクションをページ上の希望するセクションに追加します。

ステップ4： 要素をクリックすると、その設定オプションにアクセスできます。 設定 の三脚と 高機能 タブをクリックします。

設定タブを構成する

レイアウト

製品リストを紹介するには、次の 2 つのオプションから選択できます。

• グリッド： 製品リストはデフォルトのスタイルで表示されます。
• スライダー： 製品画像はカルーセルに表示されます。

製品ソース

次のいずれかのオプションを選択して、製品の表示方法を選択できます。

• 製品： 紹介する特定の商品を手動で選択します。
• コレクション： 特定のコレクションの商品を紹介したい場合は、このオプションを選択してください。要素はそこから情報を取得するため、事前にShopify管理画面でコレクションを設定してください。

• 関連する 同じコレクション、ベンダー、またはタグに基づいて、現在の製品に関連付けられている製品を自動的に表示します。

ディスプレイ

スライダーを使用するか、正確な数値を入力して、1 行に表示する製品の数を選択します。

アイテム間隔

を調整する アイテム間の間隔 製品リストに表示されます。

ナビゲーション

このセクションでは、 ナビゲーション スライダー製品リストの設定には以下が含まれます。

• ポジション： 矢印をリストの内側または外側に表示するかを選択します。
• アイコン： 利用可能なリストから希望のアイコンを選択するか、新しい SVG ファイルをアップロードすることもできます。
• アイコンサイズ： アイコンのサイズを調整します。
• ボタンサイズ: アイコンのボタンサイズを変更します。
• 背景： アイコンボタンの背景色を設定します。
• 境界： ボタンの周囲に境界線を追加し、その幅と色をカスタマイズします。
• コーナー： 角の半径を設定して、ボタンの端の丸み具合を制御します。
• 影： ボタンのドロップ シャドウを有効にしてカスタマイズします。
• 端までの隙間: 矢印とスライダーの端の間のスペース
• ホバー時に表示: 製品リストの上にマウスを移動したときにのみ矢印を表示します。

ドット

スライダーの下のドットの表示を切り替えて、 ドット スライダーの下にページ区切りインジケーターを表示するための設定:

• 役職: ドットの位置を選択します。
• アクティブカラー: 現在アクティブな（強調表示されている）ドットの色を設定します。
• 非アクティブカラー: 非アクティブ (選択されていない) ドットの色を設定します。
• ドットサイズ: 各ドットのサイズ（ピクセル単位）を調整します。
• エッジまでの隙間: ドットとコンテナの端の間の距離を制御します。

スライド効果

下 スライド効果 セクションでは、以下を設定できます。

• 自動再生: ユーザーの操作なしで製品を自動的にスクロールします。
• スライド方向: スライダーの移動方向（左または右）を選択します。
• 無限ループ: 連続ループを有効にすると、スライダーは最後の製品に到達した後に最初に戻ります。
  
• ドラッグ/スワイプ: ユーザーがスライダーを手動でドラッグ (デスクトップ) またはスワイプ (モバイル) できるようにします。
• スライド速度: スライドの遷移の継続時間を設定します (例: 500 ミリ秒)。
• アニメーション: スライドの遷移をスムーズにするために、アニメーションのイージング タイプを選択します (例: イーズ イン、イーズ アウト、リニア)。

サイズ

このセクションでは、製品リスト コンテナーのサイズを定義できます。

幅（Width）: 固定幅の値（ピクセル単位）を入力するか、 全角 要素がページ全体の幅に広がるようにします。

高さ： の中から選ぶ

• 自動応答オプション: コンテンツに応じて高さが調整されます。
• カスタム額装: 固定の高さを定義するには、特定の高さの値を入力します。

パディング: 要素の境界線の内側の間隔を設定して、コンテンツに余裕を持たせます。

経歴

このセクションでは、製品リスト要素の背景スタイルをカスタマイズできます。

• 色圏: カラーピッカーを使って背景色を適用します。プリセットから選択したり、HEXコードを入力するか、最近使用した色から選択できます。
• 画像: 背景として使用する画像をアップロードします。デザインに応じて、パターン、テクスチャ、プロモーション画像などを使用できます。

形状

このセクションでは、製品リスト コンテナーの角の形状を指定できます。

コーナー半径: 各コーナー（左上、右上、左下、右下）の丸みを個別に調整します。

• 0px = 鋭角
• 50px以上 = 完全に丸い角

定義済みのレイアウト ボタンを使用して、すべてのコーナーに一貫した値をすばやく適用したり、デフォルトにリセットしたりできます。

詳細タブを設定する

より高度なカスタマイズについては、 高機能 タブをクリックし、 この記事.

よくあるご質問

1. ページごとに異なる商品を表示できますか?

はい。商品リスト設定の「複数の商品」または「コレクション」オプションを使用して、ページごとに特定の商品またはコレクションを手動で選択できます。

2. モバイルで製品リストを 2 列で表示するにはどうすればよいですか?

「行あたりの製品数」スライダーの横にあるデバイス アイコンをクリックし、モバイル ビューに切り替えて、数を 2 に設定します。

3. 製品リストに空白または製品が表示されないのはなぜですか?

これは、次の場合に発生する可能性があります。

• リンクされた Shopify コレクションは空または未公開です。
• 選択した商品は在庫切れのため、店頭では非表示になっています。
• 間違った製品ハンドルを使用して、製品固有のページをプレビューしています。
• Shopify の設定とプレビューのコンテキストを再確認してください。

4. 製品リスト要素内で製品をフィルタリングできますか?

いいえ。商品リスト要素はライブフィルタリングやスマートフィルターをサポートしていません。スマート商品フィルター＆検索を使用している場合は、商品リストが独自の出力に置き換えられます。

5. リスト内の製品カードにスタイルを設定することは可能ですか?

はい。商品タイトル、価格、ボタン、間隔、レイアウトのスタイルを設定できます。 高機能 製品リスト内のタブと個々のブロックの設定。

6. 同じ商品リスト要素を複数のページで使用できますか?

各商品リスト要素はそれぞれのページに固有のものです。ただし、他のページで設定を再利用したい場合は、ページを複製したり、テンプレートとして保存したりすることができます。

7. GemPages 製品リストをスマート製品フィルターと検索で使用できますか?

いいえ。Smart Product Filter & Searchアプリは独自の商品リストとフィルター構造を生成します。そのため、GemPagesの商品リスト要素とは互換性がありません。

8. ホームページに製品リストが表示されないのはなぜですか?

• 検索エンジンに認識されるよう、 GemPagesホームページがデフォルトとして設定されていますそうでない場合、Shopify は代わりにテーマのホームページを表示し続けます。
• ホームページが 公表保存されるだけではありません。
• あなたが使用している場合 収集 製品のソースとして:
  • コレクションはShopifyで公開されています。
  • コレクションにはオンライン ストアで表示される製品が含まれています。
• あなたが使用している場合 製品 製品のソースとして:
  • 製品リスト設定で少なくとも 1 つの製品が選択されています。

9. 製品リスト要素で製品の順序を変更できますか?

はい、選択した場合 製品 （手動ピック）を使用すると、商品の順序を自由に調整できますが、 収集 ソースとして、順序はコレクションのデフォルトの並べ替えに従います。