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

  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ストアのチェックアウトページはストアの重要な部分であり、訪問者が購入を確定できるようにします。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 をコピーする: 「 SEO と共有」 セクションまで下にスクロールし、製品の URL をコピーして、新しいブラウザ タブに貼り付けます。

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

  8. 製品の可視性を復元する: テスト後、製品エディターに戻り、[ オンライン ストア ] と [カスタマー センター ] オプションをチェックして、製品の可視性を再度有効にします。

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

関連記事