項目選択肢別在庫の画像登録について

Question

当店でも項目選択肢別在庫に画像を入れてみたのですが
スマホでは表示されたものの、PCでは何も変化がありません。

下記店舗さんのようにPCで見た際の在庫表に画像は入らないのでしょうか？
https://item.rakuten.co.jp/rareleak/gl-ms-124/

またもしここへ画像を登録するCSSがあれば教えてほしいです。

Answer

ECマスターズの北原です。

>当店でも項目選択肢別在庫に画像を入れてみたのですが
>スマホでは表示されたものの、PCでは何も変化がありません。
>PCで見た際の在庫表に画像は入らないのでしょうか？

CSSを利用してPCで項目選択肢別在庫の画像を表示することができます。

しかし、2023年3月28日にPC商品ページのUIデザインが変更され、
それに伴いCSS等を利用したページのカスタマイズが
終了する予定ですので、今回のようなカスタマイズは
無効となってしまいます。

ご利用の際はあらかじめご了承いただければと思います。

【SKUプロジェクト】PC商品ページ・PCカテゴリページ再リリースのお知らせ
https://info.rms.rakuten.co.jp/rms/message/926ce74b-dfbf-4217-9479-7f169cc17e09

項目選択肢別在庫を画像表示させるCSSは下記となります。
background-imageに表示させる画像URLを入れ、
PC用商品説明文に記述することで、
画像を表示させることができます。


 
/* 横軸に名前を出すCSS
---------------------------------- */
#rakutenLimitedId_aroundCart tr tr tr:first-child .inventory_choice_name span:before {
	content: "";
	display: block;
	width: 120px; /*画像の幅*/
	height: 80px; /*画像の高さ*/
	background-size: 120px; /*画像の幅*/
	margin:4px 0; /*任意で変更してください*/
}
 
/* 1つ目 */
#rakutenLimitedId_aroundCart .inventory_choice_name:nth-child(1) span:before {
  background-image:url("ここに表示させたい画像のURL");
}
 
/* 2つ目 */
#rakutenLimitedId_aroundCart .inventory_choice_name:nth-child(2) span:before {
  background-image:url("ここに表示させたい画像のURL");
}
 
/* 3つ目 */
#rakutenLimitedId_aroundCart .inventory_choice_name:nth-child(3) span:before {
  background-image:url("ここに表示させたい画像のURL");
}
 
/* 4つ目 */
 #rakutenLimitedId_aroundCart .inventory_choice_name:nth-child(4) span:before { 
background-image:url("ここに表示させたい画像のURL"); }
 
/* 5つ目 */
 #rakutenLimitedId_aroundCart .inventory_choice_name:nth-child(5) span:before { 
background-image:url("ここに表示させたい画像のURL"); }

Answer

北原様

せっかく教えていただいたのですが、タイミングが悪すぎましたね(TT)
あと1日しか使えないのであれば設定する意味がないので、今回は諦めます。

ありがとうございました。