【コピペでOK】Yahoo!ショッピング店舗に詳細検索を作る！

Yahoo!ショッピングのショップに、詳細検索窓を設置していきます。

パソコン・スマホ両方で使えます。

完成見本

▼こんな感じになる予定

htmlをコピペしよう

▼下記をhtmlが書けるところにコピペして下さい。

2行目のhttps:の後のスペースは詰めて下さい。

---

<div style="margin: 0 auto;max-width: 190px;padding: 5px;">

<form name="form1" method="get" action="https:　//store.shopping.yahoo.co.jp/★ショップURL★/search.html">

<p style="margin: 10px 0;width: 100%;"><input type="text" name="p" value="" placeholder="ショップ内検索" style="box-sizing: border-box;width: 100%;max-width: 300px;height: 35px;margin: 0;border: 1px solid #d8d8d8;border-radius: 3px;background: #fff;color: #333;"></p>

<p style="margin: 10px 0;width: 100%;"><span style="font-weight: bold;font-size: 90%;">商品価格</span></p>

<div style="margin-top: -10px;display: flex;justify-content: space-between;"><input type="text" name="pf" placeholder="円" style="box-sizing: border-box;width: 100%;max-width: 130px;height: 35px;margin: 0;border: 1px solid #d8d8d8;border-radius: 3px;background: #fff;color: #333;"><span style="font-weight: bold;font-size: 90%;padding: 0 5px;line-height: 30px;">～</span>

<input type="text" name="pt" placeholder="円" style="box-sizing: border-box;width: 100%;max-width: 300px;height: 35px;margin: 0;border: 1px solid #d8d8d8;border-radius: 3px;background: #fff;color: #333;"></div>

<p style="margin: 10px 0;width: 100%;"><label>

<input type="checkbox" name="uIv" value="on">

<span style="font-weight: bold;font-size: 90%;padding: 0 5px;line-height: 30px;">在庫あり</span>

</label></p>

<p style="margin: 10px 0;width: 100%;"><label>

<input type="checkbox" name="uFs" value="on">

<span style="font-weight: bold;font-size: 90%;padding: 0 5px;

line-height: 30px;">送料無料</span>

</label></p>

<p style="margin: 10px 0;width: 100%;"><input type="submit" value="商品検索" style="background: linear-gradient(#333,#000);

border: none;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;"></p>

</form>

</div>

---

★ショップURL★のところには自分のお店のショップアカウント名を入れます。上から2行目formタグ内です。こちらはお店のURLから確認できます。yahoo.co.jp/の後、もしくはgeocities.jp/の後の英文字のことを指しています。

▼

Yahooストアクリエイターには<style>タグが書けないので、html自体に直接スタイルをつけています。

設置したら見た目だけでなく、実際に検索して動作を確認してみましょう。そのとき日本語でも検索してみて、文字化けしないことも確認しましょう。

今回は以上です、お疲れ様でした☆

---

もしよろしければこちらのサービスもご検討いただけたら嬉しいです⭐️