スマホカゴ カートデザイン設定

スマホカゴの購入手続き画面に反映されます。設定項目と表示箇所は、以下のようになります。

マイページ、新規会員登録画面、検索結果画面、お問い合わせ画面、お知らせメール送信認証後画面、お知らせメール受信拒否URLを開いた画面、レビュー投稿画面、レビュー一覧画面はPCカゴのデザイン設定が反映されます。

スマホカゴご利用の際には、「IDを忘れた方はコチラ」画面、「パスワードを忘れた方はコチラ」画面、特定商取引法に関する表示画面、送料について画面、会員規約画面、個人情報保護方針画面は、スマホカゴのレスポンシブデザインにて表示されます。(※カラー変更等は不可となります。)

1.デザインスマホカゴ画面をクリックします。

→スマホカゴデザイン設定が表示されます。

ショップロゴ画像を表示できる機能は未だご用意がございませんが、今後公開する予定で進めております。

2.デザイン設定にて各項目を入力します。

購入手続き画面全体のデザインパターン設定
デザインパターン 予め用意しているデザイン組み合わせがデフォルトのデザインを含めて10パターンあります。
パターンを指定すると以下に続く(1)~(48)の項目に値が挿入されます。
購入者手続き画面のデザイン設定
全体 文字色 見出しなどを省いた画面全体の文字色を指定します。
枠線色 各項目を区切る枠線の色を指定します。
見出し 文字サイズ 見出しの文字サイズを指定します。
文字色 見出しの文字色を指定します。
アイコン色 見出し左側にあるアイコン色を指定します。
ヘルプマーク アイコン色 「?」のアイコン色を指定ます。
必須マーク 文字色 「※」や「必須」の色を指定します。
ヘッダ 背景色 ヘッダの背景色を指定します。
下線色 ヘッダの下線色を指定します。
10 ショップ名色 ヘッダのショップ名の文字色を指定します。
11 ショップ名文字サイズ ヘッダのショップ名の文字サイズを指定します。
12 フッタ 背景色 固定フッタの背景色を指定します。

スマホ画面サイズで表示した時のみ反映

13 上線色 固定フッタの上線色を指定します。

スマホ画面サイズで表示した時のみ反映

14 合計文字色 固定フッタに表示のある合計金額の文字色を指定します。

スマホ画面サイズで表示した時のみ反映

15 あと**円で送料無料 文字サイズ 文字サイズを指定します。

送料パターン4利用時のみ反映

16 文字色 文字色を指定します。

送料パターン4利用時のみ反映

スマホカゴにおいて、以下の各種ボタンは任意のオリジナル画像とすることはできません。

17 「ログインする」ボタン1 背景色 ボタンの背景色を指定します。
18 文字色 ボタンの文字色を指定します。
19 枠線色 ボタンの枠線色を指定します。
20 表示名 ボタンに表示される文言を指定します。
21 「ログインする」ボタン2 背景色 ボタンの背景色を指定します。
22 文字色 ボタンの文字色を指定します。
23 枠線色 ボタンの枠線色を指定します。
24 表示名 ボタンに表示される文言を指定します。
25 「ショッピングを続ける」ボタン1 背景色 ボタンの背景色を指定します。

デザインパターン毎に固定されます

26 文字色 ボタンの文字色を指定します。
27 枠線色 ボタンの枠線色を指定します。
28 表示名 ボタンに表示される文言を指定します。
29 「ショッピングを続ける」ボタン2 背景色 ボタンの背景色を指定します。

デザインパターン毎に固定されます

30 文字色 ボタンの文字色を指定します。
31 枠線色 ボタンの枠線色を指定します。
32 表示名 ボタンに表示される文言を指定します。
33 「注文確認する」ボタン 背景色 ボタンの背景色を指定します。

デザインパターン毎に固定されます

34 文字色 ボタンの文字色を指定します。
35 枠線色 ボタンの枠線色を指定します。
36 表示名 ボタンに表示される文言を指定します。
確認画面(モーダル)のデザイン設定
37 「注文する」ボタン 背景色 ボタンの背景色を指定します。

デザインパターン毎に固定されます

38 文字色 ボタンの文字色を指定します。
39 枠線色 ボタンの枠線色を指定します。
40 表示名 ボタンに表示される文言を指定します。
注文完了画面のデザイン設定
41 「ショップのトップページへ」ボタン 背景色 ボタンの背景色を指定します。

デザインパターン毎に固定されます

42 文字色 ボタンの文字色を指定します。
43 枠線色 ボタンの枠線色を指定します。
44 表示名 管理画面「コンテンツ」>「サンクス画面」>「注文完了後戻り先ページ」より設定できます。
>>操作方法はコチラ
45 クーポン表示エリア 背景色 表示エリアの背景色を指定します。
46 文字色 表示エリアの文字色を指定します。
47 枠線色 表示エリアの枠線色を指定します。
48 表示名 表示エリアの文字サイズを指定します。
クーポンの作成・表示方法はコチラ
「決済へ進む」画面のデザイン設定
説明文 説明文 「決済へ進む」ボタンの上部に表示する説明文を指定します。
文字色 説明文の文字色を指定します。
文字サイズ 説明文の文字サイズを指定します。
「決済へ」ボタン 文字色 ボタンの文字色を指定します。
背景色 ボタンの背景色を指定します。
枠線色 表示エリアの枠線色を指定します。
表示名 ボタンに表示される文言を指定します。

 

3.「プレビュー」ボタンをクリックします。

→このページで指定している情報が反映された場合の購入手続き画面の例が表示されます。

確認画面(モーダル)や注文完了画面のデザインはプレビューでは確認できません。
お手数ですが実際の購入手続き画面よりご確認下さい。

プレビューを開いたら、画面幅を拡大・縮小したりして、ぜひレスポンシブ対応の画面をご確認下さい。画面サイズによって若干レイアウトが異なります。

 ショップ名や、項目の設定などは例文となり、実際のショップ設定とは異なります。

4.画面を下にスクロールし、「設定する」ボタンをクリックします。

→設定が完了となり、「設定が完了しました。」というメッセージが表示されます。