カートに追加: 顧客がショッピングカートに商品を追加できるようにします

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

カートに追加要素は、ClickFunnels の重要な機能です。顧客は、販売ページから商品を直接選択してショッピングカートに追加できます。この要素は、ブランドに合わせてユーザー インタラクションを最適化するための広範なカスタマイズ オプションを提供します。この記事では、カートに追加要素の使用方法、その設定を構成する方法を学びます。

必要条件

カートに追加要素を使用する場所

[カートに追加] 要素は、次のコンテキストで機能します。

  • ストア製品ページ

  • ストアページ:  ストアフロント、コレクション、チェックアウト[ストアぺーじぺーじ:ストアフロント、コレクション、チェックアウト]

  • サイトページとランディングページ:製品コレクション要素内で使用する場合

  1. エディターでサポートされているページを開きます。

  2. サイトページとランディングページで、ページに Products Collection 要素が含まれていることを確認します

  3. エディターに [ カートに追加 ] 要素を追加します。

大事な：

Cart Icon要素は、サポートされているページに動的なカートの更新を表示するために、カートに追加要素に必要です。これがないと、エディターは Cart Icon 要素を挿入するように警告を表示します。

ページエディタでのカートに追加要素の追加

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

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

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

  4. [ よく使用] カテゴリから、[ カートに追加 ] 要素を選択します。

カートに追加要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。

カートに追加要素の仕組み

[カートに追加] 要素は、[ストア製品] ページ内でのみ機能するように設計されています。 カートアイコン 要素も正しく機能するために同じページ上にある必要があります。この統合により、顧客は製品の閲覧と選択中にカートを簡単に管理できるようになります。

仕組みは次のとおりです。

[カートに追加] 要素は、配置されているページから製品コンテキストを読み取り、その製品を買い物客のカートに追加します。 カート アイコン要素 は、カート パネルが表示され、リアルタイムで更新されるように、同じページに存在する必要があります。

  1. 製品のコンテキストと選択:

    • ストア製品ページでは、要素は現在表示されている製品を参照します。

    • ストアフロント ページまたは コレクションページ 、および製品コレクション要素を含むサイトページまたはランディングページでは、要素は関連する製品カードに表示されている製品を参照します。

  2. カートへの追加: [製品] ページで、顧客は希望のオプション (該当する場合) を選択し、[ カートに追加 ] ボタンをクリックすると、カート機能がトリガーされます。

  3. カート表示: 顧客がカートに製品を追加すると、 カートアイコン 要素によって、ページの 右側のパネル からショッピングカートが表示されるようになります。このパネルでは、ユーザーは追加したアイテムを表示したり、数量を変更したり、チェックアウトに進んだりすることができます。

カート  に追加とカートアイコン の 要素を組み合わせることで、顧客がストアから商品を選択して購入するための合理化された直感的なプロセスが作成されます。この設定により、ユーザー エクスペリエンスが向上し、コンバージョンが促進され、ショッピングの旅が楽になります。

役立つリソース:

  1. Getting Started with ClickFunnels Store

  2. How to Create and Manage Products

  3. How to Manage Product Variants

  4. Products - How to Add and Manage Pricing

  5. How to Customize Your Store Theme and Design

  6. How to Test Store Checkout in TEST Mode

カートに追加要素のカスタマイズ

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

上マージン

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

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

名前、説明、および比較場所

これらのスイッチは、Add To Cart 要素で UI に商品タイトル、説明、および "比較" 価格を表示するかどうかを制御します。要素を簡潔に保ち、買い物客により多くのコンテキストを公開するために使用します。

  • 名前： 要素内の製品タイトルを表示または非表示にします。

  • 形容： 商品説明テキストを表示または非表示にします。

  • 比較場所: 元の価格/参照価格が存在する場合に、取り消し線付きの「比較価格」を表示または非表示にします。

テキスト設定

テキスト設定では、商品の見出し、説明、価格、要素に関連付けられた追加テキストなど、カートに追加コンテナ内のテキスト要素をカスタマイズできます。これらの設定を変更することで、テキストがブランディングと一致し、視覚的に魅力的であり、デスクトップとモバイル デバイスの両方で読みやすい状態を維持できます。これらの設定により、[カートに追加] 要素に表示されるテキスト情報の外観を完全に制御できます。

  • フォント ファミリ: [カートに追加] 要素内に表示されるテキストのフォント スタイルを選択します。

  • 見出しのサイズと色: 商品タイトルのテキストのサイズと色を変更します。

  • 説明のサイズと色: 製品説明テキストのサイズと色をカスタマイズします。

  • 価格のサイズと色:製品価格表示のサイズと色を設定します。

  • 色で比較: 商品がセール中の場合、「比較価格」の色を変更します。

  • 入力テキストの色: 入力フィールド内のテキストの色を調整します (数量選択など)。

ボタン

ボタン設定では、カートに追加要素内の「カートに追加」ボタンの外観と動作をカスタマイズできます。これらの設定により、ボタンがブランド スタイルに合致し、視覚的に魅力的になり、顧客の購入完了が促進されます。サイズ、形状、テキスト、色などのさまざまな側面を調整して、製品ページのデザインにシームレスにフィットするボタンを作成できます。

  • ボタンサイズ: プリセットサイズ(小、中、大)から選択して、ボタンの全体的な寸法を決定します。

  • すべての角: ボタンの境界線の半径を調整して、正方形、丸み、またはその中間にします。

  • エッジを分離: このオプションを有効にすると、ボタンの各コーナーを個別にカスタマイズして、独自の形状にすることができます。

  • カートに追加テキスト: ボタンに表示されるテキストを変更します (例: 「今すぐ購入」または「カートに追加」)。

  • カートに入れる BG (背景) の色: ボタンの背景色を変更して、目立たせたり、ページのデザインに合わせたりします。

  • カートにテキストの色を追加: ボタンのテキストの色を調整して、視認性とコントラストを向上させます。

入力

入力設定では、[カートに追加] 要素内の入力フィールドの外観を構成できます。これらの入力フィールドは、商品設定で商品のバリエーション(サイズ、色、サブスクリプションオプションなど)が有効になっている場合にのみ表示されます。このセクションは、顧客に表示される製品バリエーション オプションについて、プロフェッショナルでまとまりのある外観を維持するのに役立ちます。

  • 入力サイズ: 入力フィールドのサイズ (小、中、または大) を調整して、デザインにシームレスに収まるようにします。

  • 入力 BG (背景) 色: 入力フィールドの背景色をカスタマイズして、目立たせたり、ページと調和させたりします。

  • 入力テキストの色: 読みやすくするために、入力フィールド内のテキストの色を変更します。

  • 入力境界線の色: 入力フィールドの境界線の色を、ページ デザインに一致または補完するように設定します。

  • すべての角: 入力フィールドの境界線の半径を調整して、正方形、丸み、またはカスタマイズします。

  • エッジを分離: このオプションを有効にすると、入力フィールドの各コーナーを個別にスタイル設定して、よりユニークなデザインになります。

大きさ

パディング (上部、下部、側面): カートに追加要素内の内部間隔を制御して、ページの他の部分に完全に収まるようにします。

バックグラウンド

色: [カートに追加] 要素の背景色を追加して、ページ上で目立たせます。

国境

[罫線] 設定では、[カートに追加] 要素の周りの罫線の外観をカスタマイズできます。これらの設定は、要素の構造を定義し、ページ デザインとシームレスに融合させるのに役立ちます。境界線スタイル(単線、破線、点線など)を選択すると、追加のカスタマイズオプションが使用可能になります。以下は設定の内訳です。

  • 罫線スタイル: 要素に必要な罫線のタイプ(単線、破線、点線など)を選択します。スタイルを選択すると、追加のカスタマイズ オプションが表示されます。

  • 境界線: 方向コントロールを使用して、要素の特定の側面 (上、下、左、右など) またはすべての側面に境界線を適用します。

  • 色: ブランディングに合わせて境界線の色を設定したり、要素を目立たせたりします。

  • ストローク サイズ: スライダーを使用するか、ピクセル値を入力して境界線の太さを調整し、正確に制御します。

  • すべての角: 鋭い角から完全に丸みを帯びたエッジまで、境界線の丸みを変更します。

  • エッジを分離: このオプションを有効にすると、境界線の各コーナーを個別にスタイル設定し、独自のカスタマイズされたデザインが可能になります。

コントロールパネル

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

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

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

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

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

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

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

詳細設定

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

関連記事