ゼロステップカート デザイン設定

ゼロステップカートの購入手続き画面に反映されます。設定項目と表示箇所は、以下のようになります。 ゼロステップカートのデザイン設定反映場所

※「IDを忘れた方はコチラ」画面、「パスワードを忘れた方はコチラ」画面、特定商取引法に関する表示画面、送料について画面、会員規約画面、個人情報保護方針画面は、デザイン・カラー変更等が不可となります。

1.デザインゼロステップカート画面をクリックします。

管理画面デザイン>ゼロステップカート画面

→ゼロステップカートデザイン設定が表示されます。

ゼロステップカート上部

ロゴ画像を設定

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

ヘッダ画像
スマホサイズ用ヘッダ画像を新規登録・編集・削除する チェックを入れ、「画像ライブラリ起動」をし、画像を選択します。

画面サイズが横幅 0px ~ 766px の時:スマホサイズ用
推奨画像サイズ:766×100(縦幅100px固定)

タブレットサイズ用ヘッダ画像を新規登録・編集・削除する チェックを入れ、「画像ライブラリ起動」をし、画像を選択します。

767px ~ 991px の時:タブレットサイズ用
推奨画像サイズ:991×130(縦幅130px固定)

PCサイズ用ヘッダ画像を新規登録・編集・削除する チェックを入れ、「画像ライブラリ起動」をし、画像を選択します。

画面サイズが横幅 992px ~ の時:PCサイズ用
推奨画像サイズ:1040×130(縦幅130px固定)

購入者手続き画面のデザイン設定
全体 文字色 見出しなどを省いた画面全体の文字色を指定します。
枠線色 各項目を区切る枠線の色を指定します。
見出し 文字サイズ 見出しの文字サイズを指定します。
文字色 見出しの文字色を指定します。
アイコン色 見出し左側にあるアイコン色を指定します。
ヘルプマーク アイコン色 「?」のアイコン色を指定ます。
必須マーク 文字色 「※」や「必須」の色を指定します。
ヘッダ 背景色 ヘッダの背景色を指定します。
下線色 ヘッダの下線色を指定します。
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.画面を下にスクロールし、「設定する」ボタンをクリックします。

設定するボタンをクリック

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

ゼロステップカートの設定が完了