特定の商品の買い物かご付近バナー設置方法

Question

添付のように
買い物かご付近への画像の設置方法を教えてください。
全商品共通ではなく、特定の商品のみ希望です。

目的としては
食数違いの関連商品のページの画像・リンクを貼り、誘導したいです。
PCとスマホに使用したいです。

よろしくお願いいたします。###HR######IMG0575fcdacf9053ac2c63cccef51bcec5d.jpegIMG0###

Answer

ECマスターズの田中です。


（7/16 18:04　注意追記：下記のPC向け方法では、リンクを張ることができません。あくまでも画像の見た目のみを追加する方法になります。）
PC用商品説明文もしくはPC用販売説明文の中に
下記のHTMLソースをご記入いただくことで、
個数欄、および買い物かごボタンの上に画像をご設置いただくことができます。

===== この下の行から ================

span.unit:before {
  background: transparent url(画像ファイルのURL) 0 0 no-repeat;
  width: 画像の横幅px;
  height:画像の高さpx;
  background-size: contain;
  content: "\00a0";
  display: block;
  margin: 15px 0;
}

===== この上の行まで ================
※画像ファイルのURL、画像の横幅、画像の高さは、実際のURLおよび半角数字に置き換えてご利用ください。


スマートフォン用商品ページの場合は、
スマートフォン用商品説明文の中に
下記のHTMLソースをご記入ください。
（7/16 18:04　ソース修正）
===== この下の行から ================

jQuery(function($){$('.item-unit-quantity h3').wrap('').css({color:"black"});});


.item-unit-quantity h3:before {
  background: transparent url(画像ファイルのURL) 0 0 no-repeat;
  width: 画像の横幅px;
  height:画像の高さpx;
  background-size: contain;
  content: "\00a0";
  display: block;
  margin: 15px 0;
}
body .item-unit-quantity {
  height: 画像用スペースの高さpx;
}

===== この上の行まで ================
※リンク先URL、画像ファイルのURL、画像の横幅、画像の高さは、実際のURLおよび半角数字に置き換えてご利用ください。
※画像用スペースの高さは、画像の高さに100を足した半角数字に置き換えてご利用ください。
※RMSのバグを利用した方法のため、RMSの改善により、今後ご利用いただけなくなる可能性がございます。


なお、スマートフォンアプリは、
通常のホームページと仕組みが異なるため、
画像の設置はできませんことをお含みおき願います。

Answer

早速のご返信ありがとうございます。

画像ファイルのURLとは楽天であれば
https://image.rakuten.co.jp/　から始まるもので
間違いないでしょうか。

また、リンク先のURLはどこに入力すればいいでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

> 画像ファイルのURLとは楽天であれば
> https://image.rakuten.co.jp/　から始まるもので
> 間違いないでしょうか。

はい、そのURLで結構です。

> また、リンク先のURLはどこに入力すればいいでしょうか。

大変申し訳ありません、
最初の文章と添付画像のみで判断し、
単純に画像を設置されるものと早とちりしており、
誤ったご案内を差し上げてしまいました。

こちらの方法で挿入できる画像は、
あくまでも見た目だけであり、
リンクをご設定いただくことはできません。

PC用ページの場合、
https://forum.ec-masters.net/post_view.php?id=10410
上記質問へ回答した方法を応用して
ご設置いただくことは可能ですが、
注意書きしております通り、
環境によって左右されやすいので、ご利用はオススメできません。

スマートフォン用ページの場合は、
JavaScriptによる指示を追加することで、
リンクを張ることができます。
先の回答のタグを修正しましたので、
お手数ですが、再度ご確認をお願いいたします。

Answer

こちらも説明不足ですみません。

上記情報で試してみようと思います！

特定の商品 の 買い物かご付近 バナー設置方法

特定の商品の買い物かご付近バナー設置方法