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

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

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

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

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

170418_01

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

 

参考サイト

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

母の日 早割 プレゼント カーネーション 鉢植え 母の日ギフト 花送料無料 産地直送ーネーション 5号 厳選18色新色 人気

 

サンプルコード

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

CSS


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

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

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


.itemSelectPopUp dd:before {
    display: inline-block;
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    background-size: 40px;
    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%;
}

 
あとはスマートフォン用商品説明文に,、以前ご紹介したバグでCSSを読み込めば完成です!

 

HTML(バグ)


<link rel="stylesheet" =""="" href="任意のCSS">

 

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

最後に

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