ネットショップ運営担当者のブログ

楽天RMSのPCヘッダー・フッター・レフトナビのテンプレート!設定手順(前編)

  • 2021年4月10日
  • 2021年7月27日
  • 楽天GOLD
  • 989view
  • 0件

このページは当サイトが販売している
「楽天GOLDで作成するトップページのテンプレート」におまけ(無料)で付属する
「【おまけ】楽天RMSのPCヘッダー・フッター・レフトナビのテンプレート」の取扱説明書(初期設定)です

基本的にテンプレで作成する購入者用のページとなります

テンプレートに関して知りたい方はこちらをお読みください

楽天GOLD用トップページのテンプレートが安い!レスポンシブでスマホ対応

店舗トップページのデザインと
PC商品ページ、カテゴリページのデザインが似ている方がいいとの
要望があり、おまけ(無料)としてお付けしました

*こちらで説明したPCヘッダー・フッター・レフトナビのテンプレートに関しては、トップページテンプレートのおまけ特典になりますので、こちらのテンプレートに関する理由での返品に関してはお断りさせていただきます。あらかじめご注意ください。

手順1.テンプレートの中身と準備

【おまけ】楽天RMSのPCヘッダー・フッター・レフトナビのテンプレートの中身ですが

HTMLファイル2つ
header_common.html
footer_common.html

テキストファイル3つ
楽天ヘッダー.txt
楽天フッター.txt
楽天サイドナビ.txt

になります。ご確認ください

あと前提として
楽天GOLDをトップページを利用しているものとして説明させていただきます

PCヘッダー・フッター・レフトナビはRMS内から設定するのですが
トップページで使うcssファイルを使う理由から楽天GOLDも合わせて使います

手順2.ヘッダー(header_common.html)の設定

では設定していきましょう

まずはHTMLファイル2つ(header_common.html、footer_common.html)
を店舗用に記入していきます
バックアップする(DLした時のファイルを残しておく)ことをおすすめします

まずはheader_common.htmlから
エディタなどを使ってファイルを開いてください

楽天GOLDトップページと設定がほとんど同じなので
index.htmlファイルを開いてそちらを参考にしていただくのもおすすめです

head部分の設定

head部分(6行目辺り)の設定をします

  <meta charset="utf-8">
  <title>ヘッダー/*********</title>

タイトル <title>ヘッダー/*********</title>
*********の箇所にショップ名を入れてください

店舗ロゴ部分

店舗ロゴ部分(25行目辺り)

<div class="logo">
<a href="https://www.rakuten.co.jp/******/" class="" title=""  target="_top"><img src="images/logo_240_120.png" alt="logo" height="100px"></a>
</div>

楽天GOLDトップページと同じロゴを使うとよいでしょう
imagesのフォルダ内にアップしていれば画像ファイル名を記載すればokです
******にトップページのURL(店舗ID)を記入します

*以前のver.で target=”_top” が入っていないものがございました。aタグ内に target=”_top” が入っていなければ大変お手数ですが お入れください。

最上部テキストエリアの設定

最上部テキストエリア(28行目辺り)

<p class="text-tax">3,980円以上お買物で送料無料</p>

<p class=”text-right”>3980円以上で送料無料</p>
最上部にテキストを入れることができます

トップメニュー

トップメニュー(30行目辺り)

<ul id="nav">
        <li><a href="https://www.rakuten.co.jp/******/news.html"  target="_top">メルマガ</a></li>
        <li><a href="https://www.rakuten.co.jp/******/info2.html"  target="_top">お買い物ガイド</a></li>
        <li><a href="https://www.rakuten.co.jp/******/info.html"  target="_top">会社概要</a></li>
        <li><a href="https://www.rakuten.co.jp/">楽天市場</a></li>
      </ul>

上記******の箇所に店舗IDを入れます

 

検索ボックスの設定

検索ボックスを設定します(39行目辺り)

<form id="search-form-upper" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc" method="get" accept-charset="EUC-JP" target="_top">
<input value="6" type="hidden" name="sv">
<input value="****" type="hidden" name="sid"><!--店舗専用コード(数字)-->
<input value="****" type="hidden" name="su"><!--店舗ID(英数字)-->
<input value="****" type="hidden" name="sn"><!--店舗名(日本語)-->
<input value="A" type="hidden" name="f">
<input type="text" name="sitem" class="searchbox_input" placeholder="商品を検索する">
<input type="image" alt="ストア内検索" src="images/search.png" class="searchbox_btn" width="30" height="30">
</form>

①<input value=”****” type=”hidden” name=”sid”><!–店舗専用コード(数字)–>
****に店舗専用コード(数字)を入れます
全商品表示(空白でショップ内検索)のURL
https://search.rakuten.co.jp/search/mall/?sid=***** ←この部分を入れてください

②<input value=”****” type=”hidden” name=”su”><!–店舗ID英数字–>
****に店舗ID(英数字)を入れます
店舗のトップページ
https://www.rakuten.ne.jp/gold/****/
の店舗IDを入れます

③<input value=”****” type=”hidden” name=”sn”><!–店舗名(日本語)–>
****に店舗名(日本語)を入れます

*以前のver.で target=”_top” が入っていないものがございました。大変お手数ですが
<form id=”search-form-upper” action=”https://esearch.rakuten.co.jp/rms/sd/esearch/vc” method=”get” accept-charset=”EUC-JP”>の< >内に
target=”_top” が入っていなければお入れください。

買い物かごの設定

検索ボックス(48行目辺り)

<div class="basket">
<a href="https://basket.step.rakuten.co.jp/rms/mall/bs/cart/?shop_bid=****" class="" title=""><img src="images/cart.png" alt="cart" width="30" height="30"></a>
</div>

shop_bid=****の部分に店舗専用コード(数字)を入れてください

メニュー上テキストエリアの設定

メニュー上テキストエリア(54行目辺り)

<p>************のお店です</p>

<p>************のお店です</p>
最上部にテキストを入れることができます

ヘッダーのカテゴリー

ヘッダーのカテゴリー(64行目辺り)

<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ5</a>
</li>
</ul>
</div>

カテゴリーを5つ入れられます
カテゴリ名とhref=”#”にカテゴリのURLを入れます

カテゴリではなく、新作やタイムセールなど特集などをいれても結構です

ここまでheader_common.htmlの設定が終わりです。上書き保存します

手順3.フッター(footer_common.html)の設定

次は同じようにfooter_common.htmlを設定していきます

お買物ガイド

  1. 送料について
  2. 支払い方法について
  3. 返品交換について
  4. プライバシーポリシー
  5. お問い合わせ

などを設定することができます
こちらに関しては
店舗の概要やルールと照らし合わせながら、自由に記述ください

フッター内下記の箇所
<a href=”https://www.rakuten.co.jp/****/info2.html”>お買い物概要</a>(48行目辺り)
<a href=”https://www.rakuten.co.jp/****/info.html”>会社概要</a>(81行目辺り)
****に店舗ID(英数字)を入れます

コピーライト

コピーライト(90行目辺り)

©︎************Co.,Ltd.の箇所に
コピーライトを入れることができます

入力がすべて完了し、ページが完成しましたら
楽天GOLD、RMSへを行います