[楽天RMS]スマホカスタマイズで売上UP！フローティングバナー設置方法

今やPCよりもスマホからの売上の方が多いと言われている楽天市場。今回もまたまた楽天のスマホに関するカスタマイズ方法をご紹介します。

スマホページでよく見かける、ずっとついてくるバナー。そう「フローティングバナー」の設置方法について書きたいと思います。

楽天の商品ページには「商品をかごに追加」「ご購入手続きへ」のボタンが既にフローティングバナーとして設置されてるので、下記に2か所への設置になります。

設置場所

トップページ設定（スマートフォン）
カテゴリページ設定（スマートフォン）

1. 設置タグ
2. CSS
3. カウントダウンタイマー

設置タグ


<!--CSS読み込みバグ-->
<link rel="stylesheet" 　　　　　　　　　　　　　　="" href="http://www.rakuten.ne.jp/gold/店舗ID/任意.css">


<!--フローティングバナータグ-->
<iframe src="http://www.rakuten.ne.jp/gold/店舗ID/任意.html" id="●●●●" scrolling="no" frameborder="0" =""=""></iframe ="">

上記のタグを先程のRMS内にある、デザイン設定メニュー（スマートフォン）>スマートフォン用トップページ or スマートフォン用カテゴリページに設置します。

CSS

設置タグにインラインフレームを入れたので、それに対してのCSSを指定してあげます。


#●●●● {
	width: 100%;
	height: 50px;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 99999;
}

カウントダウンタイマー

最後に、応用編としてフローティングバナーをセールやクーポン情報などで使えるカウントダウンタイマーにしてみました。
インラインフレームなのでバナー画像だけではなくscriptなども使えるので、こういった使い道で販売促進に繋げてもらえればと思います。

デモページ