スマホ商品ページで独自お気に入りリストを出す方法について

Question

お世話になります。
スマホ商品ページ施策についての質問です。
回遊率を上げたいので商品ページに神戸レタスさまと同じように
お勧めアイテムを表示させたいと考えております。
添付ファイルのようなイメージで作成したいのですが、
どのように行えば良いでしょうか？
ソースコード等ご教示いただけたらと思いますので宜しくお願いいたします。###IMG024267340ecc7a05755eb88c596395f31.jpegIMG0###

Answer

ECマスターズの塚本です。

いただいた以下件名のご質問ですが、

　スマホ商品ページで独自お気に入りリストを出す方法について

技術系の質問を担当しております担当者が
本日休みを取っておりますので明日の回答となる予定です。

お急ぎのところご迷惑おかけしますが、
今しばらくお待ちいただければと思います。

Answer

ECマスターズの田中です。

Yahoo!ショッピングのスマートフォン用ページでは
https://store-info.yahoo.co.jp/s/shopping/toolmanual/first/c/008.html#2
上記マニュアルの通り、
iframe・style・link・scriptといったタグが
利用可能タグの中に含まれておりませんので、
HTMLでそのままご記載いただく形になります。

tableタグで表組みにする方法が一番単純ですが、
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
上記Flexboxを活用することで、
表の構造を意識せず、後で入れ替えやすいような構造で作ることも可能です。

= この下の行から ====================


  
    １商品目用のHTML
  

  
    ２商品目用のHTML
  

  （以降、 と  を繰り返す）


= この上の行まで ====================

このような事情のため、外部ツールを利用して設置しているとは思えないのですが、
念の為確認させていただければと思いますので、
もし可能であれば、いただいたスクリーンショットを確認できるURLを
お知らせいただきますようお願いします。

Answer

お世話になっております。
ご返答ありがとうございました！
参考URLを確認して作ってみます。

https://item.rakuten.co.jp/mobacaba/n555/

アイデアやご意見等ございましたら、
引き続き宜しくお願いいたします。

Answer

ECマスターズの田中です。

申し訳ありません、
私にて、Yahoo!ショッピングのお話かと勘違いして
ご返信差し上げてしまいました。

楽天のスマートフォン用ページでしたら
方法が変わってまいります。
まとめた上でご返信差し上げますので、
今しばらくお待ちいただきますようお願いします。

Answer

ECマスターズの田中です。

お待たせいたしました。
https://item.rakuten.co.jp/mobacaba/n555/
上記商品ページでは、fv2017さんのショップの
スマートフォン用商品ページ共通説明文でも使われております、
使用禁止タグを挿入する方法を利用して、スマートフォン用商品説明文の中に
https://www.rakuten.ne.jp/gold/mobacaba/sp/item/sp_item.html
上記HTMLをiframeタグで埋め込むことで、
添付していただいたファイルの見た目を実現しております。

まずは各ソースをご参照の上実装をお試しいただき、
不明な点がございましたらご返信いただきますようお願いします。