ECプロ│ECサイト運営のためのアドバイス情報サイト

こんにちは、イメージデザインの古川です。

みなさん楽天の商品ページはどのようにしていますか。
おそらく、転換率を上げるために商品説明文や販売説明文を綺麗に作ったり、
回遊性を上げるためにカテゴリーや商品へのリンクを並べたりと色々施策はされていると思います。

ページの見栄えってやはりとても大事ですよね。
せっかく見てもらった商品のいいところはなんとしても伝えないといけません。

しかし、ここ以外に商品を買ってもらうことに関して、ある意味最も重要な箇所があります。



それは

「購入ボタン」です。

すごく当たり前です。
これがないと商品は購入できませんから、大事です。
でも楽天の商品ページの買物かごのデフォルトは正直、地味な感じがします。

僕は、ページ制作の仕事もしてますので、 クライントさんから、「このボタン替えたい」とか、「○○○の店の買物ボタンどうやってんの？」とか
けっこう聞かれる事があります。

ですので、今日は「ちょっとの変更で実装できるボタンの変更」を紹介したいと思います。

楽天の買物カゴを取り替える

変更に必要なものは表示させたい「画像」と「CSS」です。
ということで、以下に変更に必要なCSSのサンプルを紹介します。

<style type="text/css">
input[value="買い物かごに入れる"]{
  display: block;
  background:url("カート画像URL") #fcfcfc no-repeat;
  border: medium none;
  margin-top: 15px;/*ボタン上の余白*/
  margin-bottom: 15px;/*ボタン下の余白*/
  height: 47px;/*高さ*/
  width: 272px;/*幅*/
  text-indent: -999px;
}
</style>

上のソースをデザイン設定の「ヘッダー・フッター・レフトナビ」かcssを外部かして読み込めばOKです。
「”カート画像URL”」は作成した画像をCabinetかGOLDにアップロードし、その画像URLを入れてください。
「heigt」には作成した画像の高さ
「width」には作成画像の横幅
をそれぞれ設定すれば完了です。

元から付いている買物かごの変更というちょっとしたことですが、
地味だったものが目立つボタンになればやっぱり転換率もあがりますので、
ぜひ、試してみてください！


お問い合わせや、個数・項目選択肢のデザイン変更も実はできてしまいますが、
そちらは後日ご紹介させていただきます。