カートアイコン: 顧客がショッピングカートを追跡して開くことを許可します
公開日: 更新日:
ClickFunnels の カートアイコン 要素は、顧客がストアページとサイトのホームページでショッピングカートを追跡してアクセスできるようにするスタンドアロン機能です。現在のカートの状態が表示され、顧客はアイコンをクリックしてショッピングカートを開いて表示できます。この記事では、カートアイコンの仕組み、その機能、設定方法を学びます。
-
アクティブなClickFunnelsアカウント
-
ストアページ、またはサイトのホームページ
カートアイコンを使用する場所
Section titled “カートアイコンを使用する場所”カートアイコン要素は、ストアページ(商品、ストアフロント、コレクション、チェックアウトページなど)で使用できます。さらに、_商品コレクション_要素内に_カートに追加_要素が追加された場合、サイトのホームページでも機能します。カートアイコンは、ファネルページやランディングページでは使用できません。
これにより、顧客はカートのステータスを表示し、買い物中にショッピング カートにアクセスするための一貫したユーザーフレンドリーな方法が提供されます。カートに商品を追加する場合でも、戻って他の商品を参照する場合でも、注文を完了した場合でも、カートアイコンは現在のカートの状態を反映するように動的に更新され、顧客はカートを開いてさらにアクションを実行できるようになります。
ページエディタでのカートアイコン要素の追加
Section titled “ページエディタでのカートアイコン要素の追加”-
ページエディタ内で、要素を配置する場所に セクション を追加します。
-
そのセクション内に 行 を追加します。
-
行内のオレンジ色の + プラス または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
-
チェックアウト カテゴリから カートアイコン 要素を選択します。
カートアイコン要素を追加すると、ページデザインに合わせて外観をカスタマイズできます。
カートアイコンの仕組み
Section titled “カートアイコンの仕組み”カートアイコンは、カートのステータスをリアルタイムで追跡し、カートに簡単にアクセスできるようにすることで、顧客にスムーズで直感的なショッピング エクスペリエンスを保証します。
-
ストアページ全体のカートの更新:
-
顧客が カートに追加 ボタンを使用してカートに商品を追加すると、カートアイコンがすぐに更新され、カート内のアイテムの総数が表示されます。
-
この更新は、すべてのストア ページで永続的です。たとえば、顧客が商品ページのカートに商品を追加し、ストアフロントに戻ると、カートアイコンに更新された商品数が表示されます。
-
-
ショッピングカートにアクセスします。
- カートアイコンをクリックすると、ページの右側からショッピングカートパネルを開くことができます。このパネルには、カートに追加されたすべてのアイテム、その数量、および合計コストが表示されます。
-
ショッピングの継続性:
- 顧客はカートに商品を追加し、カートの状態を失うことなくブラウジングを続けることができます。カートアイコンは、すべてのストアページで表示およびアクセス可能なままであり、カート内のアイテムの数を示し、カートへのアクセスを提供します。
-
空のカートの状態:
- カートが空の場合 (注文を完了した後、またはすべての商品を削除した後など)、カートアイコンはこの状態を反映するように更新されます。たとえば、顧客が購入完了後に注文確認ページにアクセスすると、カートアイコンに空のカートが表示されます。
カートアイコン要素のカスタマイズ
Section titled “カートアイコン要素のカスタマイズ”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 ⚙️ アイコンをクリックするか、要素を直接クリックします。
上マージン
上マージン設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
アイコン設定
-
アイコンサイズ: ページデザインに合わせて、エクストラスモール、小、中、大、または特大を選択します。
-
アイコンスタイル: カートアイコンの視覚的表現を カート、バスケット、バッグ、ストア、トラック から選択します。
-
アイコンの色: カートアイコンの色をブランドに合わせてカスタマイズします。
-
整列: カートアイコンをコンテナ内の左、中央、または右に配置します。
カウント設定
-
カウントの色: カートアイコンに表示される番号の色を変更し、カート内のアイテムの数を示します。
-
カウントの背景色: カウント番号の背景色を設定して、目立たせます。
チェックアウトページでのリンクの動作
チェックアウトページでのリンクの動作 オプションは、顧客がカートに商品を追加してチェックアウトページに進んだ後のカートアイコンの動作を決定します。これにより、カートアイコンの可視性と機能を制御することで、チェックアウト プロセス中のエクスペリエンスが合理化されます。各オプションの仕組みは次のとおりです。
-
ストアにリダイレクト: カートアイコンをクリックすると、顧客はストアに戻ってカートが開き、カートの内容を確認したり買い物を続けたりできます。これがデフォルトのオプションです。
-
カートアイコンを非表示: カートアイコンはチェックアウトページに表示されません。これにより、気を散らすものを回避し、顧客は購入を完了することに集中できるようになります。
-
カートアイコンを無効にする: カートアイコンはチェックアウトページには表示されたままですが、非アクティブでクリックできないため、カートへのアクセスを防ぎながら一貫したデザインが確保されます。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
-
デスクトップ (🖥️**) アイコン**: コンテナはデスクトップ ビューでのみ表示されます。
-
モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。
-
目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの レイアウト メニューをクリックして、非表示のコンテナーを見つけることができます。すべて、デスクトップ、または モバイル アイコンを選択して、エディターで再表示します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ごみ箱 (🗑️**) アイコン**: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。