いよいよ冬商戦。仕込みでお忙しい楽天店長さんへ。
どうも！ヤマダカイト（@slash_kaito）です。
本日はキャンペーン中などによく使用される、PCサイドバナーについて。
この方法は、正規の楽天RMSの使用方法と異なります。
楽天のシステム変更により使用できなくなったり、規約違反になる可能性もありますのでご注意ください。
スクロールで追従するサイドバナーってどんなの？
以前「コピペでOK!楽天RMSでスマホ追従バナーを設定する方法」と似ていますが、
スクロールしても固定でズバーっとついてきます。ずーっとついてきます。
商品ページを長いLP風にしている店舗さんであれば、「今こういうキャンペーンやってるんで誘導したい」といった時に便利です。
あとは、なによりも「賑やかし」になります。
店舗のTOPページが、
よりも
のほうが賑やかで楽しそうですよね。
特に楽天のメインユーザーである女性は、賑やかしがあるとないとでは購買意欲が全然異なってくると言われています。
とはいえ、女性の方はPCではなくスマホ経由が多いですが・・・
まあゼロではないので、ムダにはなりません！
こういった細かいことを少しづつやることで、売上は大きく変わっていくものです。
どうやって設置したらいい？
さて、では本題です。
PC用の追従バナーをどのように設置するか。
通常のHTMLをGOLDにアップして作っているページなら簡単です。
通常HTMLの場合
通常HTMLの場合は<body></body>内のイメージに、cssのposition:fixedで固定。そしてtop:0px;とleft:0pxで位置を指定すればOKですが、これだとクリックができません。
ですので、下記のように記述します。
僕は更新の手間を省くために、インラインフレームにしています。
そうすればleftバナーのHTMLを<!– –>のコメントアウトでくくれば、すぐに全ページともバナーを解除できますからね。
HTML
でOK。
楽天RMSの場合
楽天RMSの場合が問題です。
なぜかというと、商品ページの商品説明部分には上記のように記述できません。
さらに全商品ページにひとつひとつ設置するのは、現実的ではありません。商品数が多い店舗さんなら、なおさらです。
そこで、便利なのがヘッダー・フッター・レフトナビです。
ここに記述すれば全商品ページに、同じバナーが貼られます。
バナーの削除や変更など、管理するのもカンタンですね。
ヘッダー・フッター・レフトナビからテンプレートの編集＞レフトナビゲーションに以下を記入します。
HTML
そして右にも貼りたい場合はこちら。
HTML
違いは10行目、leftとrightです。
画像サイズは800×80とかだと、ちょうど天地幅になると思います。
ここで設定したテンプレートを商品ページに反映させるには、商品ページ設定の最下部にある「レイアウトのテンプレートを選択」から。
基本的には「自動選択」で問題ないと思いますが、商品ごとにバナーやヘッダー・フッター部分を変えたい場合は要設定です。
本日のまとめ
楽天RMSでPC用スクロール追従バナーを設置する方法でした。
各モールとも独自CMSのため、普通にできそうなことができなかったり、一手間必要だったりします。
そのため有料ツールなどで簡単にやる方法もありますが、可能な限り自分の手と頭を使ってやることでレベルアップにもなりますのでオススメです。
コメント