(コレクション)商品: ページで商品を紹介する

  • 更新日 Nov 11, 2025
  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ページ上に複数の商品をきちんと表示するという課題は、特に増え続ける在庫を管理する場合、すぐに複雑になる可能性があります。ClickFunnels は、利用可能なすべての製品を 1 か所に表示するように設計された動的グリッド コンテナである Products コレクション要素を使用して、これを簡素化します。この記事では、Products コレクション要素がワークスペースの製品を動的に表示する方法について説明します。

必要条件

  • アクティブなClickFunnelsアカウント

  • ワークスペースに少なくとも 1 つの product が作成されている

  • 製品設定で有効になっている「オンラインストア」オプション

  • ファネル ページに追加された商品(ファネル ページで使用する場合)

コレクション要素を理解する

フォトアルバムを整理していると想像してください。アルバムはコレクション要素であり、個々の写真を保持して表示するコンテナです。アルバム内の各写真は、製品、ブログ投稿、レッスンなど、コレクション内のアイテムを表します。

さて、アルバムがどのようにアレンジされているかを考えてみましょう。

  • 写真は、各ページの 行と列 に表示されます (コレクション要素の グリッド レイアウトと同様に)。たとえば、1 行に 3 枚の写真があり、1 ページに 4 行の写真があるとします。

  • アルバムに 1 ページに収まる以上の写真がある場合は、ClickFunnels の大きなコレクションでのページネーションの動作と同様に、 ページ番号 を追加して追加のページをめくります。

ClickFunnels の Collection 要素は、コンテンツのコレクションを動的に表示するように設計されたコンテナーです。コレクションは、製品、ブログ投稿、コースモジュール、レッスンなどのグループ化された項目で構成されます。ページにコレクション要素を追加すると、これらのアイテムを整理された視覚的に魅力的な方法で紹介できます。各コンテナーでは、製品名、説明、画像、価格、リンクなどの動的コンテンツ要素を挿入して、コレクション内の関連データを表すことができます。

バックグラウンドでは、Collection 要素は CSS グリッド レイアウト ( display: grid プロパティを介して) を使用してコンテンツを整理します。このレイアウトでは、コンテナーが行と列に分割され、すべてのアイテムが等間隔に配置され、整列されます。グリッド レイアウトの構造により適応性が高く、要素の数、指定された列の数、使用可能な画面サイズに基づいてアイテムの配置が自動的に調整されます。

例えば：

  • 訪問者がストアを閲覧するときに、商品コレクション要素を使用して、名前、価格、説明などの重要な詳細を含むすべての商品を表示できます。

  • ブログ投稿コレクション要素を使用すると、ブログから最近または注目のブログ投稿を紹介できます。

  • レッスンコレクション要素は、モジュールテンプレートページ内のすべてのレッスンを表示するのに最適であり、モジュールコレクション要素は、コースホームページにすべてのコースモジュールを一覧表示できます。

エディターでの Products コレクション要素の追加

  1. ページエディタ内で、要素を配置するセクションを追加します。

  2. そのセクション内に 行 を追加します。

  3. または、セクションと行の代わりに Flex コンテナーを挿入します。

  4. 行内のオレンジ色の + プラスまたは  [新しい要素を追加] ボタンをクリックして、新しい要素を挿入します。

  5. [ コレクション] カテゴリから、[ 製品 ] 要素を選択します。

  6. 挿入したら、行ごとに表示される項目の数を設定します。デフォルトでは、要素には行ごとに 3 つの項目が表示されます。この設定を変更して、レイアウトを調整できます。たとえば、「行あたりの項目数」を 4 つ、「ページあたりの項目数」を 8 つ選択すると、それぞれが 4 つの列に分割された 2 列の行が作成されます。

  7. Collection 要素の各グリッド内に、関連するコンテンツ要素を挿入します。たとえば、「Products」コレクション要素の場合、「Products」コレクション要素にデータを動的に入力するように特別に設計された Name、Description、Price、Image、Link、Add to Cart 要素を挿入できます。

    手記：

    コレクション要素を追加すると、ClickFunnels は適格な要素を赤い境界線で強調表示し、互換性のある動的アイテムを確実に追加できるようにします。

  8. 関連する要素が追加されると、すべてのグリッド列に複製されます。これらの要素内の液体構文は、製品からデータを動的に取得し、各アイテムが一意であることを保証します。この要素には、オンラインストアで表示されているすべての利用可能な製品が表示されます。

手記：

Products コレクション要素は、ファネル ページに表示されます。製品がページに追加された場合にのみアイテムが表示されます。商品が追加されていない場合、グリッドは空になり、ページの読み込み時にレンダリングされません。バンプでフィルタリングは、要素がファネルページに追加されたときに機能し、 すべての商品、 バンプ商品のみ、または バンプ以外の商品のみを表示できます。

グリッドへの動的要素の追加

Products コレクション要素をページに追加すると、各グリッド カードにコレクション対応の小さな要素が入力されます。カーソルがグリッド内にあり、要素パネルを開くと、ClickFunnels は互換性のある Product 要素を赤い境界線 で強調表示し、コレクション内で動的に機能することを示します。これらの要素は、そのグリッドで表される製品からデータを自動的に取得します。手動でのデータ入力は 必要ありません。

動的コンテンツの表示方法

Product 要素をグリッドにドロップすると、エディターには次のようなプレースホルダーが表示されます {{product.name}} または {{product.display_price}}です。これらは Liquid プレースホルダーです。ライブページでは、ClickFunnels はそれらをワークスペースの 実際の製品データ に置き換えます。

手記：

1 つのグリッド アイテムに要素を追加すると、ClickFunnels はコレクション内のすべてのグリッド アイテムにそれをレプリケートします。構造は一貫していますが、内容は製品ごとに変化します。

各グリッド項目内に追加できる要素

  • 名前
    それが示すもの:商品設定の商品名。
    プレースホルダ： {{product.name}}

  • 形容
    それが示すもの:商品設定で保存した商品説明。
    プレースホルダ： {{product.description}}

  • 価格
    それが示すもの:ストアで設定されている商品の価格。
    プレースホルダー: 通常、{{product.display_price}}として表示されます です。

  • 画像
    それが示すもの:商品設定に保存されている商品画像。
    プレースホルダ： 画像

  • リンク
    機能: グリッド項目product pageを指す動的テキストリンクを追加します 。
    プレースホルダ： 詳細を見る

  • カートに入れる(チェックアウト→カートに入れる)
    機能:そのグリッドアイテム内の特定の商品を買い物客のカートに追加します。

製品コレクション要素のカスタマイズ

コレクション要素にカーソルを合わせると、その境界線がマゼンタで強調表示されます。その設定にアクセスするには、耳のアイコン⚙️をクリックするか、要素を直接クリックします。

上マージン

The Top Margin setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the Body will be the parent.

You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (px) or percentage (%) to create consistent spacing across screen sizes. 

フィルター

フィルター設定では、表示する製品を制御できます。

  • バンプでフィルター: このオプションは、ファネルページで商品コレクション要素が使用され、そのページに商品が追加されている場合に機能します。バンプ商品のみ、バンプ商品のみ、または目標到達プロセスページに追加されたすべての商品を表示できます。

    • すべて表示: 目標到達プロセスページに追加されたすべての商品(バンプ商品と非バンプ商品の両方を含む)を表示します。

    • バンプ商品のみを表示: バンプ商品としてマークされた商品のみをファネルページに表示します。

    • バンプ以外の商品を表示: バンプ商品としてマークされていない商品のみを目標到達プロセスページに表示します。

  • コレクションでフィルタリング: ストアで管理している関連商品のグループである特定のproduct collectionの商品のみを表示します (例:「新着商品」、「アクセサリー」など)。ページにコレクションコンテキスト(コレクションテンプレートなど)が既にある場合は、現在のコレクション名を選択します。グリッドは、訪問者がコレクションを切り替えると自動的に更新されます。コレクションを選択してワークスペースから手動で選択し、グリッドをそのコレクションにロックします。

手記：

  • ファネルページで、グリッドに表示するアイテムが表示されるように、ページに商品を追加します。それ以外の場合、フィルタ( バンプでフィルタリング)は効果がなく、グリッドはレンダリングされません。

  • 「コレクションでフィルタリング」は 、 表示できる商品を制御します。その他の設定 (ページネーションやアイテムごとの要素など) は、その表示 方法 を制御します。

役立つリソース:

  1. Adding Products in a Funnel Step

  2. How to Create and Manage a Product Collection

コレクション設定


コレクション設定では、コンテナ内でグリッドアイテム(カード)を配置およびページ分割する方法を構成できます。

  • 行あたりの項目: グリッドの各行に表示する項目の数を選択します。レイアウトは新しい行に折り返され、小さな画面に自動的に適応します。

  • ページあたりのアイテム数: コンテナ内の 1 つのページにレンダリングされるアイテムの総数を設定します。コレクションにこの数を超える場合、ClickFunnels は追加のページを作成します。

  • ページネーションを非表示にする: ページネーションをオンまたはオフにします。有効にすると、ページ番号コントロールが削除され、対象となるすべての項目が 1 つの連続したリストにレンダリングされます。非常に大きなコレクションの場合は、読み込み時間とナビゲーションを改善するために、ページネーションをオンのままにしておくことを検討してください。

  • ページネーションアイテムの色: ページネーションアイテムのテキスト/アイコンの色(例:数字の1、2、3)。

  • ページネーション項目の背景色: 非アクティブなページネーション項目の背景色。

  • ページネーションの境界線の色: 各ページネーション項目の周りの境界線の色。

  • ページネーションアクティブアイテムの色:現在の(アクティブな)ページアイテムのテキスト/アイコンの色。

  • ページネーションアクティブアイテムの背景色: アクティブなページアイテムの背景色。

  • ページネーションアクティブな境界線の色: アクティブなページ項目の境界線の色。

ヒント：

アクセシビリティのために、ページ番号が読みやすいように、十分なコントラストのあるページネーション色を使用します。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

  • ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ ビューでのみ表示されます。

  • モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。

  • 目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。

  • コード (</>) アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。

  • ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。

関連記事