コンテンツにスキップ
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterCF クラシックヘルプセンター

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

公開日: 更新日:

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

必要条件

Section titled “必要条件”

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

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

  • ストアのストアフロントページで使用する場合: 商品の 販売チャネル タブで ストア スイッチがオンになっている

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

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

Section titled “コレクション要素を理解する”

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

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

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

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

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

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

例えば：

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

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

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

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

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

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

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

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

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

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

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

  7. コレクション要素の各グリッド内に、関連するコンテンツ要素を挿入します。たとえば、「Products」コレクション要素の場合、「Products」コレクション要素にデータを動的に入力するように特別に設計された商品名、商品説明、商品価格、商品画像、商品リンク、カートに追加の各要素を挿入できます。カートに追加はファネルページには追加できません。
    商品コレクションのアイテム内で使える要素：商品名、商品説明、商品価格、商品画像、商品リンク、カートに追加

  8. 関連する要素が追加されると、すべてのグリッド列に複製されます。これらの要素内の Liquid 構文は、商品からデータを動的に取得し、各アイテムが一意であることを保証します。表示される商品はページの種類によって異なります。表示される商品を参照してください。

表示される商品

Section titled “表示される商品”

商品要素に表示される商品は、要素を配置したページの種類によって異なります。

  • 商品ページ: そのページの商品のみ。コレクションでフィルター をオンにすると、代わりに選択したコレクションの商品が表示されます(そのページの商品は除かれます)。

  • ファネルページ: そのファネルステップに追加された商品。

  • ストアページ: オンラインストアに表示され、販売可能な商品。

  • 商品コレクションページ: そのコレクションに含まれる、アーカイブされていない商品。カスタマーセンターにのみ表示される商品は含まれません。

  • ストアのアップセルページ: アップセルでコレクションを使用している場合は、そのコレクションの商品。それ以外の場合、商品は表示されません。

  • カスタマーセンター: カスタマーセンターに表示され、販売可能な商品。

  • その他のページ: アーカイブされていないすべての商品。ただし、カスタマーセンターにのみ表示される商品は除きます。

その後、バンプでフィルター や コレクションでフィルター など、要素のフィルターでこのリストを絞り込みます。

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

Section titled “グリッドへの動的要素の追加”

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

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

Section titled “動的コンテンツの表示方法”

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

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

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

  • 商品名
    表示内容: 商品設定の商品名。
    プレースホルダ： {{product.name}}

  • 商品説明
    表示内容: 商品設定で保存した商品説明。
    プレースホルダ： {{product.description}}

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

  • 商品画像
    表示内容: 商品設定に保存されている商品画像。
    プレースホルダ： 画像

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

  • カートに追加 (チェックアウト → カートに追加)
    機能: そのグリッドアイテム内の特定の商品を買い物客のカートに追加します。ファネルページでは使用できません。

商品要素のカスタマイズ

Section titled “商品要素のカスタマイズ”

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

上マージン

上マージン 設定では、現在のコンテナ(セクション、行、フレックス、要素)とそのすぐ上にあるコンテナとの間のスペースを制御できます。前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行するコンテナが追加されていない場合は、Body が親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

フィルター

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

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

    • すべて表示: ファネルページに追加されたすべての商品(バンプ商品と非バンプ商品の両方を含む)を表示します。

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

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

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

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

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

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

  • ページネーションを隠す: コレクションの下に表示されるページ番号を非表示にします。コレクションには ページあたりのアイテム数 で設定した数のアイテムしか表示されないため、訪問者は最初のページより後のアイテムを見ることができません。ページ番号なしですべてのアイテムを表示するには、ページあたりのアイテム数 をすべてのアイテムが収まる数 (最大 100) に設定してから、ページネーションを隠す をオンにします。

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

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

  • ページネーションのボーダーの色: 各ページネーションアイテムの周りのボーダーの色。

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

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

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

詳細設定

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

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
設定パネルのヘッダーにあるコード（</>）アイコンと、下部バーの可視性・すべて・デスクトップ・モバイル・目・ゴミ箱アイコン

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

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

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

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

  • コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

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