コンテンツにスキップ
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterCF クラシックヘルプセンター

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

公開日: 更新日:

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

必要条件

Section titled “必要条件”

ページエディタでの注文概要要素の追加

Section titled “ページエディタでの注文概要要素の追加”

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

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

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

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

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

注文概要要素のカスタマイズ

Section titled “注文概要要素のカスタマイズ”

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

上マージン

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

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

スタイル

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

  • リンクと: ページに複数のチェックアウト要素がある場合に表示されます。注文概要をリンクするチェックアウト要素を選択します。

  • モバイルの動作: ストアの チェックアウト ページで使用できます。なし、またはモバイルデバイスで注文概要を画面下部に固定する 下部に固定 を選択します。

サマリーテキスト

注文概要に表示されるラベル (タイトル、税金、割引、配送、小計、合計、クーポン欄のテキスト (クーポンを入力 と 適用) など) は、リンクされたチェックアウト要素の テキスト設定 › 概要テキスト から取得されます。注文概要はページのチェックアウトに自動的にリンクされ、リンクされている間はここで行った編集がチェックアウトのラベルに置き換えられます。これらのラベルを変更するには、チェックアウト要素で編集してください。

エラーテキスト

空白の割引コード: 顧客が空の割引コードを適用したときに表示されるエラーメッセージを編集します。デフォルトは「割引コードが空白です」です。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
設定パネルのヘッダーにあるコード（</>）アイコンと、下部バーの可視性・すべて・デスクトップ・モバイル・目・ゴミ箱アイコン

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

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

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

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

  • コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

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

詳細設定

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