レビューページへの誘導バナーの設置について

Question

ECマスターズチャレンジでは大変お世話になりました。

お客様の悩み別にレビューページへ誘導したいと思いましたが方法がわかりません。
イメージは下記のページです。
https://item.rakuten.co.jp/mrock/ke-non/

PCで見ると上の方にバナーが常に表示されています。
テーマ別レビュー（気になる項目タッチ）

スマホで見ると商品画像上に同じようなバナー？があります。

当店でも悩み別にレビューページへ誘導し、転換率アップに繋がらないか？と考えました。
悩みは6つ〜7つに絞っています。

実際にページに載せるまでの方法をお教えください。
よろしくお願いします。

Answer

ECマスターズの星です。

> 実際にページに載せるまでの方法をお教えください。

明日、担当よりご案内いたしますので
今しばらくお待ちいただけると幸いです。
何卒よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> お客様の悩み別にレビューページへ誘導したいと思いましたが方法がわかりません。
> イメージは下記のページです。
> https://item.rakuten.co.jp/mrock/ke-non/

PC、およびスマホにレビューページへの
誘導を設置いただくには
下記のコードをご利用くださいませ。
  
どのようなデザインにされたいかで
コードが変わってまいりますので、
テキストリンクの設置方法にて
記述しております。

たとえば、画像にしたい、などのご希望がございましたら
ご返信よりご希望をご連絡くださいませ。


【PC】
店舗設定 ＞ デザイン設定 ＞ 共通テンプレート設定 ＞ ヘッダー・フッター・レフトナビ
・ヘッダーコンテンツ
・レフトナビゲーション
・フッターコンテンツ

もしくは

店舗設定 ＞ 商品登録・更新 ＞ 各商品
・PC用販売説明文
・PC用商品説明文 

に以下のコードを追加

＝＝＝＝＝以下を貼り付け＝＝＝＝＝

  
  【テキスト】
  【テキスト】
  【テキスト】
  【テキスト】
  【テキスト】


  #pagetop_review{
    width: 100%;
    position: fixed;
    margin: 0 auto;
    top: 54px;
    left: 0%;
    text-align: center;
  }

＝＝＝＝＝以上を貼り付け＝＝＝＝＝


【スマホ】
上部にイベント告知君が設置されておりますので、
イベント告知君の上部、もしくは下部に
記述をお願いいたします。

＝＝＝＝＝例：イベント告知君の下部に追加＝＝＝＝＝




↓↓↓


  【テキスト】
  【テキスト】
  【テキスト】
  【テキスト】
  【テキスト】

Answer

星様・伊藤様
ご対応ありがとうございます。


たとえば、画像にしたい、などのご希望がございましたら
ご返信よりご希望をご連絡くださいませ。

https://item.rakuten.co.jp/mrock/ke-non/
このページの様な画像を作ろうと思っています。
6つのキーワードをPCは1列、スマホは2列に分けたいです。

PCのイメージ
【悩み1】【悩み2】【悩み3】【悩み4】【悩み5】【悩み6】
（これがページを下げていっても常についてくる）

スマホのイメージ↓
【悩み1】【悩み2】【悩み3】
【悩み4】【悩み5】【悩み6】
【　      商品第一画像            】

それぞれクリックするとそのキーワード関連の悩みについてのレビューに飛びます。

https://item.rakuten.co.jp/mrock/ke-non/
このページが画像じゃなくて全てテキストでできているとしたら
その方法（背景の色、文字のサイズや色を変える）をお教え頂けますでしょうか？

またスマホの場合、ある一部の商品にのみ表示させる方法はないでしょうか？
『載せたいページ』
https://item.rakuten.co.jp/*****/71/

よろしくお願いします。

Answer

ECマスターズの伊藤です。

> https://item.rakuten.co.jp/mrock/ke-non/
> このページが画像じゃなくて全てテキストでできているとしたら
> その方法（背景の色、文字のサイズや色を変える）をお教え頂けますでしょうか？

参考サイトは、画像（https://www.rakuten.ne.jp/gold/mrock/menu121_15.gif）で
表示頂いていますので、
画像での表示方法をご案内いたします。


> PCのイメージ
> 【悩み1】【悩み2】【悩み3】【悩み4】【悩み5】【悩み6】
> （これがページを下げていっても常についてくる）

PC版は、以下の通りのコードで表示していただけます。

＝＝＝＝＝以下を貼り付け＝＝＝＝＝










#pagetop_review{
width: 100%;
position: fixed;
margin: 0 auto;
top: 54px;
left: 0%;
text-align: center;
}

＝＝＝＝＝以上を貼り付け＝＝＝＝＝


> スマホのイメージ↓
> 【悩み1】【悩み2】【悩み3】
> 【悩み4】【悩み5】【悩み6】
> 【　 商品第一画像 】

> またスマホの場合、ある一部の商品にのみ表示させる方法はないでしょうか？
> 『載せたいページ』
> https://item.rakuten.co.jp/*****/71/

JavaScriptの読み込むタイミング次第で
イベント告知君と、レビューリンクが
上下する場合がございますが

以下を

店舗設定 ＞ 商品登録・更新 ＞ 各商品
・スマートフォン用商品説明文

にご登録いただくことで、
一部商品にのみ、表示いただけます。

＝＝＝＝＝以下を貼り付け＝＝＝＝＝










jQuery(function($){
$('#itemImageSlider').before($('.divReview'));
});

＝＝＝＝＝以上を貼り付け＝＝＝＝＝

Answer

伊藤様
ありがとうございます。

PC、スマホそれぞれの画像のサイズはどのくらいで作ればいいでしょうか？

Answer

ECマスターズの伊藤です。

> PC、スマホそれぞれの画像のサイズはどのくらいで作ればいいでしょうか？

PCは、ヘッダーのサイズが950pxとなっていますので、
横幅が950px以下で作成されるのが
よろしいかと思います。

スマホは、横幅いっぱいを
320pxを超えないサイズで
作成いただければ、ほとんどの
スマホにて、表示いただくことができます。

上記横幅を目安に

6個隙間なく並べるのであれば
950px ÷ 6個 = 158px
のように、個々のサイズを
決めていただきたいと思います。

Answer

伊藤様
ありがとうございます。
準備して設定してみます！