*

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

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

楽天の選択肢

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

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

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

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

上記画像を御覧ください。背景に 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

おすすめトピックス

関連記事

画像ダウンロード
楽天R-Cabinetの画像をURLから一括でダウンロードする方法

楽天市場の商品ページにある商品画像や説明画像は、楽天 RMS の R-Cabinet にアップロードします。しかし、この R-Cabinet。画像ファイルの一括アップロード機能は用意されていても、一括ダウンロード機能は提 […]

キーボードと紙
要注意、Amazonに出品する商品の商品名は一度決めたら変更できません

Amazon でネットショップを出店している方も多いかと思います。が、Amazon で商品を出品する際、注意点があります。 それは、Amazon に商品登録する際に一度決めた商品名は変更不可能という事です。以前は変更する […]

電話応対
お客様の注文間違いは転換率アップのチャンスです

ネットショップ、EC サイトを運営していれば日々お客様からのお電話を頂くかと思います。それは、商品に対する質問であったりクレームであったり内容は様々。その問い合わせ、受けただけで終わりにしてませんか? お客様からの問い合 […]

カートフォント
商用無料!様々なショッピングカートのデザインが揃っているフリーフォント

インターネットショッピングのサイトを作るなら必ず必要な「買い物カゴボタン」。お客様が商品を注文するために必要なボタンです。よく買い物かごに入れるという文字とともにショッピングカートのアイコンがあしらわれたボタンがよく使わ […]

カレンダー
ネットショップの営業日カレンダーを自動更新にして手間を省く

ネットショップと言えば必ずと言っていいほどありますよね。休業日と営業日をお客様に知らせる為の営業日カレンダー。お店によって実装方法は様々です。カレンダーは画像であったり、table タグでカレンダーを html で直打ち […]

レスポンシブメールマガジンを遂に楽天がリリース、メルマガもスマホ対応を

2016年2月15日より楽天がレスポンシブメール機能をリリースしました。 レスポンシブメールとは一つのメールでパソコン、スマートフォンの両方に最適なメールマガジンを送る事ができる機能です。ただ両方に送るだけではなく、パソ […]

著者について

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

フォローはこちら

       

       
メルカリのうるさすぎる不要なプッシュ通知を止める

CM でも放送されている誰でもかんたんフリマアプリとして代表的

シーリングファン
天井に取り付けられるプロペラ「シーリングファン」の意味とは?

天井が高いカフェやオフィスなどでたまに天井に取り付けられている

ASUSタブレットPC「T101HA」でPhotoshopは問題なく使える?

今まで外出先や旅行先で作業する為のモバイル端末として、Andr

イタリアンジェラート
小樽市のイタリアンジェラート専門店「パスコロ」豊富なメニューと滑らかな口溶けが魅力

北海道の小樽市にあるパスコロは、手作りアイスのイタリアンジェラ

札幌大通近くのハヤシライス専門店「フェルム・ソレイユ」2週間熟成した究極のハヤシライスを食すランチ

札幌市中央区役所の近くにあるハヤシライス専門店「フェルム・ソレ

→もっと見る