【 コピペでOK!】shopifyで商品ソートの欄に検索窓を表示させる方法

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;
  }
}

もし、上手くいかなかったりしたときはご連絡ください。

ECサイト制作の最新記事4件