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

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

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

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

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

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

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

3ステップカートデザイン設定 が表示

2.ショップロゴ画像を指定します。

画像を指定しない場合や、ビジネスプラン・エキスパートプランでカゴヘッダー出力設定を利用して、CMSデザインを引き継ぐ場合には不要な作業です。

ショップロゴ画像は、オリジナル画像を用意する必要があります。

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

2-1・「画像ライブラリ起動」ボタンをクリックします。

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

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

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

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

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

 2-2.「画像アップロード」タブをクリックします。

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

 →画像アップロード画面が表示されます。

画像アップロード画面が表

2-3.各項目の値を入力し、「画像をアップロードする」をクリックします。

各項目の値を入力し、「画像をアップロードする」をクリック

画像アップロード画面の項目一覧表
ファイル選択 「ファイルを選択」ボタンをクリックし、ショップロゴ画像を指定します。
画像名設定 画像ライブラリでの管理用名称を入力します。
全半角15文字以内
分類 今回の操作では、「ショップロゴ」を選択します。
画像グループ 画像グループ名を選択します。
画像グループについてはコチラを御覧ください。

→画像一覧タブ画面に遷移し、選択した画像が画像ライブラリ内に登録されています。

画像一覧タブ画面に遷移し、選択した画像が画像ライブラリ内に登録

 2-5.利用する画像の「挿入」ボタンをクリックします。

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

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

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

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

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

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

デフォルト画像を
使用する
 システムで予め用意している画像を利用する場合に選択し、パターン1~パターン16をセレクターにて指定します。
→指定したパターンのステップ画像が表示されます。
オリジナル画像を
使用する
 自身で用意した画像を利用する場合に選択し、画像ライブラリから利用する画像を指定します。
オリジナルステップ画像の作成は ページ下部を参照ください。
また、画像ライブラリへの画像登録は コチラをご覧ください。
(分類は ステップ画像を指定してください。)
(2)ページ背景色 ページ背景色を指定します。
(3)注意書き文字色 注意書き文字色を指定ます。
(4)文字サイズ 文字サイズを指定します。
(5)本体幅 本体幅を指定します。
(6)本体位置 本体位置を指定します。
(7)本体色 本体色を指定します。
(8)本体文字色 本体文字色を指定します。
(9)表枠線 表枠線を指定します。
(10)表見出し背景色 表見出し背景食を指定します。
(11)表見出し文字色 表見出し文字色を指定します。
(12)表内文字色 表内文字色を指定します。
カゴヘッダー指定

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

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

 

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

プレビューボタンをクリック

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

購入手続き画面(STEP1)の例が表示

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

5.「設定する」ボタンをクリックします。

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

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

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

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

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

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

1.ここからダウンロードします。

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

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

購入手続き画面でのSTEP1~4画像は中央揃えで表示され、表示枠の幅を上回る領域は見きれます。表示枠の幅は、上記、3-5(5)の表示幅に影響をうけます。(最低710px~最大800px)