Display search bar results on top of products

[ljonker1]

Hi,

I have made a custom search bar section for my website to make inserting a search bar within the “customize” environment. It works for the most past, however, when I type in the search keywords, the predictive search container appears under the product grid (see image). How do I overlay the predictive search results over other elements? The search bar section code is mentioned below. The link to my webshop is https://bos-homogenisers.com/collections/flat-gasket

The code of my search bar section (custom-search-bar.liquid):

{%- style -%}
  .section-welcome-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (max-width: 749px) {
    .section-welcome-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<section class="welcome" id="welcome">
<div class="content-container">
{% include 'search-bar' %}
</div>

</section>
{% schema %}
{
"name": "Search bar", // Section name
"settings": [
      {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "padding-top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "padding-bottom",
      "default": 52
    }
],
"presets": [
{
"name": "Search bar",
"category": "ADVANCED LAYOUT"
}
]
}
{% endschema %}

and the included ‘search-bar.liquid’:

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
  {{ 'component-facets.css' | asset_url | stylesheet_tag }}
  
{%- endif -%}

{%- liquid
  assign sort_by = search.sort_by | default: search.default_sort_by
  assign terms = search.terms | escape
  assign search_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
-%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

    

      {%- if settings.predictive_search_enabled -%}
        
      {%- endif -%}

    

    {%- if search.performed -%}
      {%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}
        {%- if search.results_count > 0 -%}
          

{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}

        {%- endif -%}
      {%- endunless -%}
      {%- if search.results_count == 0 and search.filters == empty -%}
        

{{ 'templates.search.no_results' | t: terms: search.terms }}

      {%- endif -%}
    {%- endif -%}
  

  {%- if search.performed -%}
    {%- if search.filters != empty -%}
      {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
        
          {% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices %}
        

      {%- endif -%}
    {%- endif -%}
    
      {%- if search.results.size == 0 and search.filters != empty -%}
        

          

          
            ## 
              {{ 'sections.collection_template.empty' | t }}

              {{ 'sections.collection_template.use_fewer_filters_html' | t: link: search_url, class: "underlined-link link" }}
            
          

        

      {%- else -%}
        {% paginate search.results by 24 %}
          
            

            
              {%- for item in search.results -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- endif -%}

                - {%- case item.object_type -%}
                      {%- when 'product' -%}
                        {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
                        {% render 'card-product',
                          card_product: item,
                          media_aspect_ratio: section.settings.image_ratio,
                          show_secondary_image: section.settings.show_secondary_image,
                          show_vendor: section.settings.show_vendor,
                          show_rating: section.settings.show_rating,
                          lazy_load: lazy_load
                        %}
                      {%- when 'article' -%}
                        {% render 'article-card',
                          article: item,
                          show_image: true,
                          show_date: section.settings.article_show_date,
                          show_author: section.settings.article_show_author,
                          show_badge: true,
                          media_aspect_ratio: 1,
                          lazy_load: lazy_load
                        %}
                      {%- when 'page' -%}
                      

                        

                            

                              

                                  ### 
                                  
                                      {{ item.title | truncate: 50 | escape }}
                                  
                                
                              

                              
                                  {{ 'templates.search.page' | t }}
                              

                        

                      

                    {%- endcase -%}
                

              {%- endfor -%}
            

            {%- if paginate.pages > 1 -%}
              {% render 'pagination', paginate: paginate %}
            {%- endif -%}
          

        {% endpaginate %}
      {%- endif -%}
    

  {%- endif -%}

Thanks!

[GemPages]

Hello @ljonker1 ,

It’s the GemPages Support Team and we are glad to assist you today!

I checked your website but I can’t found any issue with the search bar

Did you fix it?

Best regards,
GemPages Support Team

[ljonker1]

Hi @GemPages ,

I accidentally forgot to make the search bar visual on the website so the mentioned element was not displayed on the live site. It is now. The search bar on the site header works as it should, I am having issues with the search bar placed under the “Gaskets” collection header, which is a custom made section.

[ljonker1]

For further people that have this problem: I fixed it! The parent div of the predictive search container has “isolate” as one of its classes, which has a default defined z-index of 0 in dawn theme. This is the same as the default z-index of the product grid containers en html places the bottom element over an element above in the stacking order. I changed the isolate z-index to 1, and now it works.