ストアカートコンポーネントのカスタマイズ

ClickFunnelsの カートコンポーネント は、顧客がストアページで カートアイコン をクリックしたときにショッピングカートを表示する組み込み機能です。ポップアップのように機能し、右側からスライドしてカートの内容を表示し、数量の調整を可能にし、チェックアウトへの直接パスを提供します。この記事では、カート コンポーネントがどのように機能し、カート アイコン要素と相互作用するかを学びます。

必要条件

1. アクティブなClickFunnelsアカウント

2. The Store app added to your workspace

3. The Cart Icon element added to the navigation

カートコンポーネントの仕組み

カート コンポーネントは、スタンドアロン ページではなく、ClickFunnels ストアの統合機能です。右側からスライドしてくるポップアップのように動作し、Cart Iconによって発動されなければ現れ る。また、色、フォント、特定のスタイル オプションなど、カート モーダルを表示およびカスタマイズすることもできます。カートコンポーネントとカートアイコン要素が連携して、シームレスなショッピング体験を提供します。

1. カートへのアイテムの追加

   • 顧客はAdd To Cartボタンを使用して商品をカートに追加 します 。
     

   • カートアイコンは、カート内のアイテムの数を反映するように動的に更新されます。

2. カートを開ける

   • [カート アイコン] をクリックすると、右側からスライドして入るカート コンポーネントがトリガーされます。
     

   • カートには、商品の詳細、価格、数量管理、 チェックアウトオプションが表示されます。

3. カートの内容物の管理

   • 顧客は、数量を増減したり、カートから直接商品を削除したりできます。

   • 「ショッピングを続行」ボタンを使用すると、顧客はブラウジングに戻ることができます。

4. チェックアウトに進む

   • 「チェックアウト」をクリックすると、顧客はストアCheckout Pageに移動し 、購入を完了します。

   • 注文が完了すると、カートは空の状態にリセットされます。

カートコンポーネントへのアクセス

1. ワークスペースから、左側のメニューの ストア アプリに移動します。

2. [ 概要] を選択します。

3. 右上隅にある [デザイン ストア ] をクリックします。
   

4. [サイトのテーマ] ページで、[ストア フロント] を展開します。

5. [カート] メニューを選択して、カート モーダルをプレビューします。

6. [カート設定の編集] ⚙️ オプションまたはカート モーダル内の任意の場所をクリックして、モーダル設定にアクセスします。
   

7. 設定を調整し、カートモーダルのデザインをカスタマイズします。

カートコンポーネントのカスタマイズ

テーマの カート コンポーネントをクリックすると、カートモーダルが表示されます。[ カート設定の編集] ⚙️ オプションをクリックするか、モーダル プレビュー内の任意の場所をタップして設定パネルを開きます。