How to add an extra search bar section in Dawn theme?

[axminsterpewter]

I would like to add an additional search bar to my homepage as a section.

My shop has an extremely large inventory of designs, of which a customer is likely only interested in a specific one, they need to be able to easily search their family name. The search function on my store is probably more important than navigation menus. I want to make the search function as obvious and easy to use as possible. So in addition to the search icon on the header, I would like to add a larger search bar, as a section, at multiple points on the homepage.

I'll attach an example of what I'm roughly hoping to achieve.

Thank you for your time!

https://axminsterheraldry.co.uk/

 

[harivishwakarma]

send url

[axminsterpewter]

Added to original question 

[WebDeskSolution · Accepted solution]

Hello @axminsterpewter 

Once you Log in to the Admin, then process the following steps:
Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->

Step 2: Search the file main-search.liquid
Step 3: Add this json code end of the file like screenshot

JSON Code:
,
  "presets": [
    {
      "name": "custom-search",
      "category": "Custom"
    }
    ]

Step 4: Save it

Step 5: Go to Dashboard ->Online Store ->Theme-> Customize

Step 6: Click on Add section and select custom-search option and save

 
Output:

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

[Mati7777777]

Hello,

I was looking for the same thing 🙂 but can you tell me how to change the title of the bar ? Ex : Changing "Search" by something like " find what you're looking for" ?

and change the color of the section ?

Thanks !

[Jaime23]

Follow up here, has anyone figured out how to change the "search" heading to a custom title?

[Angelfab]

Hi there,

I'm stuck at step 3 as the code I have is different from what is shown in the screenshot.

I have way more lines and the "structure" looks different so I'm struggling to understand where I should paste the code.
I'm attaching 2 screenshots of what I have, one is the bottom of the main-search.liquid file, the other one is the beginning of the %schema part.
Thank you in advance for your help.

[Angelfab]

I finally sorted that out, added the code and saved.

The problem is the search section is not available from the editor.

[Angelfab]

it finally appeared after some time and a few refresh...

though instead of a search section, it adds a search results section which doesn't display (error message: Liquid error (sections/main-search line 62): Array 'search.results' is not paginateable.)

Any ideas?

[briandevore]

I am having the same issue right now as well.  Getting that liquid error, and my main-search.liquid file also has many more lines than the original solution post mentions.

[Angelfab]

Hi Brian

For the extra lines, it's just that the text is minimized in the provided screenshot. If you do the same in your code, it will end up looking exactly the same.

[puntog]

I am having the same problem, how did you add the code? I am having red erros when I hit save

 

[DaisyK]

Hi, I m trying to do this and keep getting the JSON error message. What am I doing wrong please? 

[briandevore]

Looks like you are missing a comma before your "presets" section.   Give that a try...

[DaisyK]

The comma made it save but now I get this error code when I add the section 'custom-search'

[briandevore]

Yes, I had the same liquid error.   I had to strip out some of the paging logic from the code to get it working, then paste that into the "Custom Liquid" code editor in the "Customize" theme editor. like this:



Here is the final code that I used to get it working:

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

{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
  {{ 'component-facets.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

<script src="{{ 'main-search.js' | asset_url }}" defer="defer"></script>

<style>
  .template-search__header {
    margin-bottom: 3rem;
  }

  .template-search__search {
    margin: 0 auto 3.5rem;
    max-width: 74.1rem;
  }

  .template-search__search .search {
    margin-top: 3rem;
  }

  .template-search--empty {
    padding-bottom: 18rem;
  }

  @media screen and (min-width: 750px) {
    .template-search__header {
      margin-bottom: 5rem;
    }
  }

  .search__button .icon {
    height: 1.8rem;
  }
</style>

{%- 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 -%}

  <div class="template-search{% unless search.performed and search.results_count > 0 %} template-search--empty{% endunless %} section-{{ section.id }}-padding">
    <div class="template-search__header page-width">
      <h1 class="h2 center">
        {%- if search.performed -%}
          {{- 'templates.search.title' | t -}}
        {%- else -%}
          {{- 'general.search.search' | t -}}
        {%- endif -%}
      </h1>
      <div class="template-search__search">
        {%- if settings.predictive_search_enabled -%}
          <predictive-search data-loading-text="{{ 'accessibility.loading' | t }}">
        {%- endif -%}
            <main-search>
              <form action="{{ routes.search_url }}" method="get" role="search" class="search">
                <div class="field">
                  <input
                    class="search__input field__input"
                    id="Search-In-Template"
                    type="search"
                    name="q"
                    value="{{ search.terms | escape }}"
                    placeholder="{{ 'general.search.search' | t }}"
                    {%- if settings.predictive_search_enabled -%}
                      role="combobox"
                      aria-expanded="false"
                      aria-owns="predictive-search-results"
                      aria-controls="predictive-search-results"
                      aria-haspopup="listbox"
                      aria-autocomplete="list"
                      autocorrect="off"
                      autocomplete="off"
                      autocapitalize="off"
                      spellcheck="false"
                    {%- endif -%}
                  >
                  <label class="field__label" for="Search-In-Template">{{ 'general.search.search' | t }}</label>
                  <input name="options[prefix]" type="hidden" value="last">

                  {%- if settings.predictive_search_enabled -%}
                    <div class="predictive-search predictive-search--search-template" tabindex="-1" data-predictive-search>
                      <div class="predictive-search__loading-state">
                        <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                    </div>

                    <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
                  {%- endif -%}

                  <button type="reset" class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}" aria-label="{{ 'general.search.reset' | t }}">
                    <svg class="icon icon-close" aria-hidden="true" focusable="false">
                      <use xlink:href="#icon-reset">
                    </svg>
                  </button>
                  <button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
                    <svg class="icon icon-search" aria-hidden="true" focusable="false">
                      <use xlink:href="#icon-search">
                    </svg>
                  </button>
                </div>
              </form>
            </main-search>
        {%- if settings.predictive_search_enabled -%}
          </predictive-search>
        {%- endif -%}

      </div>
      {%- if search.performed -%}
        {%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}
          {%- if search.results_count > 0 -%}
            <p role="status">{{ '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">{{ 'templates.search.no_results' | t: terms: search.terms }}</p>
        {%- endif -%}
      {%- endif -%}
    </div>
    {%- if search.performed -%}
      {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' and search.filters != empty -%}
        <facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
          <form class="facets-vertical-form" id="FacetSortForm">
            <div class="facet-filters sorting caption">
              <div class="facet-filters__field">
                <h2 class="facet-filters__label caption-large text-body">
                  <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
                </h2>
                <div class="select">
                  {%- assign sort_by = search.sort_by | default: search.default_sort_by -%}
                  <select name="sort_by" class="facet-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message">
                    {%- for option in search.sort_options -%}
                      <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
                    {%- endfor -%}
                  </select>
                  {% render 'icon-caret' %}
                </div>
              </div>
              <noscript>
                <button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
              </noscript>
            </div>

            <div class="product-count-vertical light" role="status">
              <h2 class="product-count__text text-body">
                <span id="ProductCountDesktop">
                  {%- if search.results_count -%}
                    {{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
                  {%- elsif search.products_count == search.all_products_count -%}
                    {{ 'products.facets.product_count_simple' | t: count: search.products_count }}
                  {%- else -%}
                    {{ 'products.facets.product_count' | t: product_count: search.products_count, count: search.all_products_count }}
                  {%- endif -%}
                </span>
              </h2>
              <div class="loading-overlay__spinner">
                <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </div>
          </form>
        </facet-filters-form>
      {%- endif -%}
      <div{% if section.settings.filter_type == 'vertical' %} class="facets-vertical page-width"{% endif %}>
        {%- if search.filters != empty -%}
          {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
            <aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-search-filters" data-id="{{ section.id }}">
              {% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
            </aside>
          {%- endif -%}
        {%- endif -%}
        <div class="product-grid-container" id="ProductGridContainer">
          {%- if search.results.size == 0 and search.filters != empty -%}
            <div class="template-search__results collection collection--empty{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="product-grid" data-id="{{ section.id }}">
              <div class="loading-overlay gradient"></div>
              <div class="title-wrapper center">
                <h2 class="title title--primary">
                  {{ 'sections.collection_template.empty' | t }}<br>
                  {{ 'sections.collection_template.use_fewer_filters_html' | t: link: search_url, class: "underlined-link link" }}
                </h2>
              </div>
            </div>
          {%- else -%}
            <div class="template-search__results collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="product-grid" data-id="{{ section.id }}">
              <div class="loading-overlay gradient"></div>
              <ul class="grid product-grid  grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop" role="list">
                {%- for item in search.results -%}
                  {% assign lazy_load = false %}
                  {%- if forloop.index > 2 -%}
                    {%- assign lazy_load = true -%}
                  {%- endif -%}

                  <li class="grid__item">
                    {%- 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' -%}
                        <div class="article-card-wrapper card-wrapper underline-links-hover">
                          <div class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}" style="--ratio-percent: 100%;">
                            <div class="card__content">
                              <div class="card__information">
                                <h3 class="card__heading">
                                  <a href="{{ item.url }}" class="full-unstyled-link">
                                    {{ item.title | truncate: 50 | escape }}
                                  </a>
                                </h3>
                              </div>
                              <div class="card__badge {{ settings.badge_position }}">
                                <span class="badge color-background-1">{{ 'templates.search.page' | t }}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                    {%- endcase -%}
                  </li>
                {%- endfor -%}
              </ul>
            </div>
          {%- endif -%}
        </div>
      </div>
    {%- endif -%}
  </div>

You probably can copy/paste this into your "Custom Liquid" code field, as shown on the screenshot above (left side).

Let me know if this helps!

[DaisyK]

Amazing! Thank you so so much!!!! It's working! Now I just have to figure out how to stick it into the header 🙊

[EnnJayy]

Hey @briandevore thanks so much for this custom code - One question - Where am I editing to change the title text and the text in the search box? Been playing for a while to amend it and keep breaking the code 😉

[briandevore]

@EnnJayy - those items are configuration items, not stored in code.  Go to the left nav menu > Online Store > Themes > Look for the button with 3 dots beside the "Customize" button > Edit Default Theme Content.  

From there, you can type "Search" into the search bar and look around to find what you are looking for, and edit the values.

[plahn]

Just wanted to ask....how do I remove the title above the search bar?

I only need the title to be showing inside the actual search bar

[Joe_Murray]

Hi,

We want to do the same thing: Remove the title above the search field. See image screenshot below. Can you share how you accomished this?

[kakwann]

I'm not good in code, but by try and error (and inspect tool!!!!) i removed : 

<h1 class="h2 center">
{%- if search.performed -%}
{{- 'templates.search.title' | t -}}
{%- else -%}
{{- 'general.search.search' | t -}}
{%- endif -%}
</h1>

so the title "SEARCH" is not there anymore and it seems to work just as good.

[plahn]

You are amazing. This worked perfectly!

[plahn]

Hi all!

This search bar was working well but I have noticed some issues since I implemented this search bar. The live version of the search bar is not working anymore. 

I recently uploaded roughly 800 products fro scraping another website. They are all there in my backend and configured correctly. When I preview my website from the backend and use the search function it works fine. It displays everything correctly and the count is correct.

However, if I go to the live version online the search doesn't work. When I search a very broad term like the brand name it shows no results. It does show a count on the page but that is also incorrect.

Even if I delete the custom liquid and revert back to original search bar the issue persists.

Any ideas what the issue may be?

It is as though the search results on the live page are not indexed anymore...

I searched a very specific full title and it found the correct product. I know because I deleted this product from the back end and it is not searchable anymore. 

Everything else on the live website is correct and up tp date if I make any changes to the back end.

Kind regards,

[Gab14]

Hello @briandevore. Thanks for this, I fix mine already, I only need to remove the label name and change the placeholder name, can you guide on how to do that? thanks

[JSams]

Thank you so much for this!

[puntog]

Hello, I was wondering if you could help me out, Once I add the hole code you provided, Shopify asks me to correct the errors to save personalized CSS

 

[Joe_Murray]

HI. Really appreciate your efforts here. I think the error mentioned above is due to adding the "Search Results" section instead of the "</> Custom Liquid" section. Pasting in your code worked.  Thank you.

[cmagras]

@briandevore Thank you! Your solution was the one that worked for me, and was exactly what I needed. I appreciate it.

[visualess]

This worked for me perfectly thank you! Which is the line of code to change the title of 'search'?

Thank you!!

[Joe_Murray]

Same.

[markweb123]

"I followed the steps in the 6th step, but an error occurred after adding widgets: 'Liquid error (sections/main-search line 66): Array 'search.results' is not paginatable.'"

[RA2024]

I did the solution above as I have the same request. It did add the custom search. When I went to add it to the page I got this error: 

Liquid error (sections/main-search line 30): Array 'search.results' is not paginateable.

Read a couple of articles about this, but it was pretty confusing. Any idea how to fix this?

[Angelfab]

Unfortunately like many others here, I could never make the solution work as I was always getting an error message.

I'm sharing here a work around, which doesn't strictly meet the objective of having a search bar as section, but which add a permanent search bar to the header both in desktop and mobile. Even though I would have preferred to have the bar as a section, this workaround is totally free, very easy to apply and does the job:
https://ezfycode.com/blog/search-bar-always-visible-tutorial

PS: I'm not affiliated to those guys in any way, but I use a few of their snippets (which work great with the Dawn theme)

[vincenz]

I added a custom liquid with the following code:

<div class="page-width page-width--narrow" onClick="document.querySelector('.header__search').click()">
<div style="padding:5px 10%">
<div class="smi-d-flex smi-align-items-center smi-column-gap-md smi-px-md">
<input style="margin:5px auto;width:100%;height:40px;border:none;padding:15px" type="text" placeholder="Search" value="">
<div class="smi-icons smi-d-flex smi-align-items-center">
<div class="smi-icon-search smi-lh-0">
<svg class="smi-svg-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.936 16.425c1.266-1.584 1.864-3.422 1.894-4.995.01-5.716-4.448-9.778-9.727-9.29-5.046.457-8.755 5.28-7.873 10.244 1.175 6.69 8.805 9.686 14.196 5.564.344-.264.537-.254.83.05 1.025 1.061 2.071 2.1 3.12 3.142l.528.524c.345.345.8.304.953-.071.122-.315-.03-.538-.253-.762a202.726 202.726 0 0 1-1.552-1.551c-.688-.692-1.375-1.385-2.076-2.063-.294-.284-.294-.467-.04-.792ZM3.213 10.638c-.112 4.467 3.232 7.99 7.68 8.112 4.155.101 7.732-3.33 7.843-7.534.111-4.345-3.222-7.94-7.468-8.05-4.326-.123-7.944 3.248-8.055 7.472Z" fill="#1F1F21"></path></svg>
</div>
</div>
</div>
</div>

This will display the search bar, but when you click it, it opens the actual search bar.  Not exactly right, but still functional!