How can I modify the search results page when no result is found?

How can I modify the search results page when no result is found?

amazezones
Explorer
82 0 13

Hello

 

I want to change search page from 

 

Screenshot 2023-12-30 at 4.32.50 PM.png

 

to 

 

Screenshot 2023-12-30 at 4.32.59 PM.png

 

if no result is found

 

 

the code is

 

{% 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
%}
<div id="predictive-search-results" role="listbox">
{%- if first_column_results_size > 0 or predictive_search.resources.products.size > 0 -%}
<div id="predictive-search-results-groups-wrapper" class="predictive-search__results-groups-wrapper row{% unless predictive_search.resources.products.size > 0 %} predictive-search__results-groups-wrapper--no-products{% endunless %}{% unless predictive_search.resources.queries.size > 0 or predictive_search.resources.collections.size > 0 %} predictive-search__results-groups-wrapper--no-suggestions{% endunless %}">
{%- endif -%}
{%- if predictive_search.resources.queries.size > 0 or predictive_search.resources.collections.size > 0 -%}
<div class="col-12 col-lg-4">
<h2 id="predictive-search-queries" class="predictive-search__heading h5 mb-9 mb-lg-15">
{{- 'general.search.suggestions' | t -}}
</h2>
<ul id="predictive-search-results-queries-list" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-queries">
{%- for query in predictive_search.resources.queries -%}
<li id="predictive-search-option-query-{{ forloop.index }}" class="predictive-search__list-item d-block" role="option" aria-selected="false">
<a href="{{ query.url }}" class="predictive-search__item d-block" tabindex="-1">
<div class="predictive-search__item-content predictive-search__item-content--centered">
<p class="predictive-search__item-heading predictive-search__item-query-result m-0" aria-label="{{ query.text }}"><span>{{ query.styled_text }}</span></p>
</div>
</a>
</li>
{%- endfor -%}
{%- for collection in predictive_search.resources.collections -%}
<li id="predictive-search-option-collection-{{ forloop.index }}" class="predictive-search__list-item d-block" role="option" aria-selected="false">
<a href="{{ collection.url }}" class="predictive-search__item d-block" tabindex="-1">
<div class="predictive-search__item-content predictive-search__item-content--centered">
<p class="predictive-search__item-heading m-0"><span>{{ collection.title }}</span></p>
</div>
</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- if predictive_search.resources.products.size > 0 -%}
<div class="col-12 col-lg-4">
<h2 id="predictive-search-products" class="predictive-search__heading h5 mb-9 mb-lg-15">
{{- 'general.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 predictive_search.resources.products -%}
<li id="predictive-search-option-product-{{ forloop.index }}" class="predictive-search__list-item" role="option" aria-selected="false">
{% include 'product-search-2' %}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- if predictive_search.resources.articles.size > 0 or predictive_search.resources.pages.size > 0 -%}
<div class="col-12 col-lg-4">
<h2 id="predictive-search-pages-mobile" class="predictive-search__heading h5 mb-9 mb-lg-15">
{{- 'general.search.pages' | t -}}
</h2>
<ul id="predictive-search-results-pages-list-mobile" class="predictive-search__results-list list-unstyled" role="group" aria-labelledby="predictive-search-pages-mobile">
{%- for page in predictive_search.resources.pages -%}
<li id="predictive-search-option-page-mobile-{{ forloop.index }}" class="predictive-search__list-item d-block" role="option" aria-selected="false">
<a href="{{ page.url }}" class="predictive-search__item d-block" tabindex="-1">
<div class="predictive-search__item-content predictive-search__item-content--centered">
<p class="predictive-search__item-heading m-0"><span>{{ page.title }}</span></p>
</div>
</a>
</li>
{%- endfor -%}
{%- for article in predictive_search.resources.articles -%}
<li id="predictive-search-option-article-mobile-{{ forloop.index }}" class="predictive-search__list-item d-block" role="option" aria-selected="false">
<a href="{{ article.url }}" class="predictive-search__item d-block" tabindex="-1">
<div class="predictive-search__item-content predictive-search__item-content--centered">
<p class="predictive-search__item-heading m-0"><span>{{ article.title }}</span></p>
</div>
</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- if first_column_results_size > 0 or predictive_search.resources.products.size > 0 -%}
</div>
{%- endif -%}
</div>

{%- assign assign total_results = predictive_search.resources.products.size | plus: first_column_results_size -%}
<div id="predictive-search-option-search-keywords" class="predictive-search__search-for-button search__view-all px-10 p-lg-0{% if total_results > 0 %} mt-20{% endif %} mt-lg-20">
<button
class="predictive-search__item predictive-search__item--term btn--unstyled btn-link"
tabindex="-1"
role="option"
aria-selected="false"
>
<span data-predictive-search-search-for-text>{{ 'general.search.search_for' | t: terms: predictive_search.terms }}</span>
</button>
</div>

<span class="d-block px-10 p-lg-0{% if total_results > 0 %} mt-20{% endif %} mt-lg-20 d-none-important" data-predictive-search-live-region-count-value>
{% liquid
if total_results == 0
echo 'general.search.no_results_html' | t: terms: predictive_search.terms
else
echo 'general.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 'general.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 'general.search.results_pages_with_count' | t: count: count | append: ', '
endif
if predictive_search.resources.products.size > 0
echo 'general.search.results_products_with_count' | t: count: predictive_search.resources.products.size
endif
endif
%}
</span>
{%- endif -%}

Reply 1 (1)

devmont-digital
Shopify Partner
132 31 34

Hi @amazezones,

 

Follow the steps below:

Go to "Online Store."
Edit Code.
Find the "main-search.liquid" file.


Step 1: Find the if condition ('{%- if search.performed -%}') for search.performed and replace its syntax.

{%- if search.performed -%}
{%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}
{%- if search.results_count > 0 -%}
<p role="status" class="center">
{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}
</p>
{%- endif -%}
{%- endunless -%}
{%- if search.results_count == 0 and search.filters == empty -%}
<p role="status" class="h2 center">
{{ 'templates.search.no_results' | t: terms: search.terms -}}
<br>
{{ 'templates.search.no_result_msg_two' | t: terms: search.terms }}
</p>
{%- endif -%}
{%- endif -%}

 

Step 2: Change the location of this code. Find the <div class="template-search__search"> and paste the above code.

 

Step 3: Find the "en.default.json" file and, after locating "no_result," add the following syntax:

"no_result_msg_two": "Try a new search or use our suggestion",

 

Last Step:

1. Go to "Online Store."
2. Click on the three dots and select "Edit Default Theme Content."
3. Then click on the "Templates" tab.
4. Change the text for the first line in the "No results" section to "Sorry, no matches were found."
5. Change the text for the second line in the "No result msg two" section to "Try a new search or use our suggestion."

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io