スマホ項目選択肢別在庫に画像を入れる方法

Question

いつも手厚いサポートをありがとうございます。

以前このフォーラムで教えていただいた方法で、
スマホ項目選択肢別在庫に画像を設置したのですが
今回はうまく設置ができません。
横軸に画像を入れたいのですが、
前回教えていただいたのが縦軸専用タグだったためだと思われます。

ちなみに、入力した商品は以下のものです。PCの項目選択肢別在庫には
うまく画像が設置できました。
https://item.rakuten.co.jp/dreamsupply/dc_cbk01/

PCに入れたタグは以下のとおりです。スマホ用タグを教えてください。


/* 選択肢名前に画像出す - 横軸専用
---------------------------------- */
.floating-cart-sku-table tr:first-child td.inventory_choice_name span:before {
content: "";
display: block;
width: 100px; /*画像の幅*/
height: 120px; /*画像の高さ*/
background-size: 100px; /*画像の幅*/
margin-bottom: 4px;
}
/* 1項目目 */
.floating-cart-sku-table tr:first-child td.inventory_choice_name:nth-child(2) span:before {
background-image:url("https://image.rakuten.co.jp/dreamsupply/cabinet/design/giftitems/giftset/imgrc0075632760.jpg");
}
/* 2項目目 */
.floating-cart-sku-table tr:first-child td.inventory_choice_name:nth-child(3) span:before {
background-image:url("https://image.rakuten.co.jp/dreamsupply/cabinet/design/giftitems/giftset/imgrc0075632761.jpg");
}

Answer

ECマスターズの田中です。

スマートフォン用商品ページにて、
横軸項目選択肢に画像を掲載される場合は、
下記タグをご利用ください。

= この下の行から ====================

/* 縦軸１つ目・横軸１つ目 */
.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);
}

/* 以下略。項目を増やす際は、複製の上、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;
}

Answer

田中様

教えていただきありがとうございました。
うまく貼り付けできました！