ショップデザイン / 機能・設定 / 決済画面デザイン
商品の注文画面のデザインを設定(編集)できる画面です。
| ※「Smart Checkout」の詳細については、マニュアルをご確認ください。 |
決済画面の利用設定
【Checkout方式】
決済画面のデザインを変更できます。
・Smart Checkout:注文が1画面でスムーズに完了する決済画面です。
・旧決済画面:従来からある3画面構成の決済画面です。
| ※「Smart Checkout」は、未対応の機能をご利用の場合、適用できません。切り替え前に必ずマニュアルをご確認ください。 |
▼変更時のアラート
Smart Checkoutの設定
上記Checkout方式で「Smart Checkout」を選択した場合、Smart Checkout用の設定画面が表示されます。
看板画像(画面上部)の表示設定:Smart Checkout
Smart Checkoutの画面上部に「看板画像」を表示する場合、『看板画像を表示する』にチェックします。
PC用・スマホ用それぞれにドラッグ&ドロップで登録し、差し替えや削除も可能です。
|
登録情報 ・画像の拡張子:GIF、JPG、PNG |
|
注意点 ・『看板画像を表示する』に未チェックでも、画像の登録・削除などは可能です。 |
・管理画面

・決済画面

フッター画像(画面下部)の表示設定:Smart Checkout
Smart Checkoutの画面上部に「フッター画像」を表示する場合、『フッター画像を表示する』にチェックします。
PC用・スマホ用それぞれにドラッグ&ドロップで登録し、差し替えや削除も可能です。
|
登録情報 ・画像の拡張子:GIF、JPG、PNG |
|
注意点 ・『フッター画像を表示する』に未チェックでも、画像の登録・削除などは可能です。 |
・管理画面
・決済画面
UIカスタマイズ
購入方法タブ
Smart Checkoutの決済画面Step1にある、購入方法のタブ「ログイン」「ゲスト購入」「会員登録」の表示/非表示、および、並べ替えができます。
一番左側に配置したタブがファーストビューに表示されます。
|
「ゲスト購入」タブについて 「会員登録」タブについて 会員管理 / 機能・設定 / 会員設定 / 会員制ショップの設定 で以下の場合は、非表示になります。 |
注意点
全てのタブを非表示にすることはできません。
エラーメッセージ:購入方法タブをすべて非表示にすることはできません。▼設定例

アクセントカラー / ボタンカラー
Smart CheckoutのSTEP1(ログイン・新規会員登録・ゲスト購入)画面やSTEP2(決済画面)内の「アクセントカラー」「ボタンカラー」を変更できます。
【アクセントカラーの反映対象】
・STEP1のタブ(ボーダーとテキストの色)
・テキストリンク
・注文備考で作ったラジオボタン・チェックボックスの色
・入力フォームのボーダー(マウスオンしたときのボーダーの色)
【ボタンカラーの反映対象】
・ゲスト購入画面のボタン
・会員登録画面のボタン
・ログイン画面のボタン
・STEP2の注文を確定するボタン
・複数配送画面のボタン
・クーポンコードの適用ボタン
・お支払い方法を選ぶボタン
▼設定例
表示オプション
Smart Checkout 決済画面の詳細設定です。
| 商品情報 | 商品詳細画面へのリンクを設定する | 決済画面の商品名や商品画像情報をクリックすると商品詳細ページを開けます。 |
| 独自商品コードを表示する | 決済画面に独自商品コードを表示する/表示しないの設定ができます。 | |
| バリエーション独自コードを表示する | 商品のバリエーション独自コードを登録している場合、表示させることができます。 | |
| 会員登録 | ゲスト購入画面に会員登録フォームを表示する | ゲスト購入画面に「入力した情報で会員登録する」のチェックボックスを表示し、ゲスト(非会員)が購入と同時に会員登録できるようにします。(※1)(※2) |
| 決済完了画面に会員登録ボタンを表示する | 会員管理 / 機能・設定 / 会員設定 / 会員制ショップの設定 内【決済完了画面に会員登録ボタンを表示】と連動します。(※2) | |
| ユーザー補助 | 入力された注文者情報を保持する | 決済画面から離脱した際に、お届け先などの入力情報を「自動保存」する機能です。詳細は【入力の保存】をご確認ください。 |
| 備考(自由入力欄)を表示する | 決済画面に備考欄(自由入力欄)を表示する/表示しないの設定ができます。 | |
|
配送方法の初期選択を「選択なし」にする |
STEP2の注文確認画面へ遷移した際、購入者自身で任意に「配送方法」の選択をすることができます。 ※「自動配送分割」を利用した場合は無効になります。 |
※1
一般ショップの「決済画面内に会員登録の必須項目を表示」表示する/表示しない の設定は、Smart Checkoutでは一律「非表示」です。
登録フォーム項目の「メールマガジン」表示/非表示 で(表示)にすると、ゲスト購入画面に「メールマガジン登録を希望」が表示されます。
※2
会員管理 / 機能・設定 / 会員制ショップの設定 「会員登録用URL」を「利用しない」の場合、チェックを入れても会員登録フォームは表示されません。
切り替え時の「同じ役割の機能」の反映について
Smart Checkoutに切り替えると、下記の別の管理画面にある「同じ役割の機能」が決済画面オプションに反映します。
| Smart Checkoutの機能名称 | 別の管理画面にある「同じ役割の機能」 |
| 入力された注文者情報を保持する | ショップデザイン / 機能・設定 / 決済画面デザイン / 入力の保存 |
| 商品詳細画面へのリンクを設定する | ショップデザイン / 機能・設定 / 決済画面デザイン / 商品詳細画面へのリンク |
| 備考(自由入力欄)を表示する | ショップデザイン / 機能・設定 / 決済画面デザイン / 備考(自由入力欄) |
| ゲスト購入画面に会員登録フォームを表示する | 会員管理 / 機能・設定 / 会員制ショップの設定 / 購入時にログイン画面を表示 「表示しない・決済画面前に表示・決済画面内に表示」 →どれを選択していても、チェックボックスはOFF |
| 決済完了画面に会員登録ボタンを表示する | 会員管理 / 機能・設定 / 会員制ショップの設定 / 決済完了画面に会員登録ボタンを表示 |
| 購入方法タブの「会員登録タブ」 |
会員管理 / 機能・設定 / 会員制ショップの設定 / 会員登録用URL 「利用しない」→会員登録タブを非表示 |
送料が0円の場合の送料欄の表示方法:Smart Checkout
送料が0円判定の場合に、決済画面に表示される内容を設定できます。
会員情報の住所欄が未登録で決済画面の住所が未入力の場合などの、送料の判定前も含みます。
▼入力例
入力の保存(旧決済画面・Smart Checkout共通)
決済画面から離脱した際に、お届け先などの入力情報を「自動保存」する機能です。
「保存する」設定の場合、決済第一画面の離脱から「最大3時間」は入力した情報を自動で保存します。
旧決済画面の決済第一画面 および Smart Checkoutの決済STEP1・2の離脱から「最大3時間」の有効期限内に決済画面に戻ってきた場合、保存された情報を利用できます。
「複数配送」では、お届け先ごとの商品振り分け状況も保存されます。
▼Smart Checkout用の設定
▼旧決済画面用の設定
|
下記の場合は、保存された情報が保持されません。 ・有効期限が切れた場合 ※未ログイン状態からログインした場合は、未ログイン時の入力情報を利用できます。 |
|
決済第一画面においてタブやブラウザを閉じた場合でも情報は保存されます。 ・下記の場合でも有効期限内であれば基本的に保存された情報が保持されます。 |
|
■備考欄について ・Smart Checkout: ・Smart Checkout:注文者情報を修正する |
旧決済画面の設定
注文画面の表示設定 ※PC画面のみ:旧決済画面
- 1PCの注文画面の整列形態を設定できます。(デフォルトでは中央寄せが選択されています)
-
2注文画面の背景カラーを設定することができます。
「色選択」というボタンをクリックするとパレットウィンドウが出てきて、216種類の色を選択することができます。背景に画像を指定することもできます。
「ファイルを選択」ボタンから画像を登録することができます。 - 3ご注文の流れ、注文ステップ画像を設定できます。 ※以下のような別ウィンドウが開きます。
[1]「オリジナル設定画像」を選択します。
[2]ステップ1~3で使用する画像をアップロードしてください。
画像を登録すると図のように登録済みの画像が表示されます。
※イメージファイルサイズは200KB以内で作成してください。
※イメージファイルはGIF、JPG形式が登録可能です。
[3]「確認」ボタンをクリックすると反映します。
- 4注文画面の詳細色設定をおこなうことができます。※以下のような別ウィンドウが開きます。
[1]項目の表の横幅を設定することができます。
[2]それぞれの項目の背景や文字色を設定することができます。
[3]上記の設定が完了しましたら「設定する」ボタンをクリックしてください。
(クリックしないと反映されません)
※設定を反映するには、管理画面最下位置の「保存」ボタンをクリックしてください。
誤った設定をした際には、「初期値に戻す」ボタンをクリックすると、初期状態に戻ります。
※PC画面のみ適用されます。
看板画像(画面上部)の表示設定:旧決済画面

-
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:決済画面表示例

スマホ:決済画面表示例
