スマホ商品ページでの固定バナー

Question

いつもお世話になっております。
下記ショップ様のように
https://item.rakuten.co.jp/platinuml-4/ax-951042/
スマホ商品ページにスーパーセールの固定バナーを設定させたいのですか可能でしょうか？
よろしくお願い申し上げます。

Answer

ECマスターズの伊藤です。

スマホ商品ページでの固定バナーについてですが
固定したいコンテンツを作成し、
そのコンテンツにCSSを指定すると
作成することができます。

まず、固定したいコンテンツをご用意いただき、
そちらを、divやiframeなどの要素で囲んでください。
この要素に、cssを設定できるよう
class名を指定してください。
今回は例として、要素=div、class=sampleで
説明させていただきます。
＝＝＝＝＝

固定したいコンテンツ

＝＝＝＝＝
こちらを商品ページ共通説明文に追加してください。

次に、CSSに下記の記述の追加をお願いいたします。
＝＝＝＝＝
.sample{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: orange;
    height: 50px;
}
＝＝＝＝＝

詳細は下記の通りとなりますので、position以外は、
内容に合わせて修正いただきますよう、お願いいたします。
    position: fixed;　// cssを指定したdivを固定
    top: 0;　// divの上の基準を、画面の上から0pxに指定
    left: 0;　// divの左の基準を、画面の左から0pxに固定
    width: 100%; // divの横幅を画面幅100%に指定
    height: 50px; // divの高さを50pxに指定

（3/5 14:54 ガイドラインに違反する部分を削除）

上記のとおり、追加、更新いただきますと
固定したコンテンツを表示していただけます。

Answer

ECマスターズの田中です。

申し訳ありません、
伊藤よりご案内差し上げた内容に、
ガイドライン違反に繋がる内容がございましたので
加えてご案内差し上げます。

例としていただいたURLのように、
「共通ヘッダ部分」を下にずらしたりなど、改変してしまいますと

取扱禁止商材・禁止行為ガイドライン
https://navi-manual.faq.rakuten.net/rule/000010037?
Ⅱ-(9)-31　当社が全店舗に提供している共通コンテンツを隠す行為

に該当してしまいます。
「共通ヘッダ部分」の定義は、下記URLをご参照ください。

[重要]禁止行為(共通コンテンツを隠す行為)に関する補足説明
https://www.rakuten.co.jp/shops/supportnews/info_b/20170518-03.html

禁止行為に該当しないように固定バナーを表示するには、
固定バナーが「共通ヘッダ部分」よりも下に表示されるように
ご設定いただければ結構です。

具体的な方法として、
CSSに以下の規則を加えていただきますようお願いします。

===== この下の行から ============
.sample {
z-index: 2;
}
#rstTopSearch, #ipnsh-header, #topFuncShopPopup {
position: relative;
z-index: 3;
background-color: white;
}
===== この上の行まで ============

CSSの適用方法がわからない、
コンテンツの書き方がわからない、など、
不明な点がございましたらご返信いただきますようお願いします。

Answer

内容確認させて頂きました。
かなり複雑でむずかしそうですね。
一度設定してみますので分からなかった場合はまた質問させて頂きます。
有り難うございました。