【楽天市場】スマホ商品画像の上にバナーを設置する方法

お知らせ, 小技タグ

【楽天市場】スマホ商品画像の上にバナーを設置する方法

こんにちは!
本日は楽天市場のスマホ時に、
楽々通販2のバナー管理を
商品画像の上に表示する方法をお伝えします!

商品画像の上とは?

楽天市場では、ヘッダーを隠す行為が
禁止となっております。
ですので、ショップ名のすぐ下~
商品画像までの空間にバナーを設置することで、
各商品ページから他の商品への誘導をしやすくし、
買い回りしてもらいやすい
一工夫が凝らせます!(画像は熊手はちみつ様からお借りしています)

 

設置方法を解説!

あらかじめ準備するもの

・楽々通販2で貼り付けたいバナー管理パーツのURL(プレビューをクリックした際のURLです)
・RMSでのスマホ用共通説明文の余白

貼付け用タグ

準備物があらかじめ用意出来ましたら、
以下のタグをRMSのスマホ―トフォン用
「商品説明文」に以下の内容を
コピぺしてください。

 

html

<style =”” >
#itemheader {
display:block!important;
position: absolute!important;
top: 185px!important;
left: 0!important;width: 100%;
z-index: 1;background: #FFF;
}

#itemImageSlider{
margin-top: 180px;
}
</style =”” >

<iframe =””
src=”https://www.rakuten.ne.jp/gold/ストアアカウント/rakuraku/shopbanner○○○/”  id=”itemheader” style=”width:100%;” height=”150″ frameborder=”0″ scrolling=”no”>
</iframe =””>

 

赤文字のタグは、
top: 185px!important;
が上からのバナーを下げる位置の調整を行っています。

margin-top: 180px;
は、商品画像と店舗名との隙間の設定をしています。

ストアアカウント/rakuraku/shopbanner○○○/
は作成された楽々通販2のバナー管理のURL末尾を
入力いただきますようお願いいたします。

仕組みとしては、上と商品画像の間に作った余白に
楽々通販2のバナー管理を差し込んでいる仕組みです。

スマホでのユーザーが
増加する昨今では、
特集ページへの誘導もやりやすくなるかと思います。

一度お試しください!

関連記事一覧