楽天商品ページ(スマホ)上のバナーの設定方法について

Question

いつもお世話になっております。

楽天のスマホ版の商品ページを開いた際に、ページを上下に動かしても常に画面の上部に表示する事ができるバナーの設定方法に関しまして教えて頂きたいです。

※印文章でどのバナーか説明しても、不明瞭だと思いますので、他店の参考画像を添付させて頂きます。

1枚目：画像上部の550円オフクーポンバナー
2枚目：画像上部の1900円オフクーポンバナー

以上２枚の参考画像のようなバナーの設定を教えて頂きたいので、よろしくお願い致します。###HR######IMG07e97edea64fcc22538fa169125dcd7cf.jpegIMG0### ###IMG14b3db22bacfc961203d03b7897416448.jpegIMG1###

Accepted Answer

ECマスターズの田中です。

> １枚目の画像のバナーをスクロールできる"スクロールバナー"はどのように設定することができますでしょうか？

楽天GOLDを利用して、
バナーがスクロールする仕組みを導入したページを作成し、
タグでページ内に埋め込んでいただく必要がございます。

提携サービスのECステーションにて、
クラブ会員の皆様に無料で提供中の

ツールボックス
https://club.ec-masters.net/index.php?ecm-ecstoolbox

に含まれる

スライドバナー
http://www.intecrece.co.jp/ec/toolbox/index.html#a04

の機能で作成していただくことができますので、
まずは一度、スライドバナーを作成の上、
設置をお試しいただきますようお願いします。

Answer

ECマスターズの伊藤です。

> 楽天のスマホ版の商品ページを開いた際に、ページを上下に動かしても常に画面の上部に表示する事ができるバナーの設定方法に関しまして教えて頂きたいです。

下記コードを、スマートフォン用商品説明文などに
ご登録いただきますと、商品画像の上にバナーが表示できるようになります。

> 1枚目：画像上部の550円オフクーポンバナー

「クーポンバナーの情報」箇所に、
表示させたいクーポンバナーをご登録ください。
＝＝＝＝ 以下を登録 ＝＝＝＝

クーポンバナーの情報



jQuery(function($){
$('#itemImageSlider').before($('.divBefore'));
});

＝＝＝＝ 以上を登録 ＝＝＝＝


> 2枚目：画像上部の1900円オフクーポンバナー

＝＝＝＝ 以下を登録 ＝＝＝＝

body .shopname-info .itemtitle,
body .shopname-info,
body #topFuncShopPopup,
body #rstTopSearch,
body #ipnsh-header{
position:relative;
z-index: 9999;
}
body #rstTopSearch,
body #ipnsh-header{
background:#fff;
}
.header_bunner{
position:fixed;
margin:auto;
top:0;
height:100px; /* バナーの高さに合わせて変更してください。 */
z-index: 9998;
}



クーポンバナーの情報

＝＝＝＝ 以上を登録 ＝＝＝＝

height:100px; の 100 は
バナーの高さに合わせて修正をお願いいたします。

Answer

ECマスターズ 伊藤様

お世話になっております。

上記の方法でヘッダーを設定したところ、無事設定をすることができたようです。
誠にありがとうございます。

お手数おかけしますが、もう1点１枚目の画像のバナーの設定方法に関して質問があります。

１枚目の画像のバナーをスクロールできる"スクロールバナー"はどのように設定することができますでしょうか？

ご回答のほど、お待ちしております。

Answer

ありがとうございます！大変助かりました。
頂いた内容を使ってみます。