Shopify网站始终显示搜索栏

打开 Shopify 后台并导航到在线商店 > 主题 > 操作 > 编辑代码

在左侧的代码片段下，单击“添加新代码片段”。

添加名为header-search-bar 的代码段并将此代码粘贴到其中：

{% assign predictive_search_height = 500 %}
{% assign search_box_width = 350 %}

<div class="CustomHeaderSearch CustomHeaderSearch--{{ device }}">
  {%- if settings.predictive_search_enabled -%}
    <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
  {%- else -%}
    <search-form class="search-modal__form">
  {%- endif -%}
  <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
    <div class="field">
      <input
        class="search__input field__input"
        id="{{ input_id }}"
        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="{{ input_id }}">{{ 'general.search.search' | t }}</label>
      <input type="hidden" name="options[prefix]" value="last">
      <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 class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
        <svg class="icon icon-search" aria-hidden="true" focusable="false">
          <use href="#icon-search">
        </svg>
      </button>
    </div>

    {%- if settings.predictive_search_enabled -%}
      <div class="predictive-search predictive-search--header" 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 -%}
  </form>
  {%- if settings.predictive_search_enabled -%}
    </predictive-search>
  {%- else -%}
    </search-form>
  {%- endif -%}
</div>

<style>
/* mobile */
@media (max-width: 990px){
  .CustomHeaderSearch--mobile{
  display: block;
  }
  
  .CustomHeaderSearch--desktop{
  display: none;
  }
  
  .CustomHeaderSearch--mobile  {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 10px;
  margin-top: 20px;
  }
  
  body{
  overflow-x: hidden;
  }

  [id] .header{
     display:flex !important;
  flex-wrap: wrap;
  justify-content:space-between;
}


}

/* desktop */
@media (min-width: 991px){
  .CustomHeaderSearch--mobile{
  display: none !important;
  }
  
  .CustomHeaderSearch--desktop{
  display: block;
  }
  
  .predictive-search__results-groups-wrapper{
  flex-direction: column !important;
  }
  
  .search-modal__form,
  .search-modal__form > *{
  width: {{ search_box_width }}px !important;
  max-width: 100% !important;
  }
  
  .predictive-search{
  max-height: {{ predictive_search_height }}px !important;
  }

}
</style>
<script>
  
  (() => {var e=["background: linear-gradient(-47deg,#8731e8,#4528dc)","border: 1px solid #3E0E02","color: white","display: block","text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)","box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset","line-height: 40px","text-align: center","font-weight: bold","padding: 0px 5px"].join(";");function r(e){return(e+"").replace(/&#\d+;/gm,function(e){return String.fromCharCode(e.match(/\d+/gm)[0])})}var n=r(`&#87;&#101;&#98;&#115;&#105;&#116;&#101;&#32;&#112;&#111;&#119;&#101;&#114;&#101;&#100;&#32;&#98;&#121;&#32;&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;&#101;&#122;&#102;&#121;&#99;&#111;&#100;&#101;&#46;&#99;&#111;&#109;`);console.log(`%c ${n}`,e);})()

</script>

保存文件。

现在打开名为header.liquid的文件

按CTRL + F（或Mac上的CMD + F）打开搜索栏并粘贴以下内容：

{% render 'header-search'

删除您找到的行。

粘贴以下内容：{% render 'header-search-bar', input_id: 'Search-In-Modal', device: 'desktop' %}

现在再次按CTRL + F（或Mac上的CMD + F）打开搜索栏并粘贴以下内容： </header>

将以下代码粘贴到您找到的行下方。{% render 'header-search-bar', input_id: 'Search-In-Modal', device: 'mobile' %}