こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回は「Amazon Pay(オンライン決済)」の設定はしたけど
「amazon pay」ボタンが表示されない方のために、ボタンを表示させる方法をご案内します!

参考:オンラインマニュアル「Amazon Payの設定」

こんなお悩みありませんか?

・「amazon pay(Amazonアカウントでお支払い)」ボタンを買い物かごページへ表示したい
・スマホの買い物かごページへも表示したい

[難易度 ★☆☆ ]
買い物かごページへ
「amazon pay(Amazonアカウントでお支払い)」ボタンを表示する方法!

↓↓このようなボタンが買い物かごページに設置されます。

ボタン

※【重要】このボタンを好きな画像へ変更したり、編集して利用することはできません。
・2021年5月31日よりボタンデザインが変更されました。

その1. PC編

カスタマイズテンプレート(【カスタマイズ】ホワイト、【シンプル】ブラック以外)を新しく適用された場合は、既にソースが入力されているのでそのままご利用いただくことができます。

自身でデザインしているショップ様は、手順通りにタグを追記して表示しましょう。

(1)独自変数タグを追加!

【独自デザイン(PC)】>【内部ページ編集I】>【買い物かごページ管理】

エディターエリアに下記のようにソースを追記してください。

▼ 追記箇所

追記する箇所はお好みの位置に追記しましょう。

(2)CSSを指定する!

「amazon pay(Amazonアカウントでお支払い)」ボタンまわりをCSSで調整します!

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

下記のスタイル指定を追記してください。

(3)設置完了!

→Amazonアカウントで決済してもらうことができるなんてワクワクしますね!

その2. スマホ編

「Amazon Pay」は多くのスマホユーザーにも需要があります。
スマホも忘れずに設置しましょう!

スマホテンプレートベースデザイン【Primary】、【Primary・黒】を新しく適用された場合は、既にソースが入力されているのでそのままご利用いただくことができます。

タグを削除してしまった場合や、タグが入力されていないテンプレートをご利用の場合には、手順通りにタグを追記して表示しましょう。

(1)スマホ独自変数タグを追加!

【独自デザイン(スマホ)】>【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【買い物カゴ画面】へ

「HTML編集」エディターエリアに下記のようにソースを追記してください。

▼ 追記箇所

レジに進むボタンの下辺りに追記しましょう。

(2)CSSを指定する!

(1)と同じ買い物カゴ画面の
「CSS編集」エディターエリア内に、下記のスタイル指定を追記してください。

(3)スマホに設置完了!

amazon Payボタンスマホ

いかがでしたでしょうか。
Amazonアカウントでのスムーズな決済と新規会員獲得に効果的なサービス!
ぜひご利用ください。
それではまた!