決済画面デザイン

ショップデザイン / 機能・設定 / 決済画面デザイン

商品の注文画面のデザインを設定（編集）できる画面です。

決済画面の利用設定

【Checkout方式】
決済画面のデザインを変更できます。
・Smart Checkout：注文が1画面でスムーズに完了する決済画面です。
・旧決済画面：従来からある3画面構成の決済画面です。

▼変更時のアラート

Smart Checkoutの設定

上記Checkout方式で「Smart Checkout」を選択した場合、Smart Checkout用の設定画面が表示されます。

看板画像（画面上部）の表示設定：Smart Checkout

Smart Checkoutの画面上部に「看板画像」を表示する場合、『看板画像を表示する』にチェックします。
PC用・スマホ用それぞれにドラッグ＆ドロップで登録し、差し替えや削除も可能です。

・管理画面

・決済画面

フッター画像（画面下部）の表示設定：Smart Checkout

Smart Checkoutの画面上部に「フッター画像」を表示する場合、『フッター画像を表示する』にチェックします。
PC用・スマホ用それぞれにドラッグ＆ドロップで登録し、差し替えや削除も可能です。

・管理画面

・決済画面

UIカスタマイズ

購入方法タブ

Smart Checkoutの決済画面Step1にある、購入方法のタブ「ログイン」「ゲスト購入」「会員登録」の表示/非表示、および、並べ替えができます。
一番左側に配置したタブがファーストビューに表示されます。

注意点
全てのタブを非表示にすることはできません。
エラーメッセージ：購入方法タブをすべて非表示にすることはできません。

▼設定例

アクセントカラー / ボタンカラー

Smart CheckoutのSTEP1（ログイン・新規会員登録・ゲスト購入）画面やSTEP2（決済画面）内の「アクセントカラー」「ボタンカラー」を変更できます。

【アクセントカラーの反映対象】
・STEP1のタブ（ボーダーとテキストの色）
・テキストリンク
・注文備考で作ったラジオボタン・チェックボックスの色
・入力フォームのボーダー（マウスオンしたときのボーダーの色）

【ボタンカラーの反映対象】
・ゲスト購入画面のボタン
・会員登録画面のボタン
・ログイン画面のボタン
・STEP2の注文を確定するボタン
・複数配送画面のボタン
・クーポンコードの適用ボタン
・お支払い方法を選ぶボタン

▼設定例

表示オプション

Smart Checkout 決済画面の詳細設定です。


 

※1
一般ショップの「決済画面内に会員登録の必須項目を表示」表示する/表示しない　の設定は、Smart Checkoutでは一律「非表示」です。
登録フォーム項目の「メールマガジン」表示/非表示　で（表示）にすると、ゲスト購入画面に「メールマガジン登録を希望」が表示されます。
※2
会員管理 / 機能・設定 / 会員制ショップの設定　「会員登録用URL」を「利用しない」の場合、チェックを入れても会員登録フォームは表示されません。


 

切り替え時の「同じ役割の機能」の反映について

Smart Checkoutに切り替えると、下記の別の管理画面にある「同じ役割の機能」が決済画面オプションに反映します。

送料が0円の場合の送料欄の表示方法：Smart Checkout

送料が0円判定の場合に、決済画面に表示される内容を設定できます。
会員情報の住所欄が未登録で決済画面の住所が未入力の場合などの、送料の判定前も含みます。

▼入力例

入力の保存（旧決済画面・Smart Checkout共通）

決済画面から離脱した際に、お届け先などの入力情報を「自動保存」する機能です。
「保存する」設定の場合、決済第一画面の離脱から「最大3時間」は入力した情報を自動で保存します。
旧決済画面の決済第一画面 および Smart Checkoutの決済STEP1・2の離脱から「最大3時間」の有効期限内に決済画面に戻ってきた場合、保存された情報を利用できます。
「複数配送」では、お届け先ごとの商品振り分け状況も保存されます。

▼Smart Checkout用の設定

▼旧決済画面用の設定

旧決済画面の設定

注文画面の表示設定 ※PC画面のみ：旧決済画面

• 1PCの注文画面の整列形態を設定できます。（デフォルトでは中央寄せが選択されています）
• 2注文画面の背景カラーを設定することができます。
  「色選択」というボタンをクリックするとパレットウィンドウが出てきて、216種類の色を選択することができます。背景に画像を指定することもできます。
  「ファイルを選択」ボタンから画像を登録することができます。
• 3ご注文の流れ、注文ステップ画像を設定できます。 ※以下のような別ウィンドウが開きます。

• 4注文画面の詳細色設定をおこなうことができます。※以下のような別ウィンドウが開きます。

看板画像（画面上部）の表示設定：旧決済画面

• 1決済画面の上部に画像（看板）を設定できます。
  ※PC・スマホ共通の設定です。
• 2PC画面に表示したい画像（看板）をアップロードします。
  削除したい場合は「削除する」ボタンをクリックすると削除できます。
  ※注文画面では原寸表示されます。表示イメージは縮小しています。
  ※イメージファイルサイズは200KB以内で作成してください。
  ※イメージファイルはGIF、JPG、PNG形式が登録可能です。
• 3PC画面の画像の整列形式を設定できます。
• 4PC画面の看板の背景色を設定できます。
• 5スマホ画面に表示したい画像（看板）をアップロードします。
  削除したい場合は「削除する」ボタンをクリックすると削除できます。
  ※プレミアムプランのみご利用可能です。
  ※注文画面では原寸表示されます。表示イメージは縮小しています。
  ※イメージファイルは横640ピクセル、縦120ピクセル以下が推奨です。
  ※イメージファイルサイズは200KB以内で作成してください。
  ※イメージファイルはGIF、JPG、PNG形式が登録可能です。

フッター画像（画面下部）の表示設定：旧決済画面

• 1決済画面フッター（画面下部）に画像を設定できます。
  ※PC・スマホ共通の設定です。
• 2PC画面に表示したい画像（フッター）をアップロードします。
  削除したい場合は「削除する」ボタンをクリックすると削除できます。
  ※注文画面では原寸表示されます。表示イメージは縮小しています。
  ※イメージファイルサイズは200KB以内で作成してください。
  ※イメージファイルはGIF、JPG、PNG形式が登録可能です。
• 3PC画面の画像の整列形式を設定できます。
• 4スマホ画面に表示したい画像（フッター）をアップロードします。
  削除したい場合は「削除する」ボタンをクリックすると削除できます。
  ※プレミアムプランのみご利用可能です。
  ※注文画面では原寸表示されます。表示イメージは縮小しています。
  ※イメージファイルは横640ピクセル、縦120ピクセル以下を推奨です。
  ※イメージファイルサイズは200KB以内で作成してください。
  ※イメージファイルはGIF、JPG、PNG形式が登録可能です。

その他の表示設定：旧決済画面

・商品詳細表示機能

• 1注文画面内の商品名をクリックすると商品詳細画面を別ウィンドウで開く 設定にする場合は「設定する」を選択します。
  以下のように商品名にリンクアイコンが表示されます。商品名をクリックすると商品詳細画面を開きます。
  ※PCとスマートフォン画面に適用されます。
  

・注文情報項目表示設定

• 2【緊急連絡先の表示】注文画面内の注文情報に「緊急時連絡先」を表示する設定です。
  ※本項目は2024/7/4に廃止されました。

• 3注文画面内の備考入力フォームを「表示する」、「表示しない」を選択することができます。
  「表示する」…決済画面に備考欄が表示され、購入者は自由に備考内容を入力することができます。
  備考欄に入力があった場合注文 管理 / 注文一覧　「注文詳細」にて入力内容を確認することができます。
  「表示しない」にすると、決済画面に備考欄は表示されません。
  ※PC、スマートフォン画面に適用されます。
  ※ギフト配送注文の場合、「表示する・表示しない」の設定に関わらず、注文画面の「お届け先の入力」項目内に備考欄が表示されます。
  

・設定を保存

• 1上記全ての設定を保存して反映する場合は必ず「保存」ボタンをクリックして反映します。
• 2「初期値に戻す」ボタンをクリックすると初期値状態に戻ります。

▼表示例：旧決済画面

PC：決済画面表示例

スマホ：決済画面表示例

運営ノウハウ集