楽天ショップのお気に入りボタンをオリジナルにする方法をわかりやすく解説します

こんにちは！

楽天ネットショップの売上げを上げる専門家【楽サポ】の大野です。

お買い物かご付近にある「お気に入り商品に登録するボタン」が
ライバルのショップでは大きく表示されている、
「これはどのように設定するのだろうか？」と疑問に思ったことはないでしょうか。

今回はそんな疑問をさくっと解決するための内容です。

結論からいうと、「お気に入り商品に登録するボタン」を
大きくするためにはCSSファイルを作る必要があります。

CSS と聞くと初心者の方は難しい印象を受けると思いますが、
コピペだけで実装できるように優しく丁寧に解説していきたいと思います。

最後まで読んで実践していただけると、
あなたの商品ページのお気に入りボタンが目立つように表示されるようになります。

ぜひこの記事を参考に設置してみてください。

画像を用意する
CSSファイルを用意する
FTPでCSSをアップロードする
共通部分に CSS を読み込ませる
まとめ

画像を用意する

まずは「お気に入り商品に追加」ボタンと「お気に入りショップに登録」ボタンを用意します。

デザイン上の制限は特にありませんので、オリジナルで作ってしまって大丈夫です。

ちなみに私が普段使っているものはこちらです。
自由にダウンロードして使ってくださいね。

お気に入りボタンはクリックしてもらうのが目的なので、
少し大きめに作るのがおすすめです。

CSSファイルを用意する

すでにCSSをGOLDに読み込ませていれば、そのCSSを利用してもOKです。

以下のCSSをコピーしてメモ帳などに貼り付けてください。

/* お気に入り商品・店舗登録 */
#rakutenLimitedId_aroundCart #serviceTableSml {
 margin-top:-7px;
}

body div.bkm{
 width: 430px !important;
 height: 58px !important;
}

body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
  display:inline-block !important;
 width: 460px !important;
 height: 58px !important;
background: url(★お気に入り商品に追加ボタンの画像名★) no-repeat !important;
	margin-top:5px;
}

body #rakutenLimitedId_aroundCart div.shopBkm {
 padding:7px 0 17px 0px !important;
 width: 460px !important;
 height: 58px !important;
}

body div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
  display:inline-block !important; 
 width: 460px !important;
 height: 58px !important;
background: url(★お気に入りショップに追加ボタンの画像名★) no-repeat !important;
}

上記の★部分はR-cabinetにアップロードしたファイル名を記載してください。
ファイル名だけではなくて、以下のように https で始まるようにすべて書きます。
例）https://image.rakuten.co.jp/ショップ名/cabinet/favorite_01.jpg

そして、ファイルを保存する時の拡張子は .css です。

ここでは「event.css」というファイル名で保存することにします。