楽天市場の商品をパソコンで見ていると、画面のスクロールに追従してくるバナーをよく見かけますよね。

ひどいショップではバナーだらけでカートに入れるボタンがどこにあるのかわからない！なんてとこもありますが、効果的に配置できれば売上アップに貢献してくれることは間違いありません。

パソコンで楽天市場を見る人は少ないでしょうが、少ないアクセスに対してもしっかり訴求はしてきたいものです。この記事ではそんな画面のスクロールに追従してくるフローティングバナーを楽天市場の商品詳細ページで表示させる方法をご紹介します！

ショップ立ち上げたばかりだったりHTML初心者の方でもコピペすれば設置できる内容になっているのでぜひ参考にしてみてください。

フローティングバナーを表示させるためのHTMLは、RMSから直接編集してもいいですし、item.csvで記載してもいいです。どちらでも同じ場所に表示させることができます。

商品数が多い場合はitem.csvの方が一括で挿入できるので楽でしょう。特定の商品だけに表示させたい場合はRMSから直接でOKです。対象商品に合わせて検討してください。

商品詳細で編集する項目は「PC用販売説明文」になります。例えばもともと商品説明文が入っている場合、説明文の最後にHTMLを挿入してください。

<!-- フローティングバナー -->
<style>
    #floating_area {position:fixed;top:130px;right:0;}
    #floating_area2 {position:fixed;top:280px;right:0;}
    #floating_area img {width:150px;}
    #floating_area2 img {width:150px;}
</style>
    <div id="floating_area">
　    <a href="リンクURL">
  　　  <img src="画像URL" alt="テキスト">
    　</a>
    </div>
    <div id="floating_area2">
      <a href="リンクURL">
        <img src="画像URL" alt="テキスト">
      </a>
    </div>

以上です。

「リンクURL」や「画像URL」となっている部分は適宜自分のショップに合わせたURLに変更してみてください。少し専門的ですが「floating_area」で囲っているHTML部分を複製して「floating_area3」にし、CSSもfloating_area3を追記するとバナーを3つに増やすこともできます。

画像のサイズやフローティングバナーの上下の位置はCSSで変更できるようになっているので、縦長のバナーや別の位置に出すなど調整することも自由です。

URLを入れ替えるときはCSVで一括置換すればOKですが、削除するときはワイルドカードを使うと便利です。

上記の例では「<!– フローティングバナー –>」というHTMLのコメントを入れています。すべて置換する際は、検索する文字列に「*<!– フローティングバナー –>」と記載し、置換後の文字列は何も記載せずにすべて置換としてください。

そうするとフローティングバナー部分がきれいに消えたと思います。もし復活させたくなったら最初の手順通り、PC用説明文の最後に追記すればOKです。

ぜひチャレンジしてみてください！