futureshopオンラインマニュアル
運用サポート平日10:00～17:00
06-6485-6485

Amazon Pay 画面デザイン上の注意

コマースクリエイター切替後は使用しません。

Amazon設定に対応する画面と確認方法


Amazon Pay対応オプションによって、以下の画面が変更されます。（画面遷移の確認は［Amazon Pay画面遷移と解説・Amazonログイン画面遷移と解説］をご参照ください。
対応画面については、オプション設定が完了した時点から、プレビューにて確認いただけます。構築＞ページ設定＞Amazon設定の基本設定-利用設定を「設定する」にせずにプレビュー確認できます。

  • ショッピングカート
  • ご注文手続き（追加される画面）
  • ご購入手続き（ご購入途中のログイン画面）
  • ログイン画面（Amazonアカウントでのログイン成功後、会員登録済みの場合に、Amazonアカウントと連携するための会員ログイン画面）
  • ログイン画面（マイページへの会員ログイン画面・クーポン取得途中の会員ログイン画面）

プレビューは構築＞デザイン設定＞デザイン設定画面から、デザインテンプレートごとに設置された「プレビュー」ボタンを押下すると確認できます。
または構築＞ページ設定＞Amazon設定の基本設定にある「プレビュー」ボタンからも確認できます。

Amazon Pay専用ご注文手続きのページレイアウト（PCサイト）について


Amazon Pay専用のご注文手続き画面では、最低980ピクセルのページ幅が必要となります。（旧テンプレートの「ベーシック」は最低1,000ピクセル必要です。）内訳は、Amazonウィジェットが最少幅300ピクセル×2、お支払い金額欄が300ピクセル、余白が合計80ピクセル（BASICシリーズは余白100ピクセル）です。
よって、構築＞デザイン設定＞レイアウト編集画面の「ページレイアウト指定」で「ページ全体の幅と寄せ」を、980ピクセル以下（旧テンプレートの「ベーシック」は1,000ピクセル以下）に指定した場合、指定された幅になりません。



ページ全体の幅から左（右）メニューの幅を減算した、コンテンツエリアの幅が980ピクセル（旧テンプレートの「ベーシック」は1,000ピクセル）必要となります。
上記例では、ページ全体の幅が780ピクセルで、左メニューが180ピクセルに設定されていますので、コンテンツエリアの幅は600ピクセルとなり、足りません。ブラウザによっては画面が適切に表示されない場合があります。

お支払い金額欄のレイアウト変更


右側の「お支払い金額」欄は、画面をスクロールしても、画面の右上部に表示されます。

左メニュー・右メニューをご利用されているなど、画面の左右幅が狭い場合、右側の「お支払い金額」欄を画面の最下部に表示できます。

以下のCSS記述を、構築＞デザイン設定＞オリジナルCSS/JavaScript編集画面-「オリジナルCSSの編集」欄に記載すると、レイアウトを変更し、「お支払い金額」欄を縦に並べることができます。





各種ボタンについて


「ログインして購入」「ログインせず購入」「変更」「お届け日時変更」「ポイント利用」「のし・ギフト包装設定」「注文を確定する」などのボタンは、CSSによってデザインされたボタンです。デザインを変更する場合は、CSSをご利用ください。
構築＞デザイン設定＞オリジナルCSS/JavaScript編集機能をご利用いただけます。

「お客様情報」の説明のCSSによる出し分け（新規・会員）


お客様が会員登録前、または会員ログインせずにAmazon Payを利用してご注文される場合、ご注文確認画面で「お客様の情報」をAmazonアカウントとアドレス帳の情報より自動表示いたします。会員登録後、または会員ログインしてご注文される場合は、会員情報を表示しています。

「お客様の情報説明コメント」には『お客様の情報が正しいことをご確認ください。変更ボタンから訂正できます。』と記載しておりますが、Amazonアカウントとアドレス帳の情報より自動表示する場合は、フリガナを「氏名」の漢字より解析して表示するなど、場合によって正しく表示されないケースがあります。

そこで、CSSを利用することで、「お客様の情報」を「Amazonアカウントとアドレス帳の情報より自動表示」している場合と、すでに「登録された会員情報を表示」している場合で、メッセージを変更することができます。

メッセージを場合によって変更するには、以下のCSS記述を、構築＞デザイン設定＞オリジナルCSS/JavaScript編集画面-「オリジナルCSSの編集」欄に記載し、構築＞ページ設定＞Amazon設定の「お客様の情報説明コメント」を変更してください。


オリジナルCSS記述例


お客様の情報説明コメント記述例



「購入するには会員登録が必要（強制）」かつ「お客様（消費者）にて会員登録可能」な場合


「構築＞入力項目設定＞会員機能に関する設定」にて、以下のように設定されている場合に、特定の操作でログイン画面に不要なコメントが表示されます。該当の設定をされている場合、以下のCSS記述をPCサイト、スマートフォンサイトともに、ご登録いただけますようお願いします。


構築＞入力項目設定＞会員機能に関する設定が以下の場合


  • 基本設定-会員登録の強制・非強制：購入するには会員登録が必要（強制）
  • 基本設定-会員登録方法：お客様（消費者）にて会員登録可能

特定の操作


自社ECサイト（futureshop）に会員登録したものと、同じメールアドレスのAmazonアカウントを持っており、かつ、一度もAmazonアカウントでECサイトへログイン（AmazonID連携）したことがないお客様が対象となります。

  1. 会員ログインしていない状態
  2. ショッピングカートまたはログイン画面から「Amazonログイン」のみを行う
  3. （自社ECサイトのログインをせずに）もう一度ショッピングカートに戻る
  4. 「このサイトでお支払い」を選ぶ

上記操作により、構築＞ページ設定＞購入画面設定のログイン画面設定（会員制機能を利用する場合の購入途中）-会員登録説明コメント（「ご利用が初めてのお客様、会員登録をしていただきますと、２度目以降のお買い物の際に大変便利です。」といったメッセージ）が表示されます。なお、登録済み会員情報とAmazonアカウントで、メールアドレスが同一であるため、会員登録ボタンは表示されません。




登録いただきたいCSS


以下のCSSをPCサイト、スマートフォンサイトそれぞれに適用してください。


PCサイト用。
構築＞デザイン設定＞オリジナルCSS/JavaScript編集画面-「オリジナルCSSの編集」欄に追記してください。


スマートフォンサイト用。
モバイルメニュー＞デザイン設定＞スマートフォンデザイン設定画面-「デザインCSSの編集」欄に追記してください。

Amazon Pay専用ご注文手続きのページレイアウト（スマートフォンサイト）について



Amazon Pay専用ご注文手続き画面
ヘッダコメント・フッタコメント・コメントパターンの設定


Amazon Pay専用ご注文手続き画面の「ヘッダコメント」「フッタコメント」「コメントパターンの設定」は、通常のご注文フォーム（Amazon Payを利用しない）と、それぞれ別に設定できます。
設定画面は「モバイルメニュー＞ページ設定＞スマートフォン各ページ設定(カート)」です。

なお初期状態では、「ヘッダコメント・フッタコメント：利用しない」「コメントパターン：設定しない」に設定されています。




ご利用開始前に「プレビュー」にてご確認ください


スマートフォンは「モバイルメニュー＞ページ設定＞スマートフォントップページ設定」にある「プレビュー」から確認できます。



スマートフォンサイト「配送方法について」「ご注文内容の確認」について


スマートフォンサイトでは画面内容を簡潔に見せるため「配送方法について」「ご注文内容の確認」を閉じた状態で表示し、タップ操作によって開くようにしています。
「配送方法について」は、「構築＞送料・決済設定＞配送サービス設定」の「配送サービスに関する説明-【スマートフォン】」欄のコメントを登録されている場合に表示されます。

下記のCSSをご利用いただくと、あらかじめ「開いた」状態で表示できます。
モバイルメニュー＞デザイン設定＞スマートフォンデザイン設定画面-「デザインCSSの編集」欄に追記してください。


「配送方法について」を予め表示




「ご注文内容の確認」を予め表示



関連項目