【楽天】「お買い物かご周り」を徹底カスタマイズするTipsまとめ

首をちょっと動かした時に、奥歯と喉の間あたりから唐突に「ぎょーーッ」て音が出ることありますよね。最近頻繁に出るオガリア中村です。これ治療したい。びっくりする。

楽天ショップの「買い物かごに入れる」ボタン周辺を、オリジナルのデザインにがっつりカスタマイズするCSSのTips/記事をまとめてみました。

見た目は大幅に変える必要はないと個人的には思ってますが、「今だけポイント○倍！」とか「○日まで送料無料！」とか、お客様の背中を押すオリジナルの情報はここらへんで見せたいですよね。

「買い物かごに入れる」ボタン

お買い物かごへ商品を入れてもらう際に押す、超超超重要なボタン。それが「買い物かごに入れる」ボタン。初期デザインのボタンだとちょっと押しが足りないよ…そんな時は、自店舗オリジナルのボタン画像に差替えちゃいましょう！

▼記事はこちら
【人気施策】お買物かごボタンをオリジナルの画像に差し替える方法

▼サンプルボタン(ご自由にお使いください)

「お気に入り商品」ボタン

商品ページへのリピートアクセスを期待できる「お気に入り商品」ボタン。お気に入りに登録された商品が「値引き」や「クーポン発行」などがされると、楽天市場のシステムが自動でお客様へ「お知らせ」を配信してくれます！(詳しくはこちら)

お気に入り登録を促進したい場合はオリジナル画像に変更しちゃいましょう！

▼使用するCSS

<style type="text/css">
<!--
.favorite div.bookmarkArea div.bkm a.addBkm {
    width: 340px !important; /*ボタン画像の幅*/
    height: 80px !important; /*ボタン画像の高さ*/
}
.favorite div.bookmarkArea div.bkm a.addBkm span.bkmStar {
    background: url("画像URL") no-repeat !important;
    width: 340px !important; /*ボタン画像の幅*/
    height: 80px !important; /*ボタン画像の高さ*/
}
-->
</style>

　

▼設定手順
1. CSS内、画像のURLと画像のサイズを適宜書き換えます。
2. CSSを、RMS内の全ページ共通表示部分(ヘッダー等)に貼り付けます。これで完了！

「お気に入りショップ」ボタン

「お気に入り商品」より登録してもらうハードルは高いですが、こちらも促進しておきたい「お気に入りショップ」。リピーター様向けの促進が有効です。

CSSを見に行く(ogaRiaフルバージョン会員様限定)

「商品についての問合せ」ボタン

PB商品などオリジナルの商材は型番商品と異なり、ネット上に情報が充分にありません。そのため、商品に関して不明点があるとお客様が購入に至らない可能性が高くなります。きちんと問合せに誘導したい場合には、このボタンが目立つように加工しましょう！

CSSを見に行く(ogaRiaフルバージョン会員様限定)

「レビューを書く」ボタン

検索結果の並び順や転換率に大きく影響を与える「レビュー」は、数を集めるほど楽天市場では優位に働きます。然し「レビューを書けば○○円OFF！」等のキャンペーンは現在禁止されている為、お客様がレビュー投稿をしたくなる様な促しがあるボタンにカスタマイズするとかどうでしょうか。

CSSを見に行く(ogaRiaフルバージョン会員様限定)

「買い物かごへ」ジャンプボタン

商品ページの右下に自動表示される「買い物かごへ」ボタン。商品ページがかなり長く、このボタンが重宝する方はもっと目立たせても良いかもしれませんね。あとは、ショップのデザインに合わせてボタンの色を変えても良いかもしれません。

▼記事はこちら
【楽天】「買い物かごへジャンプ」ボタンをオリジナル画像に変更する方法

「買い物かご」ボタンの上部に画像を差し込む

買い物かごボタンの上部に、大切な情報をお知らせする事ができます。送料無料金額のご案内や、期間限定のポイントキャンペーンの案内など入れると、客単価や転換率の向上につながります！

▼記事はこちら
「買い物かごに入れる」ボタンの真上にバナーを差し込む方法

「お気に入り」ボタンの上部に画像を差し込む

「お気に入り」ボタンの上、つまりは「買い物かごに入れる」ボタンの下にバナー画像を出せます。お気に入りへ商品を登録した際のメリットなどは、このTipsを使って見せると効果的だと思います。

　

▼参考画像(ご自由にお使いください)
　
　

　
CSSを見に行く(ogaRiaフルバージョン会員様限定)

その他のおすすめ記事

お買い物かご関連ではありませんが、商品ページのこんなカスタマイズもありますよー！

「項目選択肢」のカスタマイズ

▼記事はこちら
【コピペで改善!】楽天ショップの「項目選択肢」をスマホからも見やすくする！30秒カスタマイズ

「パンくず」のカスタマイズ

▼記事はこちら
【楽天】30秒で回遊性UP！商品ページの「パンくず」をコピペで見やすくするCSSテンプレート

ヘッダーの強制検索窓の下にキーワードを差し込む

RMSで作成する全ページには、画面最上部に楽天市場の検索窓が強制的に設置されます。もちろんお客様にとっては利便性が高いため必要なコンテンツではありますが、ショップからの離脱ポイントにもなってしまいます。

そこで！検索窓下にお客様が気になっているキーワードを予め設置し、クリックした先を自店舗の検索結果に設定しておきましょう！離脱しようとしていたお客様の一部を引き留める事ができます。

▼記事はこちら
【楽天ショップ回遊率UP！】共通ヘッダー下にキーワードを表示して離脱防止！Tips