[楽天RMS]商品ページの項目選択肢に画像表示させる方法【コピペOK】

楽天市場内にある商品には「20色から選べます！」などの豊富なカラーがある商品やデザイン、サイズなどなど複数から選んで購入できる商品はたくさんあると思います。

しかし、実際に購入するときに（スマホで）カラーなどが複数あると「あれ？このカラーどんな感じだったけ？」って思うときないですか？

下記画像のようにカラー名がややこしい商品はとくに！！

このカラー名だけを見たときに、グレーだらけでパッとイメージしにくいですよね。
そんな時にとっても親切でわかりやすく表示している店舗さんを発見したのでご紹介します！

参考サイト

項目選択肢が20近くあり、さらにカラー名もややこしい・・・
それをしっかり改善されて、とても選びやすくなっています。
PCでも対応はされていますが、スマホで見るとよりユーザビリティの高い使いやすい感じになっています。

サンプルコード

参考サイトを元にしたCSSのサンプルになります。

CSS

.itemSelectPopUp dl:nth-child(4) dd:nth-child(2):before {
background-image: url("画像URL");
}

.itemSelectPopUp dl:nth-child(5) dd:nth-child(2):before {
background-image: url("画像URL");
}

.itemSelectPopUp dl:nth-child(6) dd:nth-child(2):before {
background-image: url("画像URL");
}

.itemSelectPopUp dl:nth-child(7) dd:nth-child(2):before {
background-image: url("画像URL");
}

.itemSelectPopUp dl:nth-child(8) dd:nth-child(2):before {
background-image: url("画像URL");
}

.itemSelectPopUp dd:before {
display: inline-block;
position: absolute;
content: "";
width: 80px;
height: 80px;
background-size: 70px;
background-repeat: no-repeat;
background-position: center;
}

.itemSelectPopUp dl .icon {
position: relative;
left: 80px;
}
.itemSelectPopUp dl .name {
padding-left: 80px
}
.itemSelectPopUp dl .caption {
padding-left: 80px
}
.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%;
}

HTML（バグ）

<style type="text/css" =""="">※※※上記のCSSを記述する※※※</style>

 
あとはスマートフォン用商品説明文に、styleでくくって記述すればOKです！
※「デザイン設定メニュー（スマートフォン） > スマートフォン用商品ページ」 にバグコードでCSSを読み込ませると全商品に反映がかかってしますので注意です！！
 

[楽天RMS]スマホデザインをカスタマイズ！CSSとiframeが使える裏技

最後に

いかがでしたか？せっかくページを見てもらい購買意欲を高めてもらっても、最後の最後で煩わしいと思われ離脱されてはもったいないですよね。項目選択肢が複数ある商品を販売されてるショップさんはぜひ試してみてください！離脱率が減り、CV率がアップするかもしれません！