【Shopify】「Dawn」の日本語設定で予測検索を実現しよう！

はじめに

ECサイトにおいて、お客様がお探しの商品を見つけてもらうことは大切なことです！
Shopifyには優秀な検索機能が実装されていますが、検索窓に入力すると画面遷移無しに検索結果が表示される予測検索があると、商品がより見つけやすくなります。

無料テーマ「Dawn」におけるデモストアにおいても、予測検索が実現されており商品が探しやすくなっています。

https://themes.shopify.com/themes/dawn/styles/default/preview

しかしながら、いざ、自身のストアで検索してみると検索窓の下にグルグルが出た後、予測検索結果が何も表示されないことがあります。

原因はストアの言語が日本語に設定されており、予測検索がサポートされている言語に日本語が入っていないためです。

予測検索の言語サポート：https://shopify.dev/docs/api/ajax/reference/predictive-search#supported-languages

ですが、諦める必要はありません。コードを編集すると予測検索を簡単に実現できます！

日本語設定で予測検索結果を出すコード編集

まずはオンラインストアのテーマからコード編集画面を表示します。

コード編集画面が表示されましたら、画面左の「templates」下にある「新しいテンプレートを追加する」をクリックしてください。

テンプレートタイプは「search」を選択し、中央のラジオボタンは「liquid」、ファイル名には「search.predictive.liquid」となるようにpredictiveと入力してください。

search.predictive.liquidには以下のコードを追加します。

<div id="shopify-section-predictive-search">
  {%- if search.performed -%}
  <div id="predictive-search-results" role="listbox">
    <div class="predictive-search__result-group">
      {%- if search.results_count > 0 -%}
        <div>
          <h2
            id="predictive-search-products"
            class="predictive-search__heading text-body caption-with-letter-spacing"
          >
            {{- 'templates.search.products' | t -}}
          </h2>
          <ul
            id="predictive-search-results-products-list"
            class="predictive-search__results-list list-unstyled"
            role="group"
            aria-labelledby="predictive-search-products"
          >
            {%- for product in search.results -%}
              <li
                id="predictive-search-option-product-{{ forloop.index }}"
                class="predictive-search__list-item"
                role="option"
                aria-selected="false"
              >
                <a
                  href="{{ product.url }}"
                  class="predictive-search__item predictive-search__item--link-with-thumbnail link link--text"
                  tabindex="-1"
                >
                  {%- if product.featured_media != blank -%}
                    <img
                      class="predictive-search__image"
                      src="{{ product.featured_media | image_url: width: 150 }}"
                      alt="{{ product.featured_media.alt }}"
                      width="50"
                      height="{{ 50 | divided_by: product.featured_media.preview_image.aspect_ratio }}"
                    >
                  {%- endif -%}
                  <div class="predictive-search__item-content{% unless settings.predictive_search_show_vendor or settings.predictive_search_show_price %} predictive-search__item-content--centered{% endunless %}">
                    {%- if settings.predictive_search_show_vendor -%}
                      <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
                      <div class="predictive-search__item-vendor caption-with-letter-spacing">
                        {{ product.vendor }}
                      </div>
                    {%- endif -%}
                    <p class="predictive-search__item-heading h5">{{ product.title | escape }}</p>
                    {%- if settings.predictive_search_show_price -%}
                      {% render 'price', product: product, use_variant: true, show_badges: false %}
                    {%- endif -%}
                  </div>
                </a>
              </li>
            {%- endfor -%}
          </ul>
        </div>
      {%- endif -%}
    </div>

    {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}

    <div id="predictive-search-option-search-keywords" class="predictive-search__search-for-button">
      <button
        class="predictive-search__item predictive-search__item--term link link--text h5 animate-arrow"
        tabindex="-1"
        role="option"
        aria-selected="false"
      >
        <span data-predictive-search-search-for-text>
          {{- 'templates.search.search_for' | t: terms: search.terms -}}
        </span>
        <span class="svg-wrapper">
          {{- 'icon-arrow.svg' | inline_asset_content -}}
        </span>
      </button>
    </div>
  </div>

  <span class="hidden" data-predictive-search-live-region-count-value>
    {% liquid
      assign total_results = search.results_count | plus: 0
      if total_results == 0
        echo 'templates.search.no_results' | t: terms: search.terms
      else
        echo 'templates.search.results_with_count' | t: count: total_results | append: ': '
      endif
    %}
  </span>
  {%- endif -%}
</div>

続いて、assets内にあるpredictive-search.jsを編集します。
179行目のソースコードを下のように編集してください。
編集前

    fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&section_id=predictive-search`, {

編集後

　　fetch(`${window.Shopify.routes.root}search?type=product&view=predictive&q=${encodeURIComponent(searchTerm)}`, {

編集後は画面右上の保存ボタンをクリックしてください。

予測検索の確認

日本語設定のまま、検索窓に入力して確認してみます。
今回はケーキ屋さんのデモストアで「ケーキ」と入力してみます。

実際の検索結果ページでは下のようになり、同じ商品が予測検索に表示されていることが分かります。

終わりに

今回は Shopify の無料テーマ「Dawn」にて日本語設定で予測検索を実現する方法ついて解説しました。

予測検索を実現することで、お客様が欲しい商品に素早くアクセスしてもらい購買につなげることができます。ぜひ、お試しください。

株式会社Tsuzucleでは、Shopifyに関する技術サポートを提供しています。ご相談は、下記のリンクよりお気軽にお問い合わせください。
お問い合わせ：https://tsuzucle.com/pages/contact
メールアドレス：[e-mail]
Xアカウント：https://x.com/tsuzucle