スマホ商品ページ共通パーツ設定並び替えの方法？　

Question

毎々、お世話になっております。
他店舗をスマートフォンで調査をしていくなか、ぜひ、真似をしたい事例があり
ご指導をお願いしたいのです。

楽天のマニュアルを見ても、スマホの商品ページ　共通パーツの並べ替えは出来ない仕様になっており
添付のようにする方法があれば教えて頂きたいのです。

通常、スマートフォンページでは、楽天市場共通のバナーの後に、店名があり、その後に画像がスクロールされます。

しかしながら、添付のhttps://item.rakuten.co.jp/macocca/mcstl001/さんでは、
本日ですと、BLACK FRIDAYのクーポンの2画像、macoccaさんの店名、店名、TOPページのバナー
画像のスクロールと続きます。

実際にクリックした商品以外の売れ筋商品などを探す際にも、見やすくわかりやすく、
自分でできる範囲であれば真似したいと思っております。
よろしくお願い致します。
　###HR######IMG001d3109551a99a568e6d63a2a65e4e20.jpegIMG0###

Accepted Answer

ECマスターズの田中です。

https://club.ec-masters.net/index.php?design_page4
上記デザインレシピをご覧いただいた、ということですね。
はい、スライドバナー用に限らず、
商品画像の上に設置したい内容のHTMLファイルを
ご設置いただくことができます。

同ページにて紹介されておりますとおり、
タグ名の後ろに「 =""」を追記することで、
スマートフォン用項目で本来使用が禁止されているタグを
ご記載いただくことができるようになります。

なお、タグをタグにご変更いただくことで、
ページ上部に移動させたい内容を
タグの中で直接ご記載いただくことができます。

内容の中でも、禁止タグに対して先述の「 =""」の追記が必要ですが、
iframeタグ設置後の高さ調整も不要となりますので、
こちらの方法をおすすめいたします。

> 20画像のすぐ下に、クーポンが貼り付けられています。
> こんな事もできるのでしょうか？？？

レシピにてご紹介しているJavaScriptの中で
before を after にご変更いただくことで、
商品画像の下に貼り付けることができます。

before と after を同時にご利用される場合は、
同じパーツを移動させてしまうことのないよう
ご注意ください。

たとえば、
$('#itemImageSlider').before($('.iframeBefore'));
$('#itemImageSlider').after($('.iframeBefore'));
と記載されますと、
商品画像上に移動した要素が即座に商品画像下に移動し、
結局商品画像下にしか表示されません。

Answer

ECマスターズの田中です。

他店舗のスマートフォン用ページの事例につきまして、
内容をまとめて改めてご案内いたしますので
今しばらくお待ちいただきますようお願いします。

Answer

田中様、ありがとうございます。
先程、弊社のサイトで実行できていない事はないかと、デザインレシピを確認していたところ
＜スマホページのファーストビューにバナーを設置する方法＞を実行すれば、バナー等は
貼れるのだなぁと確認致しました。
TOPページのバナーは、どのように？するのかは、わかりませんが。。。

また、こちらのお店でも同じような形態をとっていると思われる上に、
https://item.rakuten.co.jp/e-zakkamania/32136-1600515/

20画像のすぐ下に、クーポンが貼り付けられています。
こんな事もできるのでしょうか？？？

あわせて、お教え頂けると大変有難いです。
よろしくお願い致します。###HR######IMG004b14ce03139d8a268256e4dbf7ffa4c.jpegIMG0######BR###

スマホ 商品ページ 共通パーツ設定 並び替えの方法？

スマホ商品ページ共通パーツ設定並び替えの方法？　