ネットショップ

楽天ショップ等の縦帯バナーを商品別に変えるには?

投稿日:

楽天などのインターネットショップをパソコンで見ると、よく画面端に縦に伸びる細長いバナーが表示されている事があるでしょう。あれを縦帯バナーなどと呼んでいます。

ポイント○倍!とか送料無料!とかお客さんにアピールしたい文言をどかっと表示させておく事で凄く目立つバナーです。

2017年頃までは○○円以上購入で送料無料などと縦帯バナーに表示させておく事で「もうちょっと買って送料無料にしようかな?」という気を起こさせて購入してもらう作戦が有効でしたが、2018年以降はそういう訳にもいかなくなってしまいました。何故なら運送会社の送料の値上がりが顕著で大型商品だと送料をもらわないと採算が合わなくなってしまったからです。

つまり小さい商品なら送料無料だけど、大きい商品は送料無料じゃないという事になり、縦帯バナーで全商品に○○円以上で送料無料と表示させておくとクレームの元となり不都合になったのです。

そういう訳で縦帯バナーを商品別に変えられたら最高なのにという発想にたどり着きました。

縦帯バナーを商品別に変えたい

結論を言うとできない事はないです。ただし、html 的にあまりよろしくない方法である上に 楽天 RMS の裏技を使う事になります。

簡単に言うと、外部 CSS で設定した背景(縦帯バナー)を内部の CSS で上書きするという方法です。

商品ページの商品説明欄などに次のようなタグを挿入します。

<style type='text/css'>
<!--
  body{
     background-image:url('縦帯バナーurl')!important;
  }
-->
</style>

body タグに設定した背景を商品ごとに内部の CSS で背景を上書きしました。自社サイトであればここまでの方法で終わりです。楽天の場合はもうひと手間必要となります。

<style            type='text/css'>
<!--
  body{
     background-image:url('縦帯バナーurl')!important;
  }
-->
</style           >

楽天商品ページでは style タグは禁止になっています。しかし、style タグに全角スペースをたくさん入れる事で禁止制限を突破できるという裏技があります。入れる数は11個とか13個とか色々な説があります。

ただシステムの穴をかいくぐる裏技なのでいつその穴を埋められるかわかりません。2018年9月現在で有効な方法です。

おわりに

商品ページの縦帯バナーに○円以上で送料無料!と書かれてあるのに、大型商品だと送料無料じゃありませんなんて言われたら確かに怒る気持ちもわかります。しかし、店舗側からだと全商品に○円以上で送料無料バナーを外すのは売上を落としてしまうかもしれません。

商品別に縦帯バナーを変更する事でクレームを少しでも減らせたらと。

-ネットショップ

Copyright© ウェブミスト(Webmist) , 2020 AllRights Reserved Powered by STINGER.