楽天商品ページのカート上の選択肢を目立たせてスルーを防ぐ
公開日:
:
ネットショップ
楽天の商品ページにはカート上にお客様に選んでもらう選択肢を付ける事ができます。選択肢はプルダウンメニューで表示されます。例えば、商品をカートに入れる前にお客様に確認してほしい事とか、キャンペーンに参加するかしないか等を尋ねるのによく使われます。
しかしこの商品ページの選択肢、デフォルトでは全く目立ってなくてスルーしてしまうのも無理もない状況です(上記画像参照)。選んで欲しいのに選ばずにカートに入れてしまうお客様が多いのです。そこで、この選択肢を目立たせるカスタマイズを紹介します。
楽天の商品ページの選択肢をデザインして目立たせる
上記画像を御覧ください。背景に 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 で調整してください。
これで背景画像は設定できましたが、他のボタンとの間が詰まりすぎてやっぱり見難いんですよね。そこで、padding で適宜調整してください。
プルダウンメニューの高さも自由に設定できる
一番上の画像を見てもらえればわかりますが、デフォルトではプルダウンメニューの高さも狭いです。そこを少し高さを増やしてあげるとお客様にも親切ですね。
プルダウンメニューの部分には class も id も指定されていません。しかし、select タグに nameが指定されています。そこで、select[name=”choice”]で css を適用する事で高さを変える事ができるのです。
関連記事
css ファイルを商品ページに読み込ませる方法は、下記関連記事を御覧ください。
おわりに
このカスタマイズで選択肢をスルーされてしまう可能性は大分減ります。お困りの製作者さんはやってみてはいかがでしょうか。
おすすめトピックス
関連記事
-
-
どう違うの?ゆうメールとゆうパケットの違い
荷物を送るための郵便局のサービスも多種多様なものがあり、種類が多くてどれがどう違うのかもわからなくなる事もあると思います。今回はゆうメールとゆうパケットの違いについてまとめたいと思います。 目次1 ゆうメールとは1.1 […]
-
-
写真や画像から綺麗なベクター線画に変換してくれるツールが便利
「この画像から線画にできる?」 この前そんな事を言われました。その画像とはある物の設計図のようなものでした。線画に出来るか?と問われれば出来ます。Adobe Illustrator で縁をなぞって線を書けばいいわけです。 […]
-
-
楽天のスマホ商品ページにPC版で見るボタンを追加するカスタマイズ
Freepikによるデザイン スマートフォンでウェブサイトを見ていたり、ネットショッピングをしている時に PC 版のサイトを見たいと思った事はありませんか? 大抵のウェブサイトやネットショッピングサイトでもスマートフォン […]
-
-
楽天の商品ページの納期情報の文字色やサイズを変更する方法
「楽天商品ページにある納期情報の文字色変えれる?」 突如放たれるその言葉。全く無茶を言ってくれますねと思いつつも、試行錯誤を始めます。試しに google で検索しても特に情報はありません。しかし、google の検索予 […]
-
-
楽天ショップで売り切れ商品が入荷したら通知する機能があります
(また売り切れか…) 楽天ショップで買い物している時、凄く購買意欲をそそらせる良い商品に巡りあう事もあるでしょう。商品説明や画像を見ながらショッピングカートまで進むと目当ての商品が売り切れとなっていた時のショックは大きい […]
-
-
楽天ショップのカテゴリページで売り切れ商品を表示しないリンク方法
楽天ショップで商品の種類ごとにまとめられたカテゴリページというものがあります。楽天で買い物をした事がある人なら一度は目にした事があるでしょう。あるカテゴリに属する商品を一覧で見る事ができるので便利です。 そのカテゴリペー […]