• 楽天
  • Yahoo!

【楽天スーパーSALE対策】商品一覧の全画像に「スーパーSALE対象」ラベルを自動でつけるTips

0617_main

りんごジュースって、たまに麦茶みたいなのありませんか?オガリア中村です。

本日は6月17日。という事は、明日18日~は楽天の「スーパーSALE」が開催されます!私は午前中にさくらんぼ狩りに行く予定なので、帰ってきてからSALEに参戦予定です。

スーパーSALE対策の悩み事と言えば、『今買わなきゃ絶対損』『他ショップよりこっちの方が絶対お得』な事をどうやってとことんアピールするか…!が挙がると思います。そこでご提案!楽天ショップページ内のあらゆる「商品画像」に、スーパーSALE用の「ラベル」をつけてみませんか!?

デモ

0617_main2

一覧で並んでいる商品画像の端に、「スーパーSALE対象」とかのひと言をつけ加える事が出来ます(PCのみ)。

▼つけられる場所
 ・カテゴリページ内の商品一覧
 ・「この商品を見てる人はこんな商品も…」のレコメント部
 ・お買い物かごボタン横の商品画像1枚目

破壊力がありそうなキーワードは…

  • スーパSALE対象!
    (※もちろん全品対象なんですが、あえて書く事でお客様に安心感を与えられるかと。)
  • ポイント10倍確定!
  • ただ今全品送料無料!

とかがオススメです。それでは早速設置方法をご案内しますー!

CSSをコピーする

まずはラベルを貼りたい場所に合わせて、CSSをコピーしましょう!
コピーができたら、CSS内の赤文字(“スーパーSALE対象”の文言)部分を、ラベルとして表示したい文言に変更します。全角8文字以内がオススメ。

カテゴリ一覧の画像にラベルをつけるCSS

0617_main2
<style type="text/css">
<!--
/* カテゴリページ内商品画像にラベルをつける */
div#risFil table tr:nth-child(odd) a {
    display: inline-block !important;
    position: relative !important;
}
div#risFil table tr:nth-child(odd) a:after {
    content: "スーパーSALE対象"; /*ラベル内の文言*/
    color: #fff;
    background: #bf0000;
    font-size: 10px;
    font-family: メイリオ;
    letter-spacing: 0;
    display: inline-block;
    padding: 2px;
    position: absolute;
    top: 0;
    left: 0;
}
div#risFil .risfClfx a:after {
content: none !important;
}
-->
</style>

レコメンド内商品画像にラベルをつける

0617_main4
<style type="text/css">
<!--
#rakutenLimitedId_inshop_recommend li.pageRecoThumb a {
    display: inline-block !important;
    position: relative !important;
}
#rakutenLimitedId_inshop_recommend li.pageRecoThumb a:after {
    content: "スーパーSALE対象"; /*ラベル内の文言*/
    color: #fff;
    background: #bf0000;
    font-size: 10px;
    font-family: メイリオ;
    letter-spacing: 0;
    display: inline-block;
    padding: 2px;
    position: absolute;
    top: 0;
    left: 0;
}
-->
</style>

お買い物かごボタン横の商品画像にラベルをつける

0617_main3
<style type="text/css">
<!--
/* 商品画像にラベル */
a.rakutenLimitedId_ImageMain1-3:first-child {
    display: inline-block !important;
    position: relative !important;	
}
a.rakutenLimitedId_ImageMain1-3:first-child:after {
    content: "スーパーSALE対象"; /*ラベル内の文言*/
    color: #fff;
    background: #bf0000;
    font-size: 10px;
    font-family: メイリオ;
    letter-spacing: 0;
    display: inline-block;
    padding: 2px;
    position: absolute;
    top: 0;
    left: 0;
}
-->
</style>

全部まとめたcss

三箇所全部に貼りたい!という方へは、文字数を削減したまとめバージョンをご用意しました(ogaRiaフルバージョンプランご利用店舗様のみ)。

CSSを貼る

用意したCSSを、次のどこかに貼り付けます。全ページに反映される箇所であれば、どこでもOKです。

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

以上で完了!どうでしょう?ラベル出ました!?

検索結果の画像にもラベルをつけたい!

0617_main_4

楽天市場内で商品検索をした際の、商品画像にもラベルをつけたくありませんか?他社商品と画像が並んだ際に、少しでも差別化したいですよね。

だけど…検索結果画面にはCSSを貼る事ができないため、そもそもの「商品画像自体」にラベルをつけて、画像を上書きするしかありません。スーパーSALE前に全商品画像を編集するのって、現実的ではないですよね・・・。

そこで便利なのが「イメージデコ」です!

イメージデコは現在の商品画像を自動で取り込み、ラベル画像を商品画像に重ねた状態で画像を出力し直します。一度に20商品ずつ処理できるから、大量の商品画像も一気に作れますよ!


 

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

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

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

コメント

2 件のコメント

  • 葉月 より:

    いつも参考にさせていただいております。
    ありがとうございます。

    本日、タグを設置してみたのですが、「カテゴリ一覧」にラベルをつけるタグを設置したところ、
    カテゴリー一覧ページ下部の、2ページめ、3ぺージめへ飛ぶ数字にまでラベルがついてしまっています。
    この数字部分にはラベルをつけないようにしたいのですが、方法はありますか?

    • 中村 茉実 中村 茉実 より:

      お問合せありがとうございます!こちらこそご欄頂きありがとうございます。
      ページャーへもラベルがついてしまうとの事、大変失礼致しました…!
      解消するため、CSSの内容を修正させて頂きました。お手数ですが、再度CSSをお貼り替え頂けますでしょうか。
      解消されない場合はご連絡くださいませ^^

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

セキュリティチェック *

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