shopifyのDebutテーマには、標準でヘッダー部分に検索窓がありますよね。
ただ、PCやスマホで商品ページを見たときに、ヘッダー部分にしか検索窓がないので、直接商品を検索したい人にとっては、少し不便だと思います。
そこで、今回は、検索窓を商品ソートがある場所に追加する方法について解説していきます。
このカスタマイズは、shopifyの無料テーマ、「Debut」に対してのカスタマイズですが、おそらく他テーマで同様の手順を踏めば、実装することが可能だと思います。
カスタマイズの際は、必ずテーマのバックアップをとってからにしてくださいね。
ヘッダーの検索窓のコードをコピペ
テーマのコード編集画面に移動して、search.liquidファイルに移動してください。
search.liquidファイルの、21行目〜53行目までの、コードをコピー。コピーすべきコードを下記にも記載しているので、よければお使いください。記載してある行数が絶対に同じとは限らないので、下記のコードも必ず確認してください。
<form action="{{ routes.search_url }}" method="get" role="search" class="search-form search-page-form">
<div class="input-group input-group--nowrap">
<div class="input-group__field input-group__field--connected search-form__input-wrapper">
<input
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.placeholder' | t }}"
role="combobox"
aria-autocomplete="list"
aria-owns="predictive-search-results"
aria-expanded="false"
aria-label="{{ 'general.search.placeholder' | t }}"
aria-haspopup="listbox"
class="search-form__input"
data-search-page-predictive-search-input
data-base-url="{{ routes.search_url }}"
/>
<input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />
<button type="reset" class="search-form__clear-action" aria-label="{{ 'general.search.clear_search_term' | t }}" data-search-page-predictive-search-clear>
{% include 'icon-close' %}
</button>
<div class="predictive-search-wrapper" data-predictive-search-mount="default"></div>
</div>
<button type="submit" class="search-form__connected-submit" aria-label="{{ 'general.search.submit' | t }}" data-search-page-predictive-search-submit>
{% include 'icon-search' %}
</button>
</div>
</form>コピーしたコードを、collection-template.liquidの中のfilters-toolbar__item-wrapperクラスを持ったdivタグ(開始タグは93行目あたり)の終了タグの直前に貼り付けます。
ブラウザで表示を確認すると、商品ソート機能の一番右側に、検索窓が表示されているかと思います。
上の画像ではオリジナルCSSを適用しているので、縦方向に中央揃えになっていますが、皆さんのパソコン上では、検索窓が縦方向に中央揃えにはなっていないかと思います。
また、このままではスマホ表示のレイアウトも崩れてしまうので、整えていきましょう。
追加した検索窓の見た目を整える
先程、付け足したコードに下記のコードを付け足します。
<div class="toolbar-form">
先程コピーしたコード
</div>次に、theme.cssファイルの一番下に、下記のコードを追記します。このコードを記載すると、画像のように、スマホの際にも見た目が崩れることなく、綺麗に表示されます。（「表示件数」のカスタマイズについてはまた別の記事でまとめます）
/* 追加検索窓のCSS */
.toolbar-form {
display: flex;
justify-content: center;
align-items: center
}
/* スマホ表示の際に、ツールバーを二段組にする */
@media (max-width: 700px) {
.filters-toolbar__item-wrapper {
display: grid;
grid-template-columns: 171px 171px;
gap: 10px;
}
}
/* 検索窓の領域を広げる */
.search-form__input {
padding-right: 5px;
}
/* コレクションツールバー左マージン */
@media only screen and (min-width: 750px) {
.filters-toolbar__item-child:not(:last-child) {
margin-right: 3rem;
}
}もし、上手くいかなかったりしたときはご連絡ください。