• 楽天
  • Yahoo!

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

0819_main

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

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

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

デモ

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

0819_4

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

0819_5

使用するCSS

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

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

0819_2
<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

0819_1
<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

0819_5

※こちらは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を貼り付けると、同ページの他商品にも画像が適用されてしまいます。

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

0819_main5

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

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

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

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

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメント

2 件のコメント

  • 長山泰治 より:

    長山といいます。
    もしかしたら、同内容のコメントが何通か行ってるかもしれません。

    当店扱い商材で40品程の中から選んで頂く商品があるのですが、
    ※マグネットアクセサリーで40程から選んで頂く商品になります。

    この数だとフルバージョンの方法でないと無理でしょうか。今日会員登録しました。

    cssだと縦に40品目までは可能になりますでしょうか

    コメントで
    それと、カテゴリページを利用して、1ページに複数「買い物かごに入れる」ボタンを出している商品も注意です。
    とありますが、複数「買い物カゴに入れる」の表示は可能なんでしょうか

    A商材とB商材とを合わせて購入してほしい場合、A商品ページにB商品へのクリックしてもらい
    買い物カゴに入れてもらう方法しかないと思ってましたので。。

    楽天サポートにも聞きましたが、その方法しかないんです。と言われて探してみましたが
    わからなかったので。

    長々と書きましたが、ご連絡頂けますとありがたいです

    • 中村 茉実 中村 茉実 より:

      長山様
      いつもお世話になります、オーガランドの中村です。
      ご質問頂きありがとうございます!

      > 当店扱い商材で40品程の中から選んで頂く商品があるのですが、

      まずこちらなのですが…
      「項目選択肢別在庫設定」自体が、最大20個までのご登録となります。
      (40個選択肢がある場合は、商品データを分ける必要があるかと存じます。)

      フルバージョン限定の方法以外の方法でも、
      20個までであれば画像を表示させる事は可能にございます。
       

      > 複数「買い物カゴに入れる」の表示は可能なんでしょうか

      RMS内のカテゴリページ設定にて可能なはずです!
      「1ページ複数商品形式ページ」という設定だったかと存じます。
      楽天さんへご確認くださいませ^^

       
      どうぞ宜しくお願い致します。

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。