お買い物かごボタンをオリジナル画像にする方法

楽天
Yahoo!

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

2016/05/17

お気に入りに追加する

無添加石けんシリーズに統一させた結果・・・
歯磨き粉は想像以上にあわ立ちがなくシャバシャバで中々慣れないogaRia佐藤です。

楽天で使える！
買い物かごボタンをオリジナルの画像に差し替える方法を
今回ご紹介したいと思います。

おそらくしばらくは無いと思いますが
買い物かごボタンの仕様が変更された際には
適応されなくなりますのでご了承ください。

楽天版

デモ

大きなセールイベントの時などこのように大きく目立たせて
購買欲を高めることができますね！

サンプル画像

⇒右クリックで保存

デモ画像で使われているボタンはこちらから
お好みでダウンロードしてご利用ください。

CSS

こちらが専用CSSです。
画像幅、高さ、URLを指定してからすべてコピーしましょう。
※赤字をクリックで編集できます。

/* ご購入手続きへボタン */
#pagebody div#rakutenLimitedId_aroundCart .new-cart-button[data-ratid="fixed_checkout"] {
    background: url(画像URL) 0 0!important;
    width:240px!important;
    height:120px!important;
    text-indent: -9999px!important;
    border-radius: 0px !important;
}

/* 商品をかごに追加ボタン */
#pagebody div#rakutenLimitedId_aroundCart .new-cart-button[data-ratid="fixed_add"] {
    background: url(画像URL) 0 0!important;
    width:240px!important;
    height:120px!important;
    text-indent: -9999px!important;
    border-radius: 0px !important;
}