×
~ご契約初月無料キャンペーン~  2018年10月18日 ~ 10月26日9:59まで お申込はこちら >>> 1MF1008
  • 楽天
  • Yahoo!

『価格から探す』コーナーをコピペで作る!PC・スマホ用のHTMLテンプレート

0513_main

こんにちは。「サワークリームオニオン」を信仰してるオガリア中村です。芋類ベストマッチ。

今回は、店舗内の回遊性をたかめるのに効果的な『価格から探す』コーナーのHTMLテンプレートを用意してみましたー!楽天ショップ/Yahoo!ストアどちらでもご利用可能、PC版とスマホ版をご用意してます。

『価格から探す』はなぜ必要?

それは「価格で商品を探しているお客様がいるから」なんですよね。お買い物するときって大体予算が決まってると思うんですが、予算内の商品を探しやすくなるメリットが。取扱商材の主な価格帯もわかりやすいですよね。

それ以外にも、『「送料無料になる金額」までの残り金額分をお買い物しやすくなる』というネットショップならではのメリットがあります。

特にギフト商材は価格帯検索のニーズが高いジャンルです。価格帯検索を用意していないショップ様はこれを機にぜひぜひ!

デモ

【PC用】デザインパターン1

【PC用】デザインパターン2

PC向けには2デザイン作ってみました。コンパクトなタイプと、シンプルだけど見やすいタイプです。どちらもレスポンシブデザインになっている為、場所を選ばず設置できます。文字色や背景色をお好みに変更して活用くださいませー!

スマホ用デザイン

価格帯から探す(スマホ版)

幅100%で表示されます。タップしやすい大きさに調整しています。

HTMLの書き換え箇所

一点、「リンク先」のみ必ず書き換えが必要です。

『価格から探す』欄の値段をクリックした際のリンク先は、「ショップ内を価格帯検索した検索結果」へリンクする様にしています。URL内のショップアカウント情報を書き換えましょう。

・・・・・

 
▼楽天ショップの場合

https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=123456&uwd=1&s=1...

(※赤文字の箇所を”shopナンバー”に書き換えてください。shopナンバーは、ショップ内検索結果のURLから取得できます。)

・・・・・
 

▼Yahoo!ストアの場合

https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=&pt=1000&p=-%A4%F3

(※赤文字の箇所を書き換えてください)

【PC用】デザインパターン1

それでは早速HTMLをご案内ー!上から下までまるっとコピーした上、メモ帳とかで内容を書き換えてから貼り付けてくださいませー!

楽天ショップ用

<!-- ↓価格帯で探す 開始↓ -->
<style type="text/css">
<!--
#price-search {
  width: 100%;
}
#price-search * {
  box-sizing: border-box;
  font-family: "メイリオ";
}
/* タイトル */
#price-search h3 {
  font-size: 14px; /*文字サイズ*/
  color: #333; /*文字色*/
  margin: 0;
}
/* 価格帯欄 */
#price-search ul{
  width: 100%;
  border: 4px solid #eee; /*枠線*/
  background: #f8f8f8; /*背景色*/
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
}
#price-search li a {
  font-size: 13px; /*文字サイズ*/
  color: #333; /*文字色*/
  text-decoration: none;
  display: block;
  padding: 4px 4px 4px 16px;
  line-height: 24px;
  position: relative;
}
#price-search li a:hover {
  background: #f0f0f0; /*マウスを当てた時の背景色*/
}
#price-search li a:after {
  content: ">";
  position: absolute;
  right: 4px;
  font-size: 10px;
  font-weight: bold;
  color: rgba(0,0,0,.4);
}
-->
</style>

<div id="price-search">
  <h3>価格帯で探す</h3>
  <ul>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=&max=1000">~¥1,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=1000&max=2000">¥1,000~¥2,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=1000&max=2000">¥1,000~¥2,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=2000&max=5000">¥2,000~¥5,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=5000&max=10000">¥5,000~¥10,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=10000&max=">¥10,000~</a>
    </li>
  </ul>
</div>
<!-- ↑価格帯で探す 終了↑ -->

Yahoo!ストア用

<!-- ↓価格帯で探す 開始↓ -->
<div id="price-search" style="width:100%;" >
  <p style="font-weight:bold;font-size:14px;color:#333;margin:0;">価格帯で探す</p>
  <ul style="box-sizing:border-box;width:100%;border:4px solid #eee;padding:0;margin:4px 0 0;background:#f8f8f8;list-style-type:none;" >
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=&pt=1000&p=-%A4%F3" style="box-sizing:border-box;font-size:13px;color:#333;text-decoration:none;display:block;padding:4px 4px 4px 16px;line-height:24px;" class="broken_link">~¥1,000</a>
    </li>
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=1000&pt=2000&p=-%A4%F3" style="box-sizing:border-box;font-size:13px;color:#333;text-decoration:none;display:block;padding:4px 4px 4px 16px;line-height:24px;" class="broken_link">¥1,000~¥2,000</a>
    </li>
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=2000&pt=5000&p=-%A4%F3" style="box-sizing:border-box;font-size:13px;color:#333;text-decoration:none;display:block;padding:4px 4px 4px 16px;line-height:24px;" class="broken_link">¥2,000~¥5,000</a>
    </li>
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=5000&pt=10000&p=-%A4%F3" style="box-sizing:border-box;font-size:13px;color:#333;text-decoration:none;display:block;padding:4px 4px 4px 16px;line-height:24px;" class="broken_link">¥5,000~¥10,000</a>
    </li>
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=10000&pt=&p=-%A4%F3" style="box-sizing:border-box;font-size:13px;color:#333;text-decoration:none;display:block;padding:4px 4px 4px 16px;line-height:24px;" class="broken_link">¥10,000~</a>
    </li>
  </ul>
</div>
<!-- ↑価格帯で探す 終了↑ -->

【PC用】デザインパターン2

楽天ショップ用

<!-- ↓価格帯で探す 開始↓ -->
<style type="text/css">
<!--
#price-search2 {
  width: 100%;
}
#price-search2 * {
  box-sizing: border-box;
  font-family: "メイリオ";
}
/* タイトル */
#price-search2 h3 {
  font-size: 12px; /*文字サイズ*/
  color: #333; /*文字色*/
  border-bottom: 2px solid #444; /*下線*/
  margin: 0;
}
/* 価格帯欄 */
#price-search2 ul{
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
#price-search2 li a {
  font-size: 14px; /*文字サイズ*/
  color: #333; /*文字色*/
  text-decoration: none;
  display: block;
  border-bottom: 1px dashed #ccc; /*下線*/
  padding: 0;
  line-height: 40px;
  position: relative;
}
#price-search2 li a:hover {
  background: #f8f8f8; /*マウスを当てた時の背景色*/
}
#price-search2 li a:after {
  content: ">";
  position: absolute;
  right: 4px;
  font-size: 10px;
  font-weight: bold;
  color: rgba(0,0,0,.4);
}
-->
</style>

<div id="price-search2">
  <h3>価格帯で探す</h3>
  <ul>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=&max=1000">~¥1,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=1000&max=2000">¥1,000~¥2,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=1000&max=2000">¥1,000~¥2,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=2000&max=5000">¥2,000~¥5,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=5000&max=10000">¥5,000~¥10,000</a>
    </li>
    <li>
      <a href="https://search.rakuten.co.jp/search/inshop-mall?f=1&v=2&sid=212142&uwd=1&s=1&p=1&sitem=&st=A&nitem=&min=10000&max=">¥10,000~</a>
    </li>
  </ul>
</div>
<!-- ↑価格帯で探す 終了↑ -->

Yahoo!ストア用

<!-- ↓価格帯で探す 開始↓ -->
<div style="width:100%;">
  <p style="font-weight:bold; font-size:12px; color:#333; border-bottom:2px solid #444; margin:0;">価格帯で探す</p>
  <ul style="width:100%; padding:0; margin:0; list-style-type:none;">
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=&pt=1000&p=-%A4%F3" style="font-size:14px; color:#333; text-decoration:none; display:block; border-bottom:1px dashed #ccc; padding:0; line-height:40px;" class="broken_link">~¥1,000</a>
    </li>
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=1000&pt=2000&p=-%A4%F3" style="font-size:14px; color:#333; text-decoration:none; display:block; border-bottom:1px dashed #ccc; padding:0; line-height:40px;" class="broken_link">¥1,000~¥2,000</a>
    </li>
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=2000&pt=5000&p=-%A4%F3" style="font-size:14px; color:#333; text-decoration:none; display:block; border-bottom:1px dashed #ccc; padding:0; line-height:40px;" class="broken_link">¥2,000~¥5,000</a>
    </li>
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=5000&pt=10000&p=-%A4%F3" style="font-size:14px; color:#333; text-decoration:none; display:block; border-bottom:1px dashed #ccc; padding:0; line-height:40px;" class="broken_link">¥5,000~¥10,000</a>
    </li>
    <li>
      <a href="https://store.shopping.yahoo.co.jp/ストアアカウント/search.html?pf=10000&pt=&p=-%A4%F3" style="font-size:14px; color:#333; text-decoration:none; display:block; border-bottom:1px dashed #ccc; padding:0; line-height:40px;" class="broken_link">¥10,000~</a>
    </li>
  </ul>
</div>
<!-- ↑価格帯で探す 終了↑ -->

スマホ用デザイン

価格帯から探す(スマホ版)

こちらはogaRia「フルバージョン」プランご契約店舗様限定の公開です!

RMS/Yahoo!ストアマネージャーにそのまま貼付けできますよー!PCと同様、URL内に書き換え箇所がありますのでお気をつけを!スマホ用のフリースペース欄に貼り付けてくださいね。

この記事を書いた人

中村 茉実

中村 茉実ディレクター

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

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

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

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

セキュリティチェック *

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