スマホサイトでの買い物かご

Question

スマホでの買い物かご付近について
通常は画像１の様になっております所を

画像２の様に買い物かごボタンのの下に画像を付ける方法がありますでしょうか？

Answer

ECマスターズの田中です。

楽天のバグを利用し、スタイルシートを適用して実現させているため、
今後のRMSの修正により利用できなくなります。

過去にお送りしたメールマガジンにて、
楽天のバグについてご説明しておりますので、
下記URLの返信欄をご一読いただけますでしょうか。
https://ec-masters.club/forum/post_view.php?id=846

具体的な方法につきましては、
実際の商品ページを分析する必要がありますので、
画像２のショップのURLをお知らせください。

Answer

ご返答ありがとうございます。

バグの件は了解いたしました。

画像２は私が画像編集で製作しているものですので
実現されてあるものではございません。

このような事が可能な場合に方法を知りたいと思いのご相談です。
よろしくお願いいたします。

Answer

もしくは、かごボタンの画像を変更する方法でも
近い再現ができますので

そちらも方法がございましたら
よろしくお願いいたします。

Answer

ECマスターズの田中です。

それでは、以下の方法で、
買い物かごの下に画像を追加していただけますでしょうか。

１．下記内容で、CSSファイルを作成

======= この下の行から =============
div.cartDiv:after {
  content: " ";
  text-indent: -100%;
  display: block;
  overflow: hidden;
  width: 【画像の横幅】px;
  height: 【画像の縦幅】px;
  background: url(【画像URL】) no-repeat left top;
  margin: 0px 0px 0px 0px; /* 左より、画像の上・右・下・左側の間隔をご指定ください */
}
======= この上の行まで =============　
※【画像の横幅】、【画像の縦幅】、【画像URL】は実際の内容にご変更ください。

２．作成したCSSファイルをGOLDにアップロード

３．楽天RMSにて、スマートフォン用共通説明文に以下のタグを挿入

======= この下の行から =============

======= この上の行まで =============　
※【CSSファイルのURL】は、実際の内容にご変更ください。
※１行目最後の空白も必要ですので、削除しないでください。

Answer

ありがとうございます。表示できました。