楽天のスマホ商品ページで項目選択肢に画像表示する方法

Question

相談者：クルーク 2017/10/17 11:35

上記の方のお店のように、弊社でもスマホの項目選択肢のお選びくださいのところに
画像を表示したいのですが、ご教示いただけますでしょうか。

楽天での項目選択肢の画像の表示は、PC上の機能はなくなってしまったのでしょうか。

Answer

ECマスターズの伊藤です。

> 上記の方のお店のように、弊社でもスマホの項目選択肢のお選びくださいのところに
> 画像を表示したいのですが、ご教示いただけますでしょうか。

下記に、コード、修正方法を
ご案内しておりますので
修正していただき

店舗設定 ＞ 商品登録・更新 ＞ 各商品
・スマートフォン用商品説明文

にご登録を、お願いいたします。


> 楽天での項目選択肢の画像の表示は、PC上の機能はなくなってしまったのでしょうか。

はい、こちらの機能は、現在停止中となっております。


= この下の行から ====================

/* 縦軸１つ目・横軸１つ目 */
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(1):before {
background-image: url(画像URL);
}

/* 縦軸１つ目・横軸２つ目 */
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(2):before {
background-image: url(画像URL);
}

/* 縦軸２つ目・横軸１つ目 */
.itemSelectPopUp dl:nth-of-type(2) dd:nth-of-type(1):before {
background-image: url(画像URL);
}

/* 縦軸３つ目・横軸１つ目 */
.itemSelectPopUp dl:nth-of-type(3) dd:nth-of-type(1):before {
background-image: url(画像URL);
}

/* 
以下略。項目を増やす際は、複製の上、
縦軸は dl:nth-of-type(*) 
横軸は nth-of-type(*)
の数字と画像URLを修正してください。 
*/

.itemSelectPopUp dd {
height: 80px;
}

.itemSelectPopUp dd:before {
display: inline-block;
position: absolute;
content: "";
left: 0;
width: 80px;
height: 80px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.itemSelectPopUp label {
padding: 0 34px 0 0px;
}

.itemSelectPopUp dd {
min-height: 80px;
height: 80px;
text-indent: 80px;
}

body .itemSelectPopUp .itemSelectRadio {
top: 32px;
}

body .itemSelectPopUp dl .inStockMailLink {
top: 16px;
}