【コピペでOK】楽天市場ショップに詳細検索を作る！
記事IT・テクノロジー
キーワードだけではなく、価格などで条件を絞って検索出来たら、お客様も早く求める商品に辿り着けるに違いありません。
せっかく楽天市場のたくさんのお店の中から選ばれて来てもらえたのに、「探すの疲れちゃった、もういいや」って離脱（そのページから離れること）されるなんて勿体なさすぎます。すぐに、楽に、目的の商品を見つけてもらいたいですよね。
楽天市場出店者様必見！今回も画像たっぷりで分かりやすく解説します！よく分からなくても、解説読まずにコピペでOK！フォームは楽天RMS内でもGOLDのhtmlファイル内でも設置出来ます。 🙂 また、パソコン・スマホ両方で使えます。
最終どんな検索窓が出来るのか？まず出来上がり見本
htmlをコピペする
では早速！下記htmlを検索窓を置きたいところにコピペしてください。
＊2行目のhttps:の後のスペースは詰めてください。
<div class="search02">
<form method="get" action="https: //esearch.rakuten.co.jp/rms/sd/esearch/vc" accept-charset="euc-jp">
<input value="6" type="hidden" name="sv">
<input value="★ショップの数字★" type="hidden" name="sid">
<input value="★ショップID★" type="hidden" name="su">
<input value="★ショップ名★" type="hidden" name="sn">
<input value="A" type="hidden" name="f">
<p><input type="text" name="sitem" placeholder="検索キーワード"></p><!--検索キーワード-->
<p>
<label><input type="radio" name="st" value="A" class="hidden" checked="">すべて</label>
<label><input type="radio" name="st" value="O" class="hidden">いずれか</label>
</p><!--and or検索指定-->
<p><input name="nitem" type="text" placeholder="除外キーワード"></p><!--除外キーワード-->
<p><span>商品価格</span><div class="price-area"><input name="min" type="text" placeholder="円"><span>～</span><input name="max" type="text" placeholder="円"></div></p><!--価格指定-->
<p><span>並び替え</span><select name="s">
<option value="" selected="">標準</option>
<option value="2">価格安い</option>
<option value="3">価格高い</option>
<option value="4">新着順</option>
<option value="5">レビュー件数</option>
<option value="6">レビュー評価</option>
</select></p><!--検索結果の並び順-->
<p>
<label><input value="4" type="checkbox" name="e">送料無料</label>
</p>
<p><input value="商品検索" type="submit" id="target"></p><!--検索ボタン-->
</form>
</div>
【html解説】
★ショップの数字★…6桁の数字
★ショップID★…英文字やハイフンなどで構成された、ショップアカウント名
★ショップ名★…お店の名前(日本語でもOK)。ショップIDと同じでもOK
↑★で囲まれた上記3点は自分のお店のものを入れてください。
ここで言うショップの数字とは、店舗内検索した時に、URLに出てくる最後の数字6桁を指しています。
ここで言うショップIDとは、rakuten.ne.jp/gold/やrakuten.co.jp/の後に表示されるお店のアルファベットを指しています。（GOLDのユーザー名に当たる部分）
【参考にしたサイト】（全角スラッシュは半角にして下さい）
今さら聞けない、楽天検索ボックスの設置・カスタマイズ方法。
http:／／www.billionplan.com/blog/ec/rakuten-search-box.html
CSSで見た目を整えよう！
下記を追記してください。上記フォームと同じhtml内どこに書いてもOKです。（でもおすすめは CSSファイル内。その時は<style>と</style>は取ってください🙂）
<style>
.search02 {
margin: 0 auto;
max-width: 190px;
padding: 5px;
}
.search02 p {
margin: 10px 0;
width: 100%;
}
.search02 span {
font-weight: bold;
font-size: 90%;
}
input::placeholder {
color: #aaa;
}
.search02 input[type=text] {
box-sizing: border-box;
width: 100%;
max-width: 300px;
height: 35px;
margin: 0;
border: 1px solid #d8d8d8;
border-radius: 3px;
background: #fff;
color: #333;
}
.search02 input[type=submit] {
background: linear-gradient(#333,#000);
border: none;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
margin: 30px auto 50px;
padding: 12px;
box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
width: 80%;
display: block;
text-align: center;
color: #fff;
cursor: pointer;
}
.search02 .price-area {
margin-top: -10px;
display: flex;
justify-content: space-between;
}
.search02 .price-area input {
max-width: 130px;
}
.search02 .price-area span {
padding: 0 5px;
line-height: 30px;
}
.search02 select {
margin-left: 5px;
height: 30px;
}
</style>
【CSS解説】
幅の変更は.search02の中のmax-widthとpaddingで調整してください。
.serch02という名前が他で使われていたら違う名前にしてください。
設置したら見た目だけでなく、実際に検索して確認してみましょう。そのとき日本語でも検索してみて、文字化けしないことも確認しましょう。😉
今回は以上になります。
明日はYahoo!ショッピングバージョンをお届けします！
お疲れ様でした☆
もしよろしければこちらのサービスもご検討いただけたら嬉しいです⭐️
