*

楽天商品ページのカート上の選択肢を目立たせてスルーを防ぐ

公開日: : ネットショップ

楽天の選択肢

楽天の商品ページにはカート上にお客様に選んでもらう選択肢を付ける事ができます。選択肢はプルダウンメニューで表示されます。例えば、商品をカートに入れる前にお客様に確認してほしい事とか、キャンペーンに参加するかしないか等を尋ねるのによく使われます。

しかしこの商品ページの選択肢、デフォルトでは全く目立ってなくてスルーしてしまうのも無理もない状況です(上記画像参照)。選んで欲しいのに選ばずにカートに入れてしまうお客様が多いのです。そこで、この選択肢を目立たせるカスタマイズを紹介します。

楽天の商品ページの選択肢をデザインして目立たせる

楽天の選択肢を目立つように

上記画像を御覧ください。背景に gif アニメーションを採用しています。これなら目に付くでしょう。

このような事を行う機能は楽天にはありません。その為、CSS で無理くり実装しています。それでは CSS を御覧ください。

select[name="choice"]{
	height:30px;	
}

.choice{
	display:block;
	margin:20px 0px 10px 0px;
	border-width:0px 0px 0px 3px;
	border-style:solid;
	border-color:#900;
	background-image:url("背景画像URL.gif");
	background-repeat:no-repeat;
	background-position:right center;
	width:350px;
	height:22px;
	padding:8px 0px 0px 10px;
}

各種解説

商品ページの選択肢の部分に着目すると、項目名に span タグに choice クラスが設定されています。ここを攻めます。

まず、span はインライン要素で高さを設定できないので、「display:block」でブロック要素にして高さを設定します。そして、背景に gif アニメーションを指定して、「background-position:right center」で右側に画像の位置を指定しています。

項目名の長さによっては画像と文字が被さってしまうので、画像の左右位置は width で調整してください。

Web制作の明るいオフィス

これで背景画像は設定できましたが、他のボタンとの間が詰まりすぎてやっぱり見難いんですよね。そこで、padding で適宜調整してください。

プルダウンメニューの高さも自由に設定できる

一番上の画像を見てもらえればわかりますが、デフォルトではプルダウンメニューの高さも狭いです。そこを少し高さを増やしてあげるとお客様にも親切ですね。

プルダウンメニューの部分には class も id も指定されていません。しかし、select タグに nameが指定されています。そこで、select[name=”choice”]で css を適用する事で高さを変える事ができるのです。

関連記事

css ファイルを商品ページに読み込ませる方法は、下記関連記事を御覧ください。

おわりに

このカスタマイズで選択肢をスルーされてしまう可能性は大分減ります。お困りの製作者さんはやってみてはいかがでしょうか。

  • Pocket

おすすめトピックス

関連記事

楽天のスマホ商品ページにPC版で見るボタンを追加するカスタマイズ

Freepikによるデザイン スマートフォンでウェブサイトを見ていたり、ネットショッピングをしている時に PC 版のサイトを見たいと思った事はありませんか? 大抵のウェブサイトやネットショッピングサイトでもスマートフォン […]

アップロード
楽天R-Cabinetに画像を一括でアップロードする方法

楽天 R-Cabinet の画像を URL から一括でダウンロードする方法については以下の記事で紹介しました。 楽天R-Cabinetの画像をURLから一括でダウンロードする方法 もう一つわかりにくいのは、楽天 R-Ca […]

ミニパソコン
売りたい商品のアピールは第一印象が重要である

ネットショップで商品を売りたいならまずは商品登録して各ショッピングモールへ出品します。今の時代、出品しただけでは売れません。 どこのショップでもいかに自分の商品を売るか考えられ実践されています。商品を売るために商品ページ […]

楽天ショップ等の縦帯バナーを商品別に変えるには?

楽天などのインターネットショップをパソコンで見ると、よく画面端に縦に伸びる細長いバナーが表示されている事があるでしょう。あれを縦帯バナーなどと呼んでいます。 ポイント○倍!とか送料無料!とかお客さんにアピールしたい文言を […]

ネットショップ実務士検定
ネットショップ検定に合格すれば就職に有利になるかも

調べ物をしている時、たまたま「ネットショップ実務士」という検定を見つけました。コンセプトとしてはネットショップ業界で働くための新資格。ネットショップで働くための能力の基準を示し、認定する資格試験のようです。 ネットショッ […]

Amazonの商品説明文に画像を載せられるようになりました「商品紹介コンテンツ」

Amazon の商品ページを想像してみてください。商品画像に商品説明がリストで列挙されている程度で実にシンプルですよね。楽天など他ショッピングモールと比べて商品アピール具合が大人しいと思いませんか? その理由は Amaz […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
Googleフォトにアップした写真がどこで撮影したのか確認する方法

あなたのスマートフォンの中にもたくさんの写真があるのではないで

長浜IC前「らーめん専家味噌壱」癖になる濃厚味噌ラーメン

北陸自動車道の長浜インターチェンジ前に、2018年にラーメン屋

WordPressのWP_Queryでカスタムフィールドで絞り込み今日の日付以前の記事は表示しない

WordPress で条件に応じた記事を一覧で表示したいという

電子レンジで冷凍食品のあたため500W/600Wってどこで判別?地域によって違いは?

冷凍食品を温めるのには電子レンジを使用しますが、冷凍食品の裏側

Premiere Elementsで動画の一部を切り抜きトリミングする方法

せっかく動画を撮影したけど、肝心な部分は動画の中央部分だけでま

→もっと見る