注文の概要: ユーザーの注文の概要を提供します

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

ClickFunnels の 注文概要 要素は、チェックアウト要素の外部に顧客の注文の内訳を表示するように設計された多用途ツールです。Checkout 要素にはレイアウト内に注文概要コンポーネントが含まれていますが、スタンドアロンの注文概要要素を使用すると、注文の詳細をページに個別に配置できます。この機能は、カートに追加された商品の概要を別の場所に表示したい店舗のチェックアウトページで特に便利です。この記事では、ページに注文の概要要素を追加および構成する方法について説明します。

必要条件

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

  • ページに追加された checkout 要素

手記：

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

ページエディタでの注文サマリー要素の追加

  1. ページエディタ内で、要素を 配置するセクション を追加します。

  2. そのセクション内に 行 を追加します。

  3. 行内のオレンジ色の + プラスまたは [新しい要素を追加 ] ボタンをクリックして、新しい要素を挿入します。

  4. [ チェックアウト] カテゴリから、[ 注文概要 ] 要素を選択します。

注文概要要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。

大事な：

  • 注文の概要要素は、製品を添付できる ClickFunnels の ストア ページと ファネル ページでのみ使用できます。ブログやコースエディタは製品統合をサポートしていないため、使用できません。

  • 注文サマリーは 動的な 要素です。税金と送料は、 製品の構成に基づいて動的に表示されます。商品で税金が有効になっていない場合、概要には税額は反映されません。同様に、商品が物理的な商品ではなく、フルフィルメントが不要な場合、概要には送料は反映されません。この動的な機能により、出荷額と税額の表示を非表示にするために [注文概要] 要素を手動で編集する必要はありません。

オーダサマリー要素のカスタマイズ

要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車⚙️アイコンをクリックするか、要素を直接クリックします。

上マージン

「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

スタイル

リンクされた Checkout 要素は、注文概要のスタイルを制御し、一貫性のある外観を保証します。スタイルを調整するには、Checkout 要素の一般設定を編集する必要があります。[ 編集] オプションをクリックして、一般設定から [注文の概要] コンポーネントのスタイル プロパティを表示します。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

  • ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ ビューでのみ表示されます。

  • モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。

  • 目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。

  • コード (</>) アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。

  • ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

関連記事