単品ページから、送料無料の複数個ページ、への導線を作りたい

Question

お世話になっております。

半年くらい前に送料無料の基準を満たさない単品商品を
すべて複数個セットにすることで、商品数を増やし、かつ
客単価を上げることができました。

ただ、単品ページ（Aという商品を１個だけ販売）から
複数個ページ（Aという商品を複数個販売し送料無料化）への
導線がないので、この機会に改善したいです。

キャンペーン時期以外は左端の縦バナーで送料無料条件を
デカデカとアピールしているので、認知はされていると思う
のですが、いざ買うとなると認識されていないかもしれません。

導線を作るのがいいか、もう〇個買うと送料が無料に
なりますよとアピールするのもいいですし、●個買うと
送料無料になりますよと言うのもいいかと。

この辺りをうまく取り入れているショップさんもあわせて
ご紹介いただけると助かります。

どうぞよろしくお願いいたします。

Answer

ECマスターズの塚本です。

>キャンペーン時期以外は左端の縦バナーで送料無料条件を
>デカデカとアピールしているので、認知はされていると思う
>のですが、いざ買うとなると認識されていないかもしれません。

確認いたしました。

左端の縦バナーから送料無料カテゴリに
遷移できないのはもったいないですね。

縦バナーより、送料無料商品を登録している、
カテゴリへ遷移できるようリンク設定をお願いいたします。

＞この辺りをうまく取り入れているショップさんもあわせて
＞ご紹介いただけると助かります。

PCとスマートフォン両方の商品ページに
導線を作っていただくのも良いですね。

私が探した中で上手く取り入れられているショップでは、

以下URLのショップでは複数セット購入案内を
バナーを使用しながら商品ページで案内されていますね。
https://item.rakuten.co.jp/auc-tokutoku/01222_6/

また、以下のショップの商品ページのように、
https://item.rakuten.co.jp/wakeariya/sm00010121/

項目選択肢で〜セット以上で送料無料と
お客さんに認知させているところもありますね。

以下URLのようにGoogleで検索すると、
他のショップの例が検索できますので、

ぜひカイザー さんでも他のショップを
検索しながら参考にしてみてください。
https://goo.gl/wphxNj

Answer

塚本さん、ありがとうございます。

＞縦バナーより、送料無料商品を登録している、
＞カテゴリへ遷移できるようリンク設定をお願いいたします。

いま以下のように設定しているのですが、
これをクリック可能にする方法をご教授ください。





＞項目選択肢で〜セット以上で送料無料と
＞お客さんに認知させているところもありますね。

画面遷移よりページ内で注意喚起するのが
いいので、こちらを取り入れてみます。

以上よろしくお願いいたします。

Answer

ECマスターズの田中です。

＞いま以下のように設定しているのですが、
＞これをクリック可能にする方法をご教授ください。

いただいたタグは、タグの背景画像として
バナーを設定する方法となりますので、
クリック可能にする際は、タグを設置する方法に
切り替えていただく形になります。

その際、縦バナーの高さは
手動で固定値をご設定いただく必要がございますので、
ページと設定の兼ね合いによって、
下部の余白が大きくなったり、バナーがページの途中で途切れたりする
可能性がございますので、予めお含みおきください。

実際には、下記ソースに入替えていただく形になります。

===== この下の行から ================


.vbanner {
position: absolute;
min-height: 100%;
top: 0px;
width: 縦バナーの横サイズpx;
background: url(縦バナーの画像URL) repeat-y scroll;
left: 20px; /* 画面左端とバナーの間隔（画面右端の場合はrightに変更してください） */
z-index: 0; /*重なり順の設定。ページ内他のパーツより上に出したい時は数字を増やす */
height: 3000px; /*縦バナーの高さ。ページの長さによって調整してください */
visibility: visible; /*縦バナーの表示・非表示（hidden＝消す、visible＝見せる）*/
}
.vbanner a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*小さいモニタの場合非表示にする（一行下の1220を変更して調整可能）*/
@media screen and (max-width: 1220px) {
.vbanner {
visibility: hidden;
}
}

===== この上の行まで ================
※上記タグ中の、縦バナーの横サイズは実際の数値に、
　縦バナーのリンク先・画像URLは実際のURLに、変更してご利用ください。
※「縦バナーの高さ」を大きく設定しすぎると、
　ページの高さが長くなりますのでご注意ください。
※左右どちらかのバナーのみご利用される場合は、
　1行目または2行目を削除してください。
※HTMLタグを設置してもバナーが表示されない場合は、
　「小さいモニタの場合非表示にする」部分の数字を小さくしてご確認ください。

Answer

田中さん、ご返信が遅くなりました。

ソースを入れ込んでみましたが、送料無料バナーが
表示されません。

リクエストフォームからHTMLを送った方がいいでしょうか？

Answer

ECマスターズの田中です。

それでは、仰るとおり、
リクエストフォームからHTMLを
お送りいただけますでしょうか。

Answer

ECマスターズの田中です。

HTMLをお送りいただき、ありがとうございました。
また、ご案内差し上げたソースに誤りがあることがわかりました。
大変失礼いたしました。

ソースに3箇所含まれる
.link
を
.vbanner
にご変更いただき、
表示をご確認いただけますでしょうか。

最初にご案内差し上げたソースも、修正を行わせていただきます。

Answer

田中さん、無事に稼働しました。

ありがとうございました。