*

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

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

楽天の選択肢

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

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

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

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

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

おすすめトピックス

関連記事

楽天商品ページに背景
楽天の全商品ページに背景を付ける方法

楽天の商品ページに訪れると、画面の端に縦長の帯状画像が付いている事があります。そのショップのイベント告知であったり、○円以上お買上げで送料無料だとか、季節感を演出したり用途は様々です。 イメージとしては下図のようなもので […]

アウトレットセール
アウトレット品はこれからの時代を生き抜く為の重要なファクターとなるだろう

よく巷でアウトレットセール、訳ありセールなど催されている所を見かける事もあると思います。そのアウトレットセールって何のセールかご存知でしょうか? 目次1 アウトレットとは2 商品は毎日捨てられている3 商品を安く買う方法 […]

商品ページの回遊率アップで売上向上を狙う為の施策について

どこのネットショップ、ショッピングモールでもそうですがマニュアル通りにただ商品を載せただけでは売上向上に繋がりません。ちょっとしたカスタマイズで商品ページの回遊率を高め、商品が売れる機会を増やすことができます。 カスタマ […]

eメール
楽天メルマガうざいと思う人朗報!メルマガ有料化で配信が減るかも

楽天ショップのメールマガジンがいつも大量に来て鬱陶しいと思う人も多いかと思います。 それもその筈、何も意識せず楽天ショップで買い物をしたら標準でメールマガジンが送信される設定になっています。楽天で買い物をする度にメールマ […]

ショッピングカート付近にバナーを
楽天商品ページのカート付近、商品名の下にバナーを貼る方法

ネットショップのショッピングカート付近といえば、商品を見たり買ったりする人なら誰でも目を通す一等地です。そんな所にお知らせやバナーなんかを貼る事が出来たら便利ですよね。 楽天の商品ページでは標準機能では用意されていません […]

メール
楽天メルマガR-Mailが週1回なら配信無料に!2015年9月から(※条件付)

楽天の各ショップから送る事ができるメールマガジン(R-Mail)が2015年4月から配信が有料になりました。お客様が求める最適なメールマガジンが届くような環境づくりの為の有料化でしたが、ここにきて手のひらを返したかのよう […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に

検索順位は落ちてないのにブログのアクセス数が下がる理由とは?

2017年2月3日に Google より「日本語検索の品質向上

セントレアエアラインラウンジ
セントレアエアラインラウンジには何がある?入る条件は何?

空港には会員向けのラウンジという特別な待合室がある事は知ってい

誰でも簡単に猫のイラストから写真のような猫ができる猫ツールが凄かった

猫は小学生の頃から好きでよく猫のイラストもノートに落書きしたり

ぽてコタン
玉ねぎとじゃがいもの旨味が凝縮されたのカルビー「ぽてコタン」が美味い【北海道限定】

北海道土産として人気で名高いものの一つにカルビーの「じゃがポッ

→もっと見る