• 楽天
  • Yahoo!

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

名称未設定-1

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

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

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

楽天版

デモ

tips_1_demo

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

サンプル画像

 

cart_button

⇒右クリックで保存

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

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やjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメント

1 件のコメント

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。