ストアでカートに追加機能を使用する方法

ClickFunnels の カートに追加 機能を使用すると、顧客はチェックアウトに進む前に複数の製品をカートに追加できます。この機能により、ユーザーは簡単なプロセスでカートを確認し、数量を更新し、購入を完了できるため、ショッピング エクスペリエンスが向上します。この記事では、ClickFunnels ストアでカートに追加機能を設定およびカスタマイズする方法を学びます。

必要条件

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

• ワークスペースに追加された Store アプリ

• 少なくとも 1 つ作成された product

• Payments AI Configured Account

カートに追加機能の概要

カートに追加機能を使用すると、顧客は買い物をするときに複数の商品をカートに追加できるため、購入を完了する前に商品を柔軟に閲覧および管理できます。この機能は、チェックアウト プロセスを簡素化し、ストアのデザインに合わせたカスタマイズ オプションを提供することで、ショッピング エクスペリエンスを向上させます。

カートに追加機能の主な利点:

1. ショッピングフローの改善: 顧客は、すぐにチェックアウトを強制されることなく、ストアを自由に閲覧し、商品をカートに追加できます。

2. 注文額の増加: 顧客がチェックアウトする前に複数の商品を確認して追加できるようにすることで、カートは大量の購入を促すことができます。

3. 簡素化されたチェックアウト: シングルステップのチェックアウト プロセスにより摩擦が軽減され、顧客が注文をより迅速に完了できるようになります。

4. 顧客のさらなる制御: 顧客は、購入を確定する前にカートを簡単に管理し、数量を調整したり、商品を削除したりできるため、ユーザー エクスペリエンスの向上と満足度の向上につながります。

ステップ 1: カートに追加要素を商品ページに追加する

顧客がカートに商品を追加できるようにするには、商品ページにカー トに追加 要素を追加する必要があります。

大事な

カートに追加要素は、 ストア ページでのみ機能します。この要素を追加するときは、商品ページを編集していることを確認してください。

1. ClickFunnels ダッシュボードから ストア アプリに移動します。

2. [ 概要 ] セクションに移動し、[ デザイン ストア ] をクリックしてテーマ エディターを開きます。
   

3. 左側のパネルで、サイト テーマ ページの一覧から [ 製品 ] を選択します。

4. 要素を追加するには、オレンジ色の [要素の追加] ボタンをクリックして [要素] メニューを開きます。

5. [要素] メニューから [ チェックアウト] セクションまで下にスクロールし、[ カートに追加 ] をクリックして商品ページに追加します。
   

6. テキスト (「カートに追加」など) やスタイル (色、サイズ、配置) などの 要素の外観を、ストアのデザインに合わせてカスタマイズします。Add to Cart 要素の詳細については、「 Add to Cart: Allow Customers to Add Products to Shopping Cartを参照してください。

7. 変更を保存します。

ステップ2:カートアイコンをストアに追加する

顧客がストア内のどこからでもカートに簡単にアクセスできるようにするには、 カートアイコン をページに追加する必要があります。

大事な

カートアイコンは、 ストア ページとホームページでのみ機能します 。 この要素をこれらのページタイプのいずれかに追加していることを確認してください。

1. ストアテーマエディターから、カートアイコンを追加する ページ を選択します(例:ストアフロントやコレクションページ)。
   

2. オレンジ色の [要素の追加] ボタンをクリックします。

3. 要素メニューから [カートアイコン] を選択します。

4. 目的の場所(ヘッダーなど)に配置します。

5. アイコンの外観をカスタマイズし、ストアのブランドに合わせてサイズ、スタイル、配置を調整します。Cart Icon: Allow Customers to Track and Open the Shopping Cartの要素設定の詳細については、こちらをご覧ください。

6. 変更を保存します。

ステップ 3: カート レビュー モーダルをカスタマイズする

カート レビュー モーダルを使用すると、顧客はカート内の商品を表示および管理できます。

1. ストアテーマエディターから、[カート]ページを選択します。

2. [ カート設定の編集 ] をクリックして、カスタマイズ オプションを開きます。
   

3. 上部で、[ 通常のカート プレビュー] または [空のカート プレビュー] のいずれかを選択します。
   

4. 必要に応じて、次の設定をカスタマイズします。

   • 背景色とコンテナーの色: モーダルの背景色とコンテナーの色を調整します。

   • テキスト と フォントの設定: ヘッダー、製品名、ボタンのテキストのサイズと色をカスタマイズします。

   • ボタン: [チェックアウト] ボタンと [ショッピングを続行 ] ボタンのサイズ、背景色、テキストの色を変更します。

   • 数量入力: 数量セレクターの色と角の設定を調整します。

   • 価格小計の表示: カートに小計を表示する場合は、スイッチを切り替えます。

5. 変更を加えたら、[ 保存] をクリックして適用します。

ステップ 4: チェックアウト ページを設定する

顧客がカートアイコンをクリックすると、最初にカートレビューモーダルが表示され、商品を確認し、数量を調整し、 チェックアウトに進むことができます。

チェックアウトページをカスタマイズするには、次の手順に従います。

1. ストアテーマエディターで、[サイトテーマページ]リストから[チェックアウト]ページを選択します。

2. 次の要素が含まれていることを確認します。

   • 注文の概要: 製品、小計、税金、注文の詳細が表示されます。

   • チェックアウト: 顧客が配送と支払いの詳細を入力できるようにします。

     大事な

     Checkout Legacy 要素は、現在のカート システムと互換性がありません。チェックアウト機能に関する問題を回避するには、代わりに更新された Checkout 要素を使用してください。

3. ストアのブランディングに合わせてレイアウトとデザインをカスタマイズします。

4. [保存] をクリックして変更を適用します。

役立つリソース:

1. Customizing the Store Checkout Theme Page

2. Order Summary: Provide a Summary of the User's Order

3. Checkout: Enable Users to Complete their Purchase

ステップ 5: カートとチェックアウトのプロセスをテストする

ストアを稼働させる前に、カートとチェックアウトのプロセスをテストして、すべてがスムーズに機能することを確認することが重要です。

1. [ストアの概要] ダッシュボードで、ストア名の横にある歯車⚙️アイコンをクリックして設定を開きます。

2. [表示] セクションまでスクロールし、ストアを [下書き] に変換します。

3. シークレットウィンドウでストアを開き、ストアURLにパラメータ ?preview=true を追加して、顧客としてテストします。

4. カー トに追加 ボタンをクリックして、カートに商品を追加します。

5. [カート] アイコンをクリックして、カート内の製品を確認します。試験：

   • 製品の追加と削除。

   • 製品数量の調整。

   • 小計が正しく計算されていることを確認します。

6. チェックアウトページに進み、テストモードを使用してテストトランザクションを完了します。

7. チェックアウトページで、チェックアウトの詳細を入力します。有効な有効期限とCVVが記載されたテストクレジットカード番号 4111 1111 1111 1111 を使用して、テストチェックアウトを完了します。

詳細については、 How to Test Store Checkout in TEST Modeを参照してください。