【楽天】スマホ商品ページの商品画像の真下にバナー設置方法

Question

お世話になります。

FUJIと申します。

楽天スマートフォンの商品ページのレイアウトが変わり、
商品情報の上にカートが来てしまい、結構なスクロールをしないと商品情報部分を見ていただけなくなったように感じます。

クーポンやキャンペーンのバナーをタイトルのように商品フリック画像の真下に設置したいのですが、どのようにすればいいか方法を教えてください。

divのidやclass名
.jsファイルなど

バナー自体はiframeで呼び出したいと考えています。

よろしくお願いします。

参考店舗様
https://item.rakuten.co.jp/e-zakkamania/32122-1900255/

Answer

ECマスターズの伊藤です。

> クーポンやキャンペーンのバナーをタイトルのように商品フリック画像の真下に設置したいのですが、どのようにすればいいか方法を教えてください。

デザインレシピにございます
「スマホページのファーストビューにバナーを設置する方法」
https://club.ec-masters.net/index.php?design_page4
を応用していただくことで、画像下にバナー等を表示していただくことができます。

１）JavaScriptファイルを作成しアップロード
＝＝＝＝＝JS＝＝＝＝＝＝
jQuery(function($){
$('#itemImageSlider').after($('.imageAfter'));
});
＝＝＝＝＝＝＝＝＝＝＝＝

２）スマートフォン用商品ページ共通説明文に記述を加える
＝＝＝＝＝HTML＝＝＝＝＝


★ここに表示したい内容★

＝＝＝＝＝＝＝＝＝＝＝＝

なお、楽天RSMのバグを利用した方法となるため
仕様変更となった際に、ご利用いただけなくなる可能性がございますので
ご了承の上、ご利用くださいますよう、お願いいたします。

Answer

伊藤様

ご回答ありがとうございます。

やはりAfterにするだけでよかったんですね。
試してみます。

ありがとうございました。

Answer

ECマスターズの伊藤です。

> やはりAfterにするだけでよかったんですね。
> 試してみます。

設置されてうまくいかないなどあれば、返信よりご連絡くださいませ。