ページの任意の場所に検索窓を埋め込むことはできますか？

[クロスフィールド]

表題の通りですが、商品詳細ページや任意制作のページ、ブログの文面上などに検索窓を埋め込みたいのです。

検索をグレードアップするアプリは色々試しましたが、埋め込みようのコードを提供するものは見つかりませんでした。

Googleカスタム検索を埋め込むのもてだとは思いますが、ベストなUXとは思えません。どなたか詳しい方、お助けください！

[junichiokamura]

公式にはないですが、おっしゃる通りスクリプトを埋め込むことは可能なので、たとえば、search.liquidの検索ページの内容を参考に作ってみるなどはどうでしょう？

[クロスフィールド]

コメントありがとうございます。もう少し詳しくわかりやすく教えていただけないでしょうか。

---

@junichiokamura さんは書きました:

公式にはないですが、おっしゃる通りスクリプトを埋め込むことは可能なので、たとえば、search.liquidの検索ページの内容を参考に作ってみるなどはどうでしょう？

---

[junichiokamura]

すいません、search.liquidは、検索結果なので、検索窓自体は共通部分のtheme.liquidの内部かと思いますが、「search」などでヒットするコードの場所をそのまま表示したい箇所テーマファイルにコピーしてみてはどうかと思ったのですが、そもそも

> 任意の場所に検索窓を埋め込む

この意図がわからないのですが、Shopifyの標準テンプレートは、上記のように共通ヘッダに常に検索窓が表示されるので、何もしなくても全画面に検索窓が出ている状態ですが、具体的にどういったことをされたいのでしょうか？　１つの画面に２つ検索窓があるとわかりずらいかと思いまして。

[junichiokamura · Accepted solution]

ちなみにもう１つテーマとは全く関係ない解決方法として検索のURLは

https://SHOP_ID.myshopify.com/search?q=検索ワード   

のように決まっているので、単純にEnterでValueを上記に渡して遷移するようなtext inputとJavaScriptを書いて任意の場所に埋め込めば良いかと思いますがいかがでしょうか？

[クロスフィールド]

ありがとうございます。多分コレで解決だと思います。

JSは詳しくないのですが、少し調べて下記のコードをページに入れたら機能しました。

もし問題があれば教えていただけますと助かります！

<form action="/search" method="get">
<input type="text" name="q"> <input type="submit" value="検索">
</form>

---

@junichiokamura さんは書きました:

ちなみにもう１つテーマとは全く関係ない解決方法として検索のURLは

https://SHOP_ID.myshopify.com/search?q=検索ワード   

のように決まっているので、単純にEnterでValueを上記に渡して遷移するようなtext inputとJavaScriptを書いて任意の場所に埋め込めば良いかと思いますがいかがでしょうか？

---

[クロスフィールド]

コメントありがとうございます。ページの任意の場所に検索窓を埋め込む理由は下記になります。

現在商品数が約1500あるサイトを運営していまして、広告のランディングページのわかりやすいところに検索窓を置いて、商品検索をコンバージョンとしたキャンペーンを実施したいと考えています。

従いまして、左上の検索窓とは別に、ページの中央に検索を促すフレーズを添えて入力欄を設けたいと思っています。

何か良い方法はありますでしょうか？