Predictive Product Search Not Showing Up on Homepage Customized Search Section - Debut Theme

Highlighted
New Member
2 0 0

Hello!

I have added a secondary Hero Image section to my homepage that includes a search-box.liquid snippet over the image (I copy and pasted a section of code directly from the search.liquid template). However, the predictive search is not showing up when I start typing within the search bar. The predictive search for products is working everywhere else. Any input about why this is happening would be very appreciated.

Here is an image of the homepage (with the search bar overlaid):

Screen Shot 2020-09-10 at 10.19.45 AM.png

 

Here is what happens when I start typing:

Screen Shot 2020-09-10 at 10.20.51 AM.png

 

Here is what I would like to happen (I would like the products to be shown - which works everywhere else on the website):

Screen Shot 2020-09-10 at 10.20.59 AM.png

 

Here is the code within my created search-box.liquid snippet:

<form action="{{ routes.search_url }}" method="get" role="search" class="search-bar">
            <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
                />

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

 

I inserted the search-box into my "hero-search" section using the following line of code (it is the same as hero.liquid, but with this line included after line 95):

{% include 'search-box' %}

 

Thank you so much in advance!

0 Likes