楽天スマホ版のフローティングバナーについて

Question

お世話になります。

表題の件ですが、スマホで表示されている「買い物かごに追加」「ご購入手続きへ」のボタンは消すことができますか？（添付ファイル参照）
こちらにフローティングバナーを設置していたのですが上記がでていることによってバナーが隠れてしまっています。


またはこちらを消さずにフローティングバナーを他の場所に設置するにはどうすればいいですか？
（上部やサイドなど）
目的は回遊率アップ、もしくは打ち出したいコンテンツへの告知・誘導です。
おすすめのフローティングバナーの使い方や設置場所を教えてください。
（CSSの記述など含めて）


以上、何卒よろしくお願いいたします。

Answer

ECマスターズの田中です。

※以下の内容でご紹介するHTMLソースは、
　楽天RMSの、禁止タグを入力できるバグを利用しておりますので、
　今後、RMSの改修により、使用できなくなる可能性があります。

「買い物かごに追加」「ご購入手続きへ」のボタンは
消すことは可能ですが、
全ショップ共通で楽天が提供している機能を消すことで、お客様に対して、
商品を買い物かごに入れられない、購入手続きへ移動できない、といった
ご不便をおかけする可能性がありますので、
オススメいたしません。

ライカさんのショップのフローティングバナーを拝見したところ、
元々画面下に横幅１００％で固定表示されておりましたので、

http://www.rakuten.ne.jp/gold/ショップURL/item/floatbanner1.css

内の「.spFixedBanner」に対する規則の中にある、
「bottom」を「top」にご変更いただき、
画面上端に固定表示していただくと良いと思います。

その際、下記の規則を「floatbanner1.css」に追加していただくと、
ページを開いた時にバナーとヘッダーが重なることを
防ぐことができます。

===== この下の行から ================
#ipnsh-header { margin-top: calc( 100vw * ( 150 / 730 ) ); }
===== この上の行まで ================
※固定バナー用の画像ファイルの縦横比が変更された場合は、
　「150」を新しい縦幅に、「730」を新しい横幅に置き換えてください。

もし、現在以上の高さがあるバナーを固定表示される場合は、
お客様の操作性を損ない、ご不便をかける可能性がありますので
予めご承知おきいただきますようお願いします。

また、万が一、どうしても
「買い物かごに追加」「ご購入手続きへ」ボタンを消したい場合は、
下記の規則を「floatbanner1.css」に追加してください。

===== この下の行から ================
body #floatingCartContainer { display: none !important; }
===== この上の行まで ================

Answer

ECマスターズの田中です。

当質問にていただいたような、
画面に固定されるバナーを簡単に設置できる
「バナー設置君」を作成いたしましたので、
全体公開前に、当質問への返信として、
先行してお知らせさせていただきます。

HTMLやスタイルシートを書くことなく、
完成したHTMLをヘッダー・フッター・レフトナビに貼り付けるだけで
固定バナーを簡単に設置することができます。

オプションを詳しく設定することで、
マウスを乗せると動いたり、半透明になったり、
IDを変えることで複数設置することも可能です。

もし、新しいバナーに入れ替える機会などありましたら、
ぜひ、下記URLより「バナー設置君」をお試しいただき、
わかりづらい点やご希望などございましたら
お知らせいただければと思います。
https://ec-masters.club/fwd3/fixedbannerkun