3ステップカート　共通デザイン設定

マイページ、新規会員登録画面、IDを忘れた方はコチラ画面、パスワードを忘れた方はコチラ画面、特定商取引法に関する表示画面（※1）、送料について画面（※1）、会員規約画面（※1）、個人情報保護方針画面（※1）、検索結果画面（※2）、お問い合わせ画面、お知らせメール送信認証後画面、お知らせメール受信拒否URLを開いた画面、レビュー投稿画面、レビュー一覧画面（※2）に反映されます。

管理画面3ステップカートデザイン設定

（※1）ページ自動生成では、購入手続き画面中に表示されるリンク先のみ適用されます。

（※2）ページ自動生成では、コチラの設定が反映されません。

ショップロゴ画像は、オリジナル画像を用意する必要があります。なお、画像を指定しない場合や、ビジネスプラン・エキスパートプランでカゴヘッダー出力設定を利用して、CMSデザインを引き継ぐ場合には不要な作業です。

ファイル形式
jpg/jpeg、gif、png　
画素数
10000ピクセル四方以下
ファイル容量
500KB以下
表示形式
左右中央揃えで表示され、横幅を上回る箇所は非表示となります。

１．デザイン＞3ステップカート画面をクリックします。

２．ショップロゴ画像の「画像ライブラリ起動」ボタンをクリックします。

「画像ライブラリ起動」ボタンをクリック

　→画像ライブラリ（分類が「ショップロゴ」となっている画像のみ）が表示されます。

画像ライブラリ（分類が「ショップロゴ」となっている画像のみ）が表示

利用する画像が既に画像ライブラリにて表示されている場合には、手順４へ。

ショップロゴ指定箇所からの画像ライブラリ起動では、［ショップロゴ」分類の画像しか表示されませんが、コンテンツ＞画像ライブラリでは全分類の画像が表示されます。

３．「画像アップロード」タブをクリックし、画像ファイルをドロップまたは「ファイルを選択してください」のボタンから画像をアップロードを行います。

「画像アップロード」タブをクリック

４．画像一覧タブに戻ると、アップロードした画像が画像ライブラリ内に登録されていますので利用する画像の「挿入」ボタンをクリックします。

利用する画像の「挿入」ボタンをクリック

　→画像ライブラリが閉じて、ショップロゴ画像指定箇所に画像が表示されます。

ショップロゴ画像指定箇所に画像が表示

デザイン設定

１．デザイン＞3ステップカート画面をクリックし、デザイン設定にて各項目を入力します。

管理画面デザイン＞3ステップカート画面をクリック

デザイン設定項目一覧表
デザインパターン 予め用意しているデザイン組み合わせが23パターンあります。パターンはこちら
パターンを指定すると以下に続く（１）～（１２）の項目に値が挿入されます。
（１）ステップ画像

STEP1～STEP4にて表示されるステップ画像を指定します。

デフォルト画像を
使用する
　システムで予め用意している画像を利用する場合に選択し、パターン1～パターン16をセレクターにて指定します。
→指定したパターンのステップ画像が表示されます。
オリジナル画像を
使用する
　自身で用意した画像を利用する場合に選択し、画像ライブラリから利用する画像を指定します。
オリジナルステップ画像の作成は ページ下部を参照ください。
また、画像ライブラリへの画像登録は コチラをご覧ください。
（分類は ステップ画像を指定してください。）
（２）ページ背景色 ページ背景色を指定します。
（３）注意書き文字色 注意書き文字色を指定ます。

注意書き文字色が反映される箇所は以下の3箇所になります。
・STEP1 新規会員登録用入力欄の注意書き
・STEP3トークン式クレジットカード決済選択時のクレジットカード情報入力欄の注意書き
・PC用会員マイページ＞会員情報変更画面での例文
（４）文字サイズ 文字サイズを指定します。
（５）本体幅 本体幅を指定します。
（６）本体位置 本体位置を指定します。
（７）本体色 本体色を指定します。
（８）本体文字色 本体文字色を指定します。
（９）表枠線 表枠線を指定します。
（１０）表見出し背景色 表見出し背景食を指定します。
（１１）表見出し文字色 表見出し文字色を指定します。
（１２）表内文字色 表内文字色を指定します。
カゴヘッダー指定

ビジネスプランやエキスパートプランをご契約中で、ページ自動生成機能を利用している場合に表示されます。ページ自動生成機能のヘッダー画像を反映させる設定です。

このページで設定したヘッダーデザインを利用する
ページ自動生成機能のヘッダー画像を利用せず、このページのヘッダー画像が反映されます。
ページ自動生成で設定したヘッダーデザインを利用する
ページ自動生成機能のヘッダー画像を利用され、このページのヘッダー画像が反映されません。

入力したデザインは、画面下部の「プレビュー」ボタンより確認できます。（STEP1のみ）
ショップ名や、項目の設定などは例文となり、実際のショップ設定とは異なります。

５．最後に「設定する」ボタンをクリックして完了となります。

オリジナルステップ画像の作成

購入手続き画面に表示されるステップ画像をショップオリジナルの画像に変更できます。オリジナル画像は、管理画面にあるサンプルテンプレートを元にご用意ください。

サンプルテンプレートと同様に決められた枠内に各画像を配置してください。異なる配置やレイアウトの画像は、ステップ画像が正しく表示されません。

１．ここからダウンロードします。

２．保存した画像を画像編集ソフトで開き、編集してください。

オリジナルステップ画像の作成箇所一覧表
STEP1画像 購入手続き画面、STEP1（購入者情報入力）に表示されます。
STEP2画像 購入手続き画面、STEP2（支払・配送指定）に表示されます。
STEP3画像 購入手続き画面、STEP3（確認画面）に表示されます。
STEP4画像 購入手続き画面、STEP4（完了画面）に表示されます。
戻るボタン 購入手続き画面の下部に表示されます。
次へボタン 購入手続き画面の下部に表示されます。
注文するボタン 購入手続き画面、STEP3（確認画面）の下部に表示されます。
決済へボタン 購入手続き画面、STEP4（完了画面）に表示されます。
確認 オンライン決済を連動している場合にのみ表示されます。「決済へ」ボタンをクリックすると、連動設定をしたオンライン決済の決済手続き画面へ遷移します。
見出しアイコン 購入手続き画面の各節の見出し行頭に表示されます。
注文を確定して決済へボタン クロネコwebコレクトAPI方式およびりそなPayResort（リンク式）の連動設定を行っていて、その決済が選択された場合のみ、STEP３で表示されます。
確定するボタン クロネコwebコレクトAPI方式の連動設定を行っていて、その決済が選択された場合のみ、コンビニ選択画面で表示されます。

購入手続き画面でのSTEP1～4画像は中央揃えで表示され、表示枠の幅を上回る領域は見きれます。表示枠の幅は、上記、３－５（５）の表示幅に影響をうけます。（最低710px～最大800px）