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

Store Design
,

Topic summary

Goal: add a prominent search bar as a reusable homepage section in Shopify’s Dawn theme.

Proposed method:

  • Edit main-search.liquid and add a JSON schema “presets” entry so it can be added as a section via Customize.

Common issues and fixes:

  • Liquid error: “Array ‘search.results’ is not paginateable/paginatable” when using the main-search section. Cause: the search template’s pagination logic isn’t valid inside a section. Workaround: use a “Custom Liquid” section with a simplified search code that removes pagination/facets; several users confirm this works.
  • JSON save errors: usually a missing comma before the presets block.
  • Adding the wrong section: some added “Search results” instead of “</> Custom Liquid.” Pasting the simplified code into “Custom Liquid” resolved errors.

Customization tips:

  • Change heading/placeholder text via Online Store > Themes > … > Edit default theme content (translations).
  • Remove the visible “Search” title by deleting the H1 block in the code.
  • Alternatives: make the header search always visible (external tutorial) or add a faux input that triggers the header search on click.

Unresolved:

  • One report of live search/indexing mismatch after importing ~800 products (preview OK, live not). No solution posted.

Status: No canonical fix for turning main-search into a stable section; reliable approach is a Custom Liquid section or header-based tweaks. Code snippets/screenshots are central.

Summarized with AI on December 13. AI used: gpt-5.
15

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
Screen Shot 2023-06-29 at 8.39.26 AM.png2902×1580 542 KB

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 }}
  
{%- 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 search.performed -%}
          {{- 'templates.search.title' | t -}}
        {%- else -%}
          {{- 'general.search.search' | t -}}
        {%- endif -%}
      
      
        {%- 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 section.settings.enable_sorting and section.settings.filter_type == 'vertical' and search.filters != empty -%}
        
      {%- endif -%}
      

    {%- endif -%}

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!

9 Likes