ストアチェックアウトテーマページのカスタマイズ

ストアのチェックアウトページはストアの重要な部分であり、訪問者が購入を確定できるようにします。ClickFunnels では、このテーマ ページはブランディングと機能要件に合わせてカスタマイズできます。この記事では、チェックアウト ページをカスタマイズする方法を、主要な要素と必要なコンポーネントに焦点を当てて学習します。

---

必要条件

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

2. The Store app added to your workspace

---

ストアチェックアウトテーマページを理解する

訪問者がカートに商品を追加してチェックアウトに進むと、チェック アウト ページに移動します。このページは、店舗での販売プロセスを完了する上で重要な役割を果たし、スムーズで効果的なユーザー エクスペリエンスに必要な要素をすべて含める必要があります。 Checkout 要素は、支払い処理を可能にするため、このページで唯一の必須要素です。テーマページには作成時に自動的にチェックアウト要素が含まれますが、カスタマイズ中に削除された場合は、再度追加する必要があります。

例：

訪問者が ClickFunnels ストアフロントを閲覧しているところを想像してみてください。彼らは気に入った製品を見て、それをクリックして詳細を表示します。この商品をカートに追加した後、買い物を続行し、さらに 2 つの商品を追加します。購入を完了すると決めたら、[ チェックアウト] ボタンをクリックします。このアクションにより、 ユーザーは [ストア チェックアウト ] ページにリダイレクトされ、そこでカートを確認し、連絡先と配送の詳細を入力し、支払いを確定できます。

---

ストアチェックアウトテーマページへのアクセス

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

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

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

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

5. [ チェックアウト] ページを選択します。

6. これで、ページ エディターで使用可能なツールを使用してページの編集を開始できます。

---

ストアのチェックアウトページの重要な要素

最適なチェックアウトエクスペリエンスを提供するために、次の要素を追加およびカスタマイズできます。

1. チェックアウト要素 (必須)

• 目的: 支払いを処理し、顧客情報 (連絡先、配送、支払いの詳細) を収集します。

• 要件: ページが機能するには、この要素がチェックアウトページに存在する必要があります。

Checkout 要素の詳細については、 Checkout: Enable Users to Complete their Purchaseの記事を参照してください。

2. 注文サマリー要素

• 目的: 商品の詳細、数量、価格など、カート内の商品の概要を表示します。

  手記：

  注文概要要素がページに追加されると、ページの読み込み時に Checkout 要素内の組み込みの注文概要コンポーネントが自動的に非表示になります。これにより、スタンドアロンの注文サマリー要素は、埋め込まれたサマリーの独立した動的な拡張として機能し、完全な機能を維持しながら配置の柔軟性を提供します。

• カスタマイズ オプション: テーマに合わせてレイアウト、フォント スタイル、色を変更します。

注文概要要素の詳細については、記事 Order Summary: Provide a Summary of the User’s Orderを参照してください。

3. ナビゲーション要素

• 目的: ナビゲーションバーを追加して、「ショップ」や「ホーム」などの他のページにリンクします。これにより、使いやすさとアクセシビリティが向上します。

• カスタマイズ オプション: リンク ラベル、順序、配置を更新します。

Navigation 要素の詳細については、記事 Navigation: Add Navigation Menus to Pagesを参照してください。

4. カートアイコン要素

• 目的: 顧客がページを離れることなく、カート内のアイテムをすばやく表示または変更できるようにします。

• カスタマイズオプション: アイコンのスタイルと表示設定を変更します。

カートアイコン要素の詳細については、記事 Cart Icon: Allow Customers to Track and Open the Shopping Cartをご覧ください。

---

テストモードでのストアチェックアウトページのテスト

テストモードでのストアチェックアウトページのテストは、ファネルのテストとは異なります。ストアのテストモードのオン/オフを切り替える代わりに、商品ページをテスト決済に切り替えることで商品をテストできます。次の手順を実行します:

1. ストア アプリを追加する: ストア アプリが ClickFunnels ワークスペースにインストールされていることを確認します。

2. 製品へのアクセス: [製品 ] メニューに移動し、[ すべての製品] を選択します。

3. 製品の選択: リストからテストする製品を選択します。

4. 商品の表示を非表示にする: 商品を一時的に非表示にするには、商品の 販売チャネル タブで ストア と カスタマーセンター のスイッチをオフにします。どちらかに掲載されている商品はテストモードに切り替えられません。

5. テスト決済に切り替える: 商品ページ タブで 決済モード を テスト に設定し、[ 保存 ] をクリックします。

6. 製品の URL をコピーする: 同じタブの URL カードで 商品ページのURL をコピーし（または [ 商品ページを表示 ] をクリックし）、新しいブラウザ タブで開きます。

7. チェックアウトのテスト: 製品のチェックアウトページで、テストクレジットカード番号を使用してチェックアウトプロセスを完了します4111 1111 1111 1111 有効な有効期限とCVVがあります。

8. 製品の可視性を復元する: テスト後、製品エディターに戻り、商品ページ タブで 決済モード を 本番 に戻して [ 保存 ] をクリックしてから、販売チャネル タブで ストア と カスタマーセンター のスイッチをオンに戻します。

テストモードでストアをテストする方法の詳細については 、記事How to Test Store Checkout in TEST Modeを参照してください。