*

楽天商品ページのカート付近、商品名の下にバナーを貼る方法

公開日: : ネットショップ

ネットショップのショッピングカート付近といえば、商品を見たり買ったりする人なら誰でも目を通す一等地です。そんな所にお知らせやバナーなんかを貼る事が出来たら便利ですよね。

楽天の商品ページでは標準機能では用意されていませんが、工夫次第でカート付近にバナー画像を貼る事ができます。図で言うと以下の場所にバナーを貼る事ができるのです。

バナーを貼れる場所

ショッピングカートの所まで来たら必ず目に入る所なので、イベント事とか送料関係の案内などがあっても良いですね。ここに何のバナー画像を貼るかはアイディア次第です

商品名の下にバナーを貼る方法

楽天 RMS の標準機能にはありませんので、CSS を使ってカスタマイズします。商品ページの商品名辺りの html ソースを見ると、商品名に「<span class="item_name">」というクラスが指定されています。ここを足がかりにカスタマイズします。

.item_name{
    display:block;
    height:280px;
    background-image:url('バナー画像');
    background-position:bottom;
    background-repeat:no-repeat;
}

まず display:block で商品名をブロック要素にします。span タグはインライン要素といって高さを指定する事はできませんが、ブロック化する事で可能になります。これで高さを指定することが可能になったので、height で高さを指定します。(バナー画像の高さによって微調整が必要です。)

あとは、background-image でバナー画像を背景に指定、background-position:bottom で下部に設置、このままだと何枚もバナー画像が表示されてしまうので background:no-repeat で一枚だけ表示するように設定しました。

CSSを書く場所

CSS を読み込ませる為に楽天 RMS 内で記述します。

楽天RMSでCSS

「1:店舗設定」→「1-2:デザイン設定」→「ヘッダー・フッター・レフトナビ」を開きます。

使用しているテンプレートを編集して、ヘッダーコンテンツの一番上に外部 CSS を読み込ませるためのタグを記述します。カスタマイズが増えるとかなりの行数になるので、Gold スペースに外部 CSS をアップした方が良いでしょう。

<link href="CSSのURL" rel="stylesheet" type="text/css">

おわりに

リンクを貼る事はできませんが、ショッピングカート付近に貼れるバナー画像は色々と活用法がありそうです。ここに何を貼れば効果的かという事を考えるのも良いと思います。

上部広告

  • Pocket

おすすめトピックス

関連記事

楽天ショップで売り切れ商品が入荷したら通知する機能があります

(また売り切れか…) 楽天ショップで買い物している時、凄く購買意欲をそそらせる良い商品に巡りあう事もあるでしょう。商品説明や画像を見ながらショッピングカートまで進むと目当ての商品が売り切れとなっていた時のショックは大きい […]

楽天ショップのカテゴリページで売り切れ商品を表示しないリンク方法

楽天ショップで商品の種類ごとにまとめられたカテゴリページというものがあります。楽天で買い物をした事がある人なら一度は目にした事があるでしょう。あるカテゴリに属する商品を一覧で見る事ができるので便利です。 そのカテゴリペー […]

楽天のカテゴリ表示順序(優先度)変更でエラー「CSVファイルのフォーマットが違います。」

今回は楽天のカテゴリページの話をします。カテゴリページとはそのカテゴリに属する商品が一覧として表示されるページの事です。何も考えずにどんどん商品登録をしていくと、カテゴリページに表示される商品の順番はバラバラになってしま […]

ネットショップ実務士検定
ネットショップ検定に合格すれば就職に有利になるかも

調べ物をしている時、たまたま「ネットショップ実務士」という検定を見つけました。コンセプトとしてはネットショップ業界で働くための新資格。ネットショップで働くための能力の基準を示し、認定する資格試験のようです。 ネットショッ […]

偽サイト蔓延、早期対策を!楽天偽サイトの探し方

楽天ショップを丸々コピーした偽サイトや、楽天市場を装った偽メールが蔓延していると楽天が注意を促しています。 楽天市場を装う偽サイトやメール出現 楽天が注意呼びかけ – ねとらぼ 私からすると今更?という印象で […]

ポンパレ
ポンパレモールの商品ページにアクセスできない時の対処法

リクルート社が運営しているショッピングモールで「ポンパレモール」があります。多数のネットショップさんが集まって出店しているという所は楽天と同じです。 ポンパレモール:ネット通販/オンラインショッピングサイト トップページ […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
宇佐美
ガソリンスタンドENEOSの看板にある「宇佐美」とは何か?

普段何気なしに利用しているガソリンスタンドですが、ふと気になっ

中部国際空港のプレミアムラウンジセントレアに入るための条件や必要な物

空港には特別な待合室(ラウンジ)があります。中部国際空港も例外

厚さ4cmの封筒が入る郵便ポストは存在するか?

郵便物をポストに投函する場合、投函できる厚みのボーダーラインとしてよく

潮騒そば
こだわりの魚介スープが織り成すラーメン、彦根市の「らー麺潮騒」

滋賀県彦根市の彦根駅周辺の国道8号線を通っている時に、何か新し

超人気のラーメン店銀座篝がsitatte sapporo(シタッテ札幌)に上陸

2017年3月4日に札幌駅前に新たなランドマークとしてオープン

→もっと見る