【楽天/RMSにコピペで完了！】カラーやサイズの「選択肢」に一緒に画像を表示させるTips

こんにちは。お願いだから海産料理屋に水槽を置くのをやめて欲しいオガリア中村です。せめて、アレですよ、席から魚と目が合わない位置に置いて欲しいです。

楽天ショップに限らずなんですが。商品画像を見て欲しいカラーがあっても、いざお買い物かごに入れるときに「どのカラーを選べばいいのか」分からず、商品画像を見返さないといけない事ありませんか？3色程度ならいいけど、これが5色以上になるとちょっとややこしかったり。

そこで！カラーの選択肢を作る楽天市場の機能「項目選択肢別在庫」に、商品画像を一緒に載せられちゃうTipsをご紹介しますー！

デモ

「項目選択肢別在庫設定」を登録した場合、初期デザインではこのような状態になります。これだと、どの選択肢がどの商品に該当するのかここでは確認とれませんよね・・・・。

　
そこでこんな感じに選択肢と一緒に画像を出します。欲しい商品がどの選択肢なのか一目で分かるゥ！くぅ！分かり易いィ！

使用するCSS

画像を出したい場所に応じて、次のCSSを使っていきますよー！具体的な書き換え箇所は後述の「手順」をご確認をッ！

よこ軸の選択肢に画像を入れるCSS

<style type="text/css">
<!--
/* 選択肢名前に画像出す - 横軸専用
---------------------------------- */
#rakutenLimitedId_aroundCart tr tr tr:first-child .inventory_choice_name span:before {
	content: "";
	display: block;
	width: 100px; /*画像の幅*/
	height: 100px; /*画像の高さ*/
	background-size: 100px; /*画像の幅*/
	margin-bottom: 4px;
}

/* 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");
}
-->
</style>

たて軸の選択肢に画像を入れるCSS

<style type="text/css">
<!--
/* 選択肢名前に画像出す - 縦軸専用
---------------------------------- */
#rakutenLimitedId_aroundCart tr tr tr:not(:first-child) .inventory_choice_name span:before {
	content: "";
	display: block;
	width: 100px; /*画像の幅*/
	height: 100px; /*画像の高さ*/
	background-size: 100px; /*画像の幅*/
	margin-bottom: 4px;
}
/* 1項目目 */
#rakutenLimitedId_aroundCart tr tr tr:nth-child(2) .inventory_choice_name span:before {
  background-image:url("画像URL");
}

/* 2項目目 */
#rakutenLimitedId_aroundCart tr tr tr:nth-child(3) .inventory_choice_name span:before {
  background-image:url("画像URL");
}

/* 3項目目 */
#rakutenLimitedId_aroundCart tr tr tr:nth-child(4) .inventory_choice_name span:before {
  background-image:url("画像URL");
}
-->
</style>

ラジオボタンと一緒に画像を入れるCSS

※こちらはogaRiaフルバージョンプランご契約者様限定の公開となります。
CSSを見る(ogaRiaフルバージョンご利用者様限定)

手順

1. 手元に画像を用意する

まずは表内に表示する画像を用意します。

　・サイズはいくつでもOK!(後ほどCSS側で一括調整できます)
　・できれば、カラーや模様が分かり易いアップ画像がおすすめ
　・正方形がおすすめ

用意した画像は、R-Cabinetか楽天GOLDにアップロードしておきます。

2. CSSを用意する

先ほどのCSSをコピーして、メモ帳などに貼り付けましょう。次の箇所を書き換えます。

• 画像URL
  先ほど登録した画像のURLに書き換えます。
• 画像のサイズ
  表示させたい画像のサイズに書き換えます。画像の元サイズから自動で縮小表示されます。

3. CSSを「PC用商品説明文」に貼り付ける

作成したCSSを、画像を表示させたい商品の「PC用商品説明文」に貼り付けます(※PC用販売説明文を使っても構いません)。これで完成ー！

各商品1つ1つによって、CSSを作りなおして貼り替える必要があるので注意です！「ヘッダー」とかに貼ってしまうと、全商品の項目選択肢に同じ画像が出ちゃいます。。

それと、カテゴリページを利用して、1ページに複数「買い物かごに入れる」ボタンを出している商品も注意です。1部商品の「PC用商品説明文」にCSSを貼り付けると、同ページの他商品にも画像が適用されてしまいます。

画像はあった方が良いの？

「ここまで労力かけてまで画像を出すメリットはあるの？」というところ。私としては、「商品によってはメリットがある」と思っています。画像を出すのは「お客様が商品を選択しやすくして、お買い物の負担や誤りを減らすこと」が目的です。そのため、

• カラーバリエーション、模様などの選択肢が多い商品
• オレンジと赤、など判別が難しいカラーがある商品

など、欲しい商品の選択がややこしいものについては充分メリットがあると思います。

私はよく「ネイル」をネットで買いますが、欲しいカラーは何番の色を選べばいいのかややこしくて、、間違えずに買うのに結構気を遣います。。選択肢と一緒に画像が表示されてると、心地よく買い物できることは間違いないですね。