カゴ画面編集のすすめ

こんにちは。ワニタでございます。

今回は、e-shopsカートSご利用ショップ様の、「カゴの中身」画面の編集についてご紹介します。
編集するとこんなメリットがある!(かもしれません)

ショップページと一体感がでる

3ステップカートの中身画面は、寒色系であり、彩度が低くなっています。
ショップページとトーンが異なる場合には、そのギャップに驚く購入者様もいると思います。
使用している色を変更することで、ネットショップ本体と同様のトーンにすることができ、一体感がでます。

購入完了率があがる

上の「ショップページと一体感がでる」の副次効果として、違和感によるカゴ落ちがなくなり、購入完了率があがるかもしれません。

購入者様に必ず伝えたい、注意事項やお知らせなどをほぼ見てもらえる

「カゴに入れる」ボタンを押下し遷移するページ【カゴの中身画面】では、画像の表示も行えるスペースが上下に有ります。この上部スペースに画像と説明文を追加すれば、購入手続きに進む前に、必ず目にすることになります。

以上ようなメリットがあるカゴ画面の編集について紹介していきます。
なお、背景色やヘッダー画像の変更などは、購入手続き画面のみではなく、会員マイページや商品検索結果画面、レビュー表示画面でも利用されます。

それでは、早速カゴ画面の編集方法についてご紹介していきます。

 

1.カゴ画面の編集箇所

以下図の番号箇所が編集可能です。

sd01_sample2

No. 箇所 説明
0 ショップ
ロゴ画像
ページ上部にショップのロゴ画像を掲載できます。
左右中央揃えで配置され、本体幅以上の場合は左右が見切れます。
縦サイズは全て表示されるよう、それ以下の内容が下にスライドされます。
1 ステップ画像 購入手続き中に表示される手続完了までの手続きを4ステップで表示する画像です。
テンプレートに添った画像を作成する必要があります。テンプレートのダウンロードや作成方法はこちら(オリジナルステップ画像のご利用方法)をご覧ください。
2 ページ
背景色
本体(コンテンツ表示部分)外の色を指定します。
3 例文文字色 表示される例文の文字色を指定します。
4 文字サイズ 標準の文字サイズを指定します。
5 本体幅 本体(コンテンツ表示部分)の幅を指定します。
6 本体位置 本体(コンテンツ表示部分)の位置を、中央・左・右から選択します。
7 本体色 本体(コンテンツ表示部分)の色を指定します。
8 本体文字色 標準文字の色を指定します。
9 表枠線 本体に表示される表の枠線の色と、一部見出しの行頭アイコンの色を指定します。
10 表見出し
背景色
表のタイトルとなるセルの背景色を指定します。
この色をショップページに合わせると統一感が出ます。(場合によっては出ませんので、様子を見つつ変更してみてください。)
11 表見出し
文字色
10の背景色のセル内文字色を指定します。
12 表内文字色 表内の見出しではないセル内文字色を指定します。

表内のは、購入手続き画面以外の以下ページにも反映されます。

会員マイページ、新規会員登録画面、特定商取引法に関する表示画面、送料について画面、j会員規約画面、個人情報保護方針画面、検索結果画面、お問合せ画面、お知らせメール送信認証画面、レビュー投稿画面、レビュー一覧画面

これらの指定は、e-shopsカートS管理画面 > デザイン > PC用カゴ画面 にて行えます。

2.カゴの中身画面の上下スペースの指定

商品ページの「カゴに入れる」ボタンをクリックして遷移したページ(カゴの中身画面)では、HTMLを指定して表示できる箇所があります。
購入手続きを行う際に必ず表示されるページですので、購入前のご案内や猛プッシュしたい商品のご紹介などが可能です。

表示例
image069

この設定は、e-shopsカートS管理画面 > コンテンツ > カゴ画面設定 内の「上部HTML」「下部HTML」で指定が可能です。

なお、スマートフォンによる購入手続きでも、PCと同じHTMLが画面に出力されます。画像の利用などはご注意ください。

今回は、以上でございます。
購入手続き画面でも、手続きを完了させる意欲が落ちないよう工夫するためのご参考としていただけたら幸いです。

それでは、また!

カテゴリー: 機能利用例紹介