楽天スマートフォンの商品ページの商品画像の上にバナーを設置する方法

Question

いつもお世話になります。

楽天市場のスマートフォンの商品ページ上部に商品画像をフリックできる部分がありますが、そのすぐ上にバナー(クーポンへの告知および誘導)設置する方法を教えていただきたいです。

イメージを添付致します。

よろしくお願い致します。###HR######IMG0ea30f8fe8f604346578a76202cdb72a6.pngIMG0###

Answer

ECマスターズの田中です。

クラブ会員サイトの「デザインレシピ」にて、

スマホページのファーストビューにバナーを設置する方法
https://club.ec-masters.net/index.php?design_page4

としてご紹介差し上げておりますので、
ご参照いただきますようお願いします。

なお、商品ページ用共通説明文の文字数制限を圧迫しないようでしたら、
iframeタグをdivタグに書き換えて、直接設置用のタグをご記載いただくことも可能です。

= この下の行から ====================


バナー設置用HTMLタグ

= この上の行まで ====================

Answer

ご連絡有り難うございます。

商品ページ用共通説明文に追加してみたいと思います。

バナー１枚を張りたいのですが、「外部JSファイルのURL」とは何でしょうか？

また、「バナー設置用HTMLタグ」ですが、
スケッチページでバナーの画像とリンク先を入れたHTMLタグを作るという認識で間違いないでしょうか？

Answer

ECマスターズの田中です。

> 「外部JSファイルのURL」とは何でしょうか？

https://club.ec-masters.net/index.php?design_page4
にてご紹介差し上げている通り、

= この下の行から ====================
jQuery(function($){
$('#itemImageSlider').before($('.iframeBefore'));
});
= この上の行まで ====================

上記内容をメモ帳に貼り付けて
ファイル名の末尾を「.js」にして、
外部JSファイルとして保存し、
楽天GOLDにアップロードしていただき、
アップロードしたファイルのURLをご記載ください。

> 「バナー設置用HTMLタグ」ですが、
> スケッチページでバナーの画像とリンク先を入れたHTMLタグを作るという認識で間違いないでしょうか？

はい、SketchPageで作成していただいて結構です。

楽天 スマートフォンの商品ページの商品画像の上にバナーを設置する方法

楽天スマートフォンの商品ページの商品画像の上にバナーを設置する方法