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

無添加石けんシリーズに統一させた結果・・・
歯磨き粉は想像以上にあわ立ちがなくシャバシャバで中々慣れない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; }
RMSへ貼り付け
コピーしたCSSを、
『共通のテンプレート』に貼り付けます。
<共通のテンプレート>
・RMSメインメニュー>デザイン設定>ヘッダー・フッター・レフトナビ
・RMSメインメニュー>デザイン設定>共通説明文(大)
※ 貼り付け場所はどの位置でも構いません。
※ どこか一箇所に貼り付ければOK!
これにて買い物かごボタンが変更できたかと思います。
ogaRiaCSS管理ツール
ogaRiaでは設定した内容を保存し、
管理画面からいつでもお好みの画像へ差し替える機能をご用意しております。
CSS管理画面へ(フルバージョン会員様限定)
まとめ
以前に比べ
買い物かごボタンが標準でも見栄えが良いものになったと思います。
そんな中さらに
買い物カゴボタンをオリジナルの画像に変更して目立たせるのは
もちろんの事、デモのようにイベント毎に変化させてみても
クリックを促しやすくなりそうですね!
是非お試しくださいませー^^

コメント
1 件のコメント