• 楽天
  • Yahoo!

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

名称未設定-1

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

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

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

楽天版

デモ

tips_1_demo

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

サンプル画像

 

cart_button

⇒右クリックで保存

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

CSS

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


div#rakutenLimitedId_aroundCart input.rCartBtn, div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"],div#rakutenLimitedId_aroundCart input.rCartBtnHover, div#rakutenLimitedId_aroundCart input.rCartBtnHover[type="submit"] {
    background: url(画像URL) 0 0!important;
    border-radius: 0px !important;
    width:240px!important;
    height:120px!important;
}
div#rakutenLimitedId_aroundCart input.rCartBtnHover{
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

 

RMSへ貼り付け

コピーしたCSSを、
『共通のテンプレート』に貼り付けます。

<共通のテンプレート>
・RMSメインメニュー>デザイン設定>ヘッダー・フッター・レフトナビ
・RMSメインメニュー>デザイン設定>共通説明文(大)

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

これにて買い物かごボタンが変更できたかと思います。

ogaRiaCSS管理ツール

ogaRiaでは設定した内容を保存し、
管理画面からいつでもお好みの画像へ差し替える機能をご用意しております。

ヤフー版

デモ

76ba775ff03f61b430a146203aa1104d

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

サンプル画像

 

cart_button_y

⇒右クリックで保存

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

CSS

ヤフー版はogaRiaサービス会員様限定の内容となります。

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

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

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

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

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

まとめ

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

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

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

この記事を書いた人

佐藤

佐藤ディレクター

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

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

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

コメント

1 件のコメント

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

セキュリティチェック *

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