Re: Add search bar as a section - Dawn Theme

Solved

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

axminsterpewter
Visitor
2 0 3

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/

 

8xV30.jpg

Accepted Solution (1)

WebDeskSolution
Shopify Partner
181 42 49

This is an 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

WebDeskSolution_0-1673620041138.png

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

 

 

Step 4: Save it


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

WebDeskSolution_1-1673620041172.png

 

 

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

 

WebDeskSolution_2-1673620041294.png

 

 
Output:

WebDeskSolution_3-1673620041125.png

 

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.

Thank You,


WebDesk Solution Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency | Call Us 877.536.3789


Location: 150 King St. W. Toronto, ON M5H 1J9

View solution in original post

Replies 34 (34)

harivishwakarma
Shopify Partner
322 46 55

send url

 

banned
axminsterpewter
Visitor
2 0 3

Added to original question 

WebDeskSolution
Shopify Partner
181 42 49

This is an 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

WebDeskSolution_0-1673620041138.png

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

 

 

Step 4: Save it


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

WebDeskSolution_1-1673620041172.png

 

 

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

 

WebDeskSolution_2-1673620041294.png

 

 
Output:

WebDeskSolution_3-1673620041125.png

 

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.

Thank You,


WebDesk Solution Support Team
Get a Free Quote | Email | Shopify Partner | Shopify Development Agency | Call Us 877.536.3789


Location: 150 King St. W. Toronto, ON M5H 1J9

Mati7777777
Tourist
7 1 2

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
New Member
9 0 0

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

Angelfab
Excursionist
37 1 15

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.Screenshot 2023-05-26 at 11.25.15 AM.pngScreenshot 2023-05-26 at 11.24.49 AM.png

Angelfab
Excursionist
37 1 15

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

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

Angelfab
Excursionist
37 1 15

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
Tourist
4 0 13

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
Excursionist
37 1 15

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
Visitor
2 0 0

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

Screen Shot 2023-12-10 at 23.38.45.png

DaisyK
Tourist
7 0 3

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

DaisyK_0-1688033861131.png

 

briandevore
Tourist
4 0 13

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

DaisyK
Tourist
7 0 3

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

DaisyK_0-1688040804292.png

 

briandevore
Tourist
4 0 13

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:

Screen Shot 2023-06-29 at 8.39.26 AM.png

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
Tourist
7 0 3

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

EnnJayy
Tourist
9 0 3

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
Tourist
4 0 13

@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
Tourist
24 0 3

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
Tourist
4 0 0

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?

 

 

remove title above search.jpg

kakwann
Visitor
1 0 1

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.

kakwann_0-1711786252664.png

 



plahn
Tourist
24 0 3

You are amazing. This worked perfectly!

plahn
Tourist
24 0 3

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
Shopify Partner
3 0 0

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
Visitor
1 0 1

Thank you so much for this!

puntog
Visitor
2 0 0

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

Screen Shot 2023-12-11 at 00.03.15.png

Joe_Murray
Tourist
4 0 0

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
Visitor
3 0 0

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

visualess
Excursionist
42 0 11

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

 

Thank you!!

Joe_Murray
Tourist
4 0 0

Same.

markweb123
Shopify Partner
3 0 0

"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
Shopify Partner
1 0 0

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
Excursionist
37 1 15

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
Shopify Partner
16 0 5

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!