【楽天、ヤフー対応】買い物かごボタンを大きくしたり独自画像で目立たせよう！

無添加石けんシリーズに統一させた結果・・・
歯磨き粉は想像以上にあわ立ちがなくシャバシャバで中々慣れない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管理画面へ(フルバージョン会員様限定)

ヤフー版

デモ

ヤフーでも楽天同様ポイントキャンペーン企画のボタンに
差し替えてみました。

サンプル画像

 

⇒右クリックで保存

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

CSS

ヤフー版はogaRiaサービス会員様限定の内容となります。
専用CSSを取得(フルバージョン会員様限定)

ストアクリエイターへ貼り付け

専用タグを取得コピーしストアクリエイターの
『共通部分』のいずれかに貼り付けます。

＜共通のテンプレート＞
・ストアクリエイター＞ストアデザイン＞ヘッダー・看板
・ストアクリエイター＞ストアデザイン＞サイドナビ
・ストアクリエイター＞ストアデザイン＞フッター

※ 貼り付け場所はどの位置でも構いません。
※ どこか一箇所に貼り付ければOK！

ヤフーでも買い物カゴボタンが変更できましたね！

まとめ

以前に比べ楽天、ヤフーも
買い物かごボタンが標準でも見栄えが良いものになったと思います。

そんな中さらに
買い物カゴボタンをオリジナルの画像に変更して目立たせるのは
もちろんの事、デモのようにイベント毎に変化させてみても
クリックを促しやすくなりそうですね！

是非お試しくださいませー^^