楽天の項目選択肢別在庫に画像を入れる方法

Question

お世話になっております。

楽天の項目選択肢別在庫の部分に、画像を入れたいのですが、
キャビネットの画像のURLを入れても表示されません。
表示させる方法を教えて下さい。

表示したいのは下記のページです。
https://item.rakuten.co.jp/fitone/opi-office/

どうぞよろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

> スマホがよくわかりません。
> どの部分を、どう書き換えて、どこに張り付けたらいいか教えてください。

下記styleタグにて、
必要な項目数だけ追記・画像URLを修正の上、
スマートフォン用商品説明文に貼り付けていただきますよう
お願いします。

= この下の行から ====================

/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dd:before {
    background-image: url(画像URL);
}

/* 2項目目 */
.itemSelectPopUp dl:nth-of-type(2) dd:before {
    background-image: url(画像URL);
}

/* 以降、必要な項目数だけ繰り返し */

.itemSelectPopUp dd:before {
    display: inline-block;
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    background-size: 80px;
    background-repeat: no-repeat;
}
.itemSelectPopUp dl .icon {
	position: relative;
	left: 85px;
}
.itemSelectPopUp dl .name {
	padding-left: 85px
}
.itemSelectPopUp dl .caption {
	padding-left: 85px
}
.itemSelectPopUp label {
	padding: 0 34px 0 0px;
}
.itemSelectPopUp dt {
	background-color: #5c4b43 !important;
}
.itemSelectPopUp dd {
	min-height: 80px;
	height: 81px;
}
.itemSelectPopUp .itemSelectRadio{
	top:40%;
}
.itemSelectPopUp .itemSelectRadio + .selected {
	top: 44%;
}

= この上の行まで ====================

文字数制限を受ける場合は、
先の返信のように、GOLDに設置した
外部CSSファイルをご利用いただく必要がございます。

なお、スマホアプリの場合は
ブラウザの仕組みと異なるため、
どうしても表示することができませんことを
予めお含みおき願います。

また、楽天RMSのバグを利用した方法となりますので
仕様変更の際に、表示されなくなるなどの
影響が考えられます。

先日公開された下記の案内を
予めご留意いただきますよう、お願いいたします。

【R-Storefront】スマートフォンページリニューアルと注意点のご案内
HTMLタグの利用制限について
https://mainmenu.rms.rakuten.co.jp/?act=supportnews&news_id=7004

Answer

ECマスターズの田中です。

各項目選択肢別在庫に設定できる画像URLは、
現在はどこにも表示されません。
経緯につきましては、下記マニュアルをご参照ください。
https://navi-manual.faq.rakuten.net/item/000015923

商品ページに画像を表示させる場合は、
別途、スタイルシートをご設定いただく必要がございます。
具体的な方法は、下記記事、１つ目の返信にてご紹介しております。
https://forum.ec-masters.net/post_view.php?id=8507

画像の追加方法がわからない、
そもそもどうすればいいのかわからない、など、
不明な点がございましたらご返信願います。

Answer

田中さんありがとうございます。

PCは表示させることができましたが、
スマホがよくわかりません。
どの部分を、どう書き換えて、どこに張り付けたらいいか教えてください。

ちなみにスマホはPC用販売説明文に下記を張り付けています。

Answer

田中様

ありがとうございます！
おかげ様で、やっとできました。