オリジナルステップ画像のご利用方法

ステップ画像は、3ステップカートの注文手続き画面で現在位置を示す画像です。3ステップカートの注文手続きは、購入者情報入力画面、支払・配送選択画面、確認画面、完了画面の4段階になっていて、ステップ画像により現在の画面を購入者様に知らせています。
システム側に予め用意されている23種類の画像の他、ショップ様で作成したステップ画像の表示も可能です。
以下に、オリジナルステップ画像の表示方法を紹介いたします。

【ご注意】
※オリジナルステップ画像は、通常かごソースで設置された3ステップカート及びシンクロカゴソースで設置された3ステップカートの購入手続き画面内にのみ反映されます。
※「ゼロステップカート」には反映されません。


■1.オリジナルSTEP画像での指定箇所

オリジナルSTEP画像を利用して以下箇所の表示変更ができます。
尚、「買い物カゴの中身」画面にある「買い物を続ける」ボタンは、管理画面「コンテンツ」>「アイコン設定」でご変更可能となっております。


STEP1用画像
注文手続き画面のSTEP1にて表示されます。

STEP2用画像
注文手続き画面のSTEP2にて表示されます。

STEP3用画像
注文手続き画面のSTEP3にて表示されます。

STEP4用画像
注文手続き画面のSTEP4にて表示されます。

戻るボタン

次へボタン
注文手続き画面の「戻る」ボタンで表示されます。

注文するボタン
注文手続き画面の「注文する」ボタンで表示されます。

決済へボタン
注文手続き画面の「決済へ」ボタンで表示されます。
※オンライン決済の連動設定を行っていて、その決済が選択された場合に、STEP4で表示されます。

見出しアイコン
注文手続き画面などの見出し「アイコン」として表示されます。

注文を確定して
決済へボタン

クロネコwebコレクトAPI方式またはりそなPayResortの連動設定を行っていて、その決済が選択された場合のみ、STEP3で表示されます。


確定する
クロネコwebコレクトAPI方式の連動設定を行っていて、その決済が選択された場合のみ、
コンビニ選択画面で表示されます。

■2 オリジナルSTEP画像の形式

▼オリジナルSTEP画像例


●オリジナルSTEP画像の制限

ファイル形式 ファイル形式 「gif」
画像サイズ 画像サイズ 縦横共に800px以内
ファイルサイズ 500KB以内

テンプレート上に画像を配置して、オリジナルSTEP画像を作成ください。
テンプレートの表示(PCに保存し、ご利用ください。)

■3 オリジナルSTEP画像の登録

1.ステップ画像の「画像ライブラリ起動」ボタンをクリックします。

2.画像ライブラリの「画像アップロード」タブにて、作成済みのオリジナルSTEP画像をアップロードします。

3.アップロードされた画像の「挿入」ボタンをクリックします。

4.オリジナル画像が表示されるので、最下部の「設定する」ボタンをクリックします。

■4 オリジナルSTEP画像ご利用のご注意事項

オリジナル画像に配置されたそれぞれの画像が所定箇所に表示がされます。


①~④ 各STEP画像の表示について
  各STEP画像は、中央揃えで購入手続き画面に表示されます。

  例:750pxのSTEP画像を登録した場合には、中央揃えで左右に「325px」の配置となります。


【表示サイズについて】
 表示される画像領域の高さは60px固定です。
 なお、幅は「デザイン > PC共通デザイン設定 > 本体幅」に従って710px~800pxとなります。


  「a:本体幅」の指定により、STEP画像の表示幅は以下のようなります。
   ・本体幅:760px~850px ⇒ 710px~800px(本体幅 - 50pxのサイズにて表示されます。)
   ・本体幅:850pxを超える場合 ⇒ 本体幅によらず 800px(最大値)で表示されます。

本体幅と表示画像のサイズが異なる場合
例1:本体幅760px(画像の表示幅:710px)で、w=600pxの画像を配置したテンプレート画像を登録した場合
   表示幅以内であれば、設定画像が正しく表示されます。


例2:本体幅760px(画像の表示幅:710px)で、w=800pxの画像を配置したテンプレート画像を登録した場合


例3:【ビジネスプラン・エキスパートプランをご利用のショップ様のみ】
デザイン設定にて「①PC用カゴデザインの設定を利用する ページ自動生成で設定したヘッダーデザインを利用する」を選択した場合



上記の設定を選択した場合には、「デザイン > PC共通デザイン設定 > 本体幅」で設定した「本体幅」のサイズは適用されず、
画像の表示幅は「800px」で固定表示となります。

↑このページのトップへ