確認: 注文確認と概要の表示
公開日: 更新日:
注文確認要素は、顧客が購入を完了した後に注文の詳細と確認情報を表示するために特別に設計されています。この要素は、ファネルまたはストアの注文確認ページに配置できるため、購入後のエクスペリエンスの重要な部分になります。この記事では、注文確認要素で使用できる設定と、ブランドに合わせてカスタマイズする方法について説明します。
-
アクティブなClickFunnelsアカウント
-
ファネルページまたはストアの注文確認ページ
ページエディタでの確認要素の追加
Section titled “ページエディタでの確認要素の追加”-
ページエディタ内で、要素を 配置するセクション を追加します。
-
そのセクション内に 行 を追加します。
-
行内のオレンジ色の +（プラス）または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
-
チェックアウト カテゴリから 確認 要素を選択します。
確認 要素を追加すると、ページデザインに合わせて外観をカスタマイズできます。
確認要素の仕組み
Section titled “確認要素の仕組み”ClickFunnels の注文確認要素は、購入完了後に確認ページにアクセスしたときに、顧客の注文の詳細を自動的に表示するように設計された 動的 ツールです。要素がページに追加されると、顧客の最近の取引に基づいて製品情報、注文額、その他の関連データが表示されます。つまり、ページに注文確認要素を追加し、ブランドの外観に合わせてスタイルを調整するだけで済みます。顧客が購入を完了すると、ClickFunnelsは、購入した製品に関係なく、追加の構成を必要とせずに、注文の詳細を動的に取得して表示します。
注文確認要素はどこで使用できますか?
Section titled “注文確認要素はどこで使用できますか?”-
ファネルページ内: ファネル内の 専用の注文確認 ページで[注文確認]要素を使用します。このページは通常、チェックアウトページの後に表示され、顧客は注文を完了するか、ファネル内のアップセル/ダウンセルページを進めると表示されます。
-
ストアの注文確認ページ: 注文確認要素は、ストアの注文確認ページでも使用でき、ストアレイアウト内のeコマース設定で購入を確認できます。 ストアアプリ » ストアのカスタマイズ » 注文確認 ページ に移動して、確認要素を追加できます。
確認要素のカスタマイズ
Section titled “確認要素のカスタマイズ”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 ⚙️ アイコン をクリックするか、要素を直接クリックします。
テキスト
テキスト 設定では、注文確認要素に表示される文言を変更できます。
-
タイトル（単数） と タイトル（複数）: 注文 ID が 1 つの場合と複数の場合のヘッダータイトルです。デフォルトはどちらも「注文確認。注文ID」です。
-
処理中、数量、小計、税金、配送、割引、合計: 注文の詳細と合計に表示されるラベルです。
上マージン
上マージン 設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
確認ヘッダー
確認ヘッダーは、注文確認ステータスのタイトルと視覚的なインジケーターを提供します。「目👁️**」**アイコンをクリックして、注文確認要素のヘッダーを表示または非表示にします。確認要素のヘッダー部分のスタイルを設定するには、「確認ヘッダー」コンポーネント内の設定を変更します。
-
アイコンのプロパティ: ショッピングカートやチェックマークなどのヘッダーアイコンを選択します。 サイズ、 モバイルサイズ、 色の設定を使用して、ブランドに合わせてアイコンのサイズと色をカスタマイズします。
-
タイポグラフィ： ヘッダー テキストのフォントファミリーー、サイズ、太さ、色を調整して、ブランドのスタイルとの明確さと整合性を実現します。
注:
タイポグラフィ設定は、確認ヘッダー、製品、フッター、合計セクションなど、注文確認要素のさまざまな領域に一貫して適用されます。各タイポグラフィプロパティの全般と、調整がテキストの外観に与える影響の詳細については、この記事のタイポグラフィ の専用セクションを参照してください。
-
テキストシャドウ: 視覚的な魅力を高める影効果を適用して、テキストに立体感と強調を加えます。この機能を使用すると、影の位置、柔らかさ、色を調整して、微妙な背景でも大胆な輪郭でも、希望の外観を実現できます。
注:
テキストシャドウ設定は、注文確認要素内の複数のコンポーネントで利用されます。 各テキストシャドウプロパティの包括的な説明については、この記事の専用の テキストシャドウ セクションを参照してください。
確認製品
「注文確認」要素の 「確認製品 」コンポーネントには、製品名、数量、価格など、顧客の注文内の各製品に関する詳細情報が表示されます。このセクションは、テキスト スタイル、レイアウト、間隔をカスタマイズして、注文した製品のプレゼンテーションを強化できるように設計されています。
-
パディング: 製品コンテナの内部パディングを調整します。上、下、左 + 右のスライダーを使用して、商品の詳細の周囲に間隔を空けて、よりクリーンで視覚的に魅力的なレイアウトにします。
-
ギャップ: ギャップ設定は、商品画像とテキストの詳細 (商品名、数量、価格) の間のスペースを制御します。ギャップを大きくすると、これらの要素がさらに離れ、ギャップを小さくすると、これらの要素が近づきます。
-
画像サイズ: 画像の幅 で、製品コンテナに対する商品画像の幅を 10% から 50% の範囲で設定します (デフォルトは 30%)。モバイル用に別の値を設定することもできます。商品設定に画像が追加されていない場合、商品画像はレンダリングされません。
-
タイポグラフィ: このコンポーネントには 2 つのタイポグラフィ設定があり、製品タイトルと追加の製品情報 (数量や価格など) に対してテキスト スタイルを個別にカスタマイズできます。追加の製品情報の設定は 製品情報 にあります。これには、タイトルと詳細がブランドと一致するようにするためのフォントファミリー、フォントの太さ、フォント サイズ、文字間隔、色の設定が含まれます。
注:
タイポグラフィ設定は、確認ヘッダー、製品、フッター、合計セクションなど、注文確認要素のさまざまな領域に一貫して適用されます。各タイポグラフィプロパティの全般と、調整がテキストの外観に与える影響の詳細については、この記事のタイポグラフィ の専用セクションを参照してください。
-
テキストシャドウ: タイポグラフィと同様に、2つのテキストシャドウ設定があります。1 つは製品タイトルに適用され、もう 1 つは数量と価格のテキストに適用されます。これらの設定は、影効果を作成することでテキストに深みを加え、位置、ぼかし、色を調整して希望の外観を実現できます。
注:
テキストシャドウ設定は、注文確認要素内の複数のコンポーネントで利用されます。 各テキストシャドウプロパティの包括的な説明については、この記事の専用の テキストシャドウ セクションを参照してください。
確認フッター
注文確認要素の確認フッターコンポーネントには、小計、税金、配送料、割引、および注文のコスト内訳に関連するその他の関連詳細が表示されます。このフッターは注文された製品のリストの下に表示され、ユーザーに支払われるべき合計金額または支払われた合計金額の明確な概要を提供します。
-
タイポグラフィ： 確認フッターには 2 セットのタイポグラフィ設定が含まれており、セクション タイトル (「小計」や「税金」など) とその横に表示される値 (金額など) の両方をカスタマイズできます。値の設定は 価格設定 にあります。フォントファミリー、サイズ、太さ、文字間隔、色、その他のテキスト プロパティを調整して、ブランド スタイルとの明確さと一貫性を確保できます。
注:
タイポグラフィ設定は、確認ヘッダー、製品、フッター、合計セクションなど、注文確認要素のさまざまな領域に一貫して適用されます。各タイポグラフィプロパティの全般と、調整がテキストの外観に与える影響の詳細については、この記事のタイポグラフィ の専用セクションを参照してください。
-
テキストシャドウ: タイポグラフィと同様に、確認フッターには、深みと強調を加えるためのテキストシャドウオプションが用意されています。 2 つの「テキストシャドウ」 設定を使用すると、タイトルと値に異なるシャドウを適用できるため、テキストの視覚的な表示方法をより詳細に制御できます。
注:
テキストシャドウ設定は、注文確認要素内の複数のコンポーネントで利用されます。 各テキストシャドウプロパティの包括的な説明については、この記事の専用の テキストシャドウ セクションを参照してください。
確認合計
確認 合計コンポーネント には、最終注文金額が注文確認ページに表示されます。このコンポーネントは、 タイポグラフィ と テキストシャドウ の設定を通じてスタイリングオプションを提供し、カスタマイズして合計量がブランドのスタイルに合致するようにすることができます。
-
タイポグラフィ: テキストの総量に対して、スタイル、サイズ、太さ、色などのフォント プロパティを調整できます。これにより、合計が目立ち、読みやすくなります。モバイル固有のフォントサイズ設定も利用でき、小さな画面で最適に表示できます。
注:
タイポグラフィ設定は、確認ヘッダー、製品、フッター、合計セクションなど、注文確認要素のさまざまな領域に一貫して適用されます。各タイポグラフィプロパティの全般と、調整がテキストの外観に与える影響の詳細については、この記事のタイポグラフィ の専用セクションを参照してください。
-
テキストシャドウ: 視覚的に強調するには、合計値のテキストにシャドウ効果を追加します。影の位置、ぼかし、色を変更して奥行きを強調し、合計量を目立たせることができます。
注:
テキストシャドウ設定は、注文確認要素内の複数のコンポーネントで利用されます。 各テキストシャドウプロパティの包括的な説明については、この記事の専用の テキストシャドウ セクションを参照してください。
タイポグラフィ
タイポグラフィ設定では、要素内のテキストの外観を制御できます。これらの設定では、2 つのビューが提供されます。定義済みのスタイル (小、中、または大) を選択して、ページ全体に一貫したデザインを適用できます。定義済みのスタイルを上書きすることを選択した場合は、追加の設定が使用可能になり、文字の外観を手動でカスタマイズできます。
-
フォントファミリー: このオプションを使用すると、テキストのフォント タイプを選択できます。ClickFunnels は、Google Fonts ライブラリからさまざまな人気のあるフォントを提供します。さらに、ワークスペース設定 > マイアセット > フォント に移動して、独自のカスタムフォントをアップロードして使用できます。アップロードすると、カスタムフォントが選択リストに表示され、使用できるようになります。
-
ウェイト: このオプションは、テキストの太さを定義します。 希望する強調に応じて、薄い、レギュラー、または ボールド のオプションから選択できます。細いフォントは微妙な外観を提供し、太字のフォントはより視覚的なインパクトを生み出します。
-
フォントサイズ: スライダーを使用するか、特定の値を手動で入力してテキスト サイズを調整できます。さらに、サイズ測定には 2rem や 32px など、rem または px から選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。
-
Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem に選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。
-
Px は絶対測定値であり、テキスト サイズを正確に制御できます。
-
-
文字間隔: 個々の文字間のスペースを調整します。スライダーを使用して値を増減するか、特定の値(レム単位で測定)を入力できます。間隔を長くすると文字が広がり、間隔を小さくすると文字が近づきます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの文字間隔値を個別に設定することもできます。
-
色: カラーピッカーを使用して、テキストの色を選択します。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。 カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。 さらに、2 番目のスライダーを使用して不透明度(アルファ値)を調整できます。左に動かすと不透明度が下がり、色がより透明になり、右に動かすと完全に不透明になります。
-
テキストの大文字と小文字: テキストの大文字と小文字の表示方法を選択します。
-
小文字: すべてのテキストが小文字です。
-
大文字: すべてのテキストが大文字です。
-
大文字にする: 各単語の最初の文字を大文字にします。
-
-
装飾: 次のようなテキスト装飾を追加します。
-
下線: テキストの下に線を引きます。
-
取り消し線: テキストを水平線で取り消します。
-
オーバーライン: テキストの上に線を描きます。
-
-
不透明度: テキストの不透明度を調整します。スライダーを使用すると、テキストを多かれ少なかれ透明にすることができます。スライダーを左に動かすと**(0**)、不透明度が下がり(テキストの透明度が高くなります)、右に動かすと (1) テキストが完全に不透明になります。
テキストシャドウ
テキスト シャドウ セクションは、テキストの背後に微妙な影を追加し、奥行きを生み出し、読みやすさを向上させます。次のパラメータを制御できます。
-
オフセット-xとオフセット-y:影の水平方向と垂直方向の位置を調整します。
-
ぼかし: 影の表示のぼかしやシャープさを設定します。
-
色: ページデザインに一致または対照する影の色を選択します。
パディング
パディング 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに呼吸する余地を確保し、視覚的にバランスが取れているように見えます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
パディングオプション:
-
上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。
-
下部: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。
-
左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します 。
-
ギャップ：アコーディオンなどの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。
デスクトップとモバイル(🖥️ & 📱)カスタマイズ:
パディング設定を使用すると、 デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。
この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。
ボーダー
ボーダー 設定を使用すると、要素の周囲にボーダーを追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。
-
スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。
-
スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 を選択して、グローバル設定でデザインを調整します。
-
オーバーライド： [ 上書き ]オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。
-
ボーダー: 要素のどの辺にボーダーを表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。
-
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。
-
色： カラーピッカーを使用して、境界線の色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、境界線の色がデザイン スキームに一致するようにすることができます。
-
ストロークサイズ: 境界線の太さは、[ ストローク サイズ] スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。
角
角 の設定では、要素の角の丸み(境界線半径)を調整でき、丸みを帯びたエッジまたはシャープなエッジを柔軟に作成できます。
-
スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイック スタイリング オプションを提供します。
-
スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 をクリックして、グローバル設定でプリセットを調整します。
-
オーバーライド： スタイルガイドを変更せずにカスタムコーナー設定を適用するには、[ 上書き]をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。
-
すべての角: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、四隅すべてに均一な境界線の半径を設定します。
-
エッジを分ける: エッジを分ける を有効にして、各角を個別に調整します。 左上隅、 右上隅、 左下隅、 右下 隅に異なる値を設定して、独自の形状を実現できます。
影
影の設定では、影効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。
-
スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
-
シャドウ スタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。
-
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
-
Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。
-
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
-
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
-
色: カラーピッカーを使用して、影の色の設定を選択します。
区切り
区切り 設定では、注文確認要素のヘッダー、製品、フッターを区切る線のスタイルを設定します。
-
区切りサイズ: 線の太さを 0 から 50 ピクセルの範囲で設定します。
-
区切りスタイル: 実線、破線、点線から選択します。
-
区切りカラー: カラーピッカーを使用して線の色を選択します。
背景
背景 セクションでは、要素の背景色を設定できます。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。 カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。画像URL で背景画像を追加することもできます。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
-
デスクトップ (🖥️**) アイコン**: コンテナはデスクトップ ビューでのみ表示されます。
-
モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。
-
目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ごみ箱 (🗑️**) アイコン**: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。