カートに追加: 顧客がショッピングカートに商品を追加できるようにします
公開日: 更新日:
カートに追加要素は、ClickFunnels の重要な機能です。顧客は、販売ページから商品を直接選択してショッピングカートに追加できます。この要素は、ブランドに合わせてユーザー インタラクションを最適化するための広範なカスタマイズ オプションを提供します。この記事では、カートに追加要素の使用方法、その設定を構成する方法を学びます。
-
アクティブなClickFunnelsアカウント
-
ストアの商品ページ、ストアフロントまたはコレクションページ、または
-
サイトのホームページ(商品コレクション要素内)。サイトページを追加および管理する方法を参照してください。
-
ページに追加されたカートアイコン要素(動的カート更新用)
カートに追加要素を使用する場所
Section titled “カートに追加要素を使用する場所”カートに追加要素は、次のページで機能します。
-
ストアの商品ページ
-
ストアページ: ストアフロントとコレクション
-
サイトのホームページ: 商品コレクション要素内で使用する場合
この要素は、ストアのチェックアウトページやランディングページでは使用できません。
-
エディターでサポートされているページを開きます。
-
サイトのホームページでは、ページに商品コレクション要素が含まれていることを確認します。
-
エディターに カートに追加 要素を追加します。
ページエディタでのカートに追加要素の追加
Section titled “ページエディタでのカートに追加要素の追加”-
ページエディタ内で、要素を配置する場所に セクション を追加します。
-
そのセクション内に 行 を追加します。
-
行内のオレンジ色の + プラス または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
-
チェックアウト カテゴリから カートに追加 要素を選択します。ストアの商品ページでは、Commonly Used カテゴリにも表示されます。
カートに追加要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。
カートに追加要素の仕組み
Section titled “カートに追加要素の仕組み”カートに追加要素は、ストアの商品ページと、上記のその他の対応ページで機能します。正しく機能させるには、カートアイコン要素も同じページ上にある必要があります。この統合により、顧客は製品の閲覧と選択中にカートを簡単に管理できるようになります。
仕組みは次のとおりです。
Section titled “仕組みは次のとおりです。”カートに追加要素は、配置されているページから商品のコンテキストを読み取り、その商品を買い物客のカートに追加します。カートアイコン要素は、カート パネルが表示され、リアルタイムで更新されるように、同じページに存在する必要があります。
-
商品のコンテキストと選択:
-
ストアの商品ページでは、要素は現在表示されている商品を参照します。
-
ストアフロントページまたはコレクションページ、および商品コレクション要素を含むサイトのホームページでは、要素は関連する商品カードに表示されている商品を参照します。
-
-
カートへの追加: 商品ページで、顧客は希望のオプション (該当する場合) を選択し、カートに追加 ボタンをクリックすると、カート機能がトリガーされます。
-
カート表示: 顧客がカートに商品を追加すると、 カートアイコン 要素によって、ページの 右側のパネル からショッピングカートが表示されるようになります。このパネルでは、ユーザーは追加したアイテムを表示したり、数量を変更したり、チェックアウトに進んだりすることができます。
カートに追加要素とカートアイコン要素を組み合わせることで、顧客がストアから商品を選択して購入するための合理化された直感的なプロセスが作成されます。この設定により、ユーザー エクスペリエンスが向上し、コンバージョンが促進され、ショッピングの旅が楽になります。
カートに追加要素のカスタマイズ
Section titled “カートに追加要素のカスタマイズ”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 ⚙️ アイコンをクリックするか、要素を直接クリックします。
さまざまな商品での見え方を確認するには、設定パネル上部のプレビューセレクターで Regular Product と Variant Product を切り替えます。
上マージン
上マージン設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
名前、説明、比較
これらのスイッチは、カートに追加要素に商品タイトル、説明、および「比較」価格を表示するかどうかを制御します。要素を簡潔に保ち、買い物客により多くのコンテキストを公開するために使用します。
-
名前: 要素内の商品タイトルを表示または非表示にします。
-
説明: 商品説明テキストを表示または非表示にします。
-
比較: 元の価格/参照価格が存在する場合に、取り消し線付きの「比較価格」を表示または非表示にします。
テキスト
テキスト設定では、商品の見出し、説明、価格、要素に関連付けられた追加テキストなど、カートに追加コンテナ内のテキスト要素をカスタマイズできます。これらの設定を変更することで、テキストがブランディングと一致し、視覚的に魅力的であり、デスクトップとモバイル デバイスの両方で読みやすい状態を維持できます。これらの設定により、カートに追加要素に表示されるテキスト情報の外観を完全に制御できます。
-
フォントファミリー: カートに追加要素内に表示されるテキストのフォント スタイルを選択します。
-
見出しサイズ と 見出しカラー: 商品タイトルのテキストのサイズと色を変更します。
-
説明サイズ と 説明カラー: 商品説明テキストのサイズと色をカスタマイズします。
-
価格サイズ と 価格カラー: 商品価格表示のサイズと色を設定します。
-
比較色: 商品がセール中の場合、「比較価格」の色を変更します。
-
入力テキストカラー: 入力フィールド内のテキストの色を調整します (数量選択など)。
ボタン
ボタン設定では、カートに追加要素内の「カートに追加」ボタンの外観と動作をカスタマイズできます。これらの設定により、ボタンがブランド スタイルに合致し、視覚的に魅力的になり、顧客の購入完了が促進されます。サイズ、形状、テキスト、色などのさまざまな側面を調整して、製品ページのデザインにシームレスにフィットするボタンを作成できます。
-
ボタンサイズ: プリセットサイズ(エクストラスモール、小、中、大、特大)から選択して、ボタンの全体的な寸法を決定します。
-
すべての角: ボタンの角の半径を調整して、正方形、丸み、またはその中間にします。
-
エッジを分ける: このオプションを有効にすると、ボタンの各コーナーを個別にカスタマイズして、独自の形状にすることができます。
-
カートに追加するテキスト: ボタンに表示されるテキストを変更します (例: 「今すぐ購入」または「カートに追加」)。
-
カートに追加するBG: ボタンの背景色を変更して、目立たせたり、ページのデザインに合わせたりします。
-
カートに追加する色: ボタンのテキストの色を調整して、視認性とコントラストを向上させます。
入力
入力設定では、カートに追加要素内の入力フィールドの外観を構成できます。これらの入力フィールドは、商品設定で商品のバリエーション(サイズ、色、サブスクリプションオプションなど)が有効になっている場合にのみ表示されます。このセクションは、顧客に表示される製品バリエーション オプションについて、プロフェッショナルでまとまりのある外観を維持するのに役立ちます。
-
入力サイズ: 入力フィールドのサイズ (エクストラスモール、小、中、大、または特大) を調整して、デザインにシームレスに収まるようにします。
-
入力BGカラー: 入力フィールドの背景色をカスタマイズして、目立たせたり、ページと調和させたりします。
-
入力テキストカラー: 読みやすくするために、入力フィールド内のテキストの色を変更します。
-
入力ボーダーカラー: 入力フィールドのボーダーの色を、ページ デザインに一致または補完するように設定します。
-
すべての角: 入力フィールドの角の半径を調整して、正方形、丸み、またはカスタマイズします。
-
エッジを分ける: このオプションを有効にすると、入力フィールドの各コーナーを個別にスタイル設定して、よりユニークなデザインになります。
サイズ
パディング (上、下、サイド): カートに追加要素内の内部間隔を制御して、ページの他の部分に完全に収まるようにします。
背景
色: カートに追加要素の背景色を追加して、ページ上で目立たせます。
ボーダー
ボーダー設定では、カートに追加要素の周りのボーダーの外観をカスタマイズできます。これらの設定は、要素の構造を定義し、ページ デザインとシームレスに融合させるのに役立ちます。なし 以外の ボーダースタイル(実線、破線、点線)を選択すると、追加のカスタマイズオプションが使用可能になります。以下は設定の内訳です。
-
ボーダースタイル: なし、実線、破線、点線 から選択します。なし以外のスタイルを選択すると、以下のボーダーオプションが表示されます。
-
ボーダー: 方向コントロールを使用して、要素の特定の辺 (上、下、左、右など) またはすべての辺にボーダーを適用します。
-
ボーダーの色: ブランディングに合わせてボーダーの色を設定したり、要素を目立たせたりします。
-
ボーダー幅: スライダーを使用するか、ピクセル値を入力して、ボーダーの太さを 0～50 px の範囲で調整します。
-
すべての角: 鋭い角から完全に丸みを帯びた角まで、角の丸みを変更します。
-
エッジを分ける: このオプションを有効にすると、各コーナーを個別にスタイル設定し、独自のカスタマイズされたデザインが可能になります。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
-
デスクトップ (🖥️**) アイコン**: コンテナはデスクトップ ビューでのみ表示されます。
-
モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。
-
目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの レイアウト メニューをクリックして、非表示のコンテナーを見つけることができます。すべて、デスクトップ、または モバイル アイコンを選択して、エディターで再表示します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ごみ箱 (🗑️**) アイコン**: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。