How can I modify the predictive search bar to show only articles?

Store Design
,
1

Hey Guys, I would like to know how to modiify the predictive search results by changing the suggestions, products and pages with articles or blog posts only. Or is it even possible?
Something like this,

alicanteallan7_0-1692228722498.png
alicanteallan7_0-1692228722498.png390Ă—540 17.1 KB

But instead of suggestions, products and pages, articles will show. Thanks in advance.

1 Like
2

Hi @alicanteallan7 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

Predictive search provides suggested outcomes while you type, aiding customers in honing their searches without the need to navigate to a separate search results page. This enables them to swiftly explore your store by previewing leading outcomes related to suggested search queries, products, collections, and other content.

You have the ability to tailor the functioning of predictive search using Search & Discovery app

Best regards,

Anthony

3

Hi @alicanteallan7

Please follow the instructions below to achieve the said query.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Section” folder, click on “predictive-search.liquid” file.
  • Replace the whole code with the code below
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{%- if predictive_search.performed -%}
  {% assign first_column_results_size = predictive_search.resources.queries.size
    | plus: predictive_search.resources.collections.size
    | plus: predictive_search.resources.pages.size
    | plus: predictive_search.resources.articles.size
  %}
  
    {%- if first_column_results_size > 0 or predictive_search.resources.products.size > 0 -%}
      

    {%- endif -%}
    {%- if first_column_results_size > 0 -%}
      

    {%- endif -%}
    {%- if predictive_search.resources.queries.size > 0 -%}
      

        ## 
          {{- 'templates.search.suggestions' | t -}}
        
        
          {%- for query in predictive_search.resources.queries -%}
            - {{ query.styled_text }}
                  

                

              
            

          {%- endfor -%}
          {% comment %}
            {%- for collection in predictive_search.resources.collections -%}
              - {{ collection.title }}

                  

                
              
            {%- endfor -%}
          {% endcomment %}
        

      

    {%- endif -%}
    {%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
      
        ## 
          {{- 'templates.search.pages' | t -}}
        
        
          {%- for page in predictive_search.resources.pages -%}
            - {{ page.title }}

                

              
            

          {%- endfor -%}
          {%- for article in predictive_search.resources.articles -%}
            - {{ article.title }}

                

              
            
          {%- endfor -%}
        

      

    {%- endif -%}
    {%- if first_column_results_size > 0 -%}
      

    {%- endif -%}
    {%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
      
        {%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
          

            ## 
              {{- 'templates.search.pages' | t -}}
            
            
              {%- for page in predictive_search.resources.pages -%}
                - {{ page.title }}

                    

                  
                

              {%- endfor -%}
              {%- for article in predictive_search.resources.articles -%}
                - {{ article.title }}

                    

                  
                
              {%- endfor -%}
            

          

        {%- endif -%}
      

    {%- endif -%}
    {%- if first_column_results_size > 0 -%}
      

    {%- endif -%}

    
      
    

    
      
    

  

  
    {% liquid
      assign total_results = predictive_search.resources.products.size | plus: first_column_results_size
      if total_results == 0
        echo 'templates.search.no_results' | t: terms: predictive_search.terms
      else
        echo 'templates.search.results_with_count' | t: count: total_results | append: ': '
        if predictive_search.resources.queries.size > 0
          assign count = predictive_search.resources.queries.size | plus: predictive_search.resources.collections.size
          echo 'templates.search.results_suggestions_with_count' | t: count: count | append: ', '
        endif
        if predictive_search.resources.pages.size > 0
          assign count = predictive_search.resources.pages.size | plus: predictive_search.resources.articles.size
          echo 'templates.search.results_pages_with_count' | t: count: count | append: ', '
        endif
      endif
    %}
  
{%- endif -%}
  • Save

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
4

Thanks for this, though It didn’t solve my problem but it gave me a headstart. Appreciate it.

5

Can you share your solution, also looking to make UI updates to the same section. Appreciate any insight