此篇文章將教導如何移除官網的搜尋欄和搜尋圖標，部分主題顯示搜尋欄，部分則僅顯示搜尋圖示，依主題設計而定。

目錄：

🔵如何移除官網搜尋欄

🔵如何移除官網搜尋圖標

🔵如何移除官網搜尋圖標（Muse 之前發佈之新版佈景主題）

🔵如何移除官網搜尋圖標（ Muse 和 Essence 主題）

🔵如何移除官網搜尋圖標（ 舊版主題）

如何移除官網搜尋欄

如果你使用的新版主題（Aroma 或其後發佈之佈景主題）有搜尋欄，你可以參考這篇文章如何移除官網的搜尋欄。

不是全部新版主題都會有這個搜尋欄，如：Essence、Muse、Scents、Aroma 、Mels 、Freshbit、Marshmallow、Pastries、Brew 等等。

步驟一：編輯原始碼

1. EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → header.liquid 文件 → 刪除以下代碼

步驟二：點擊儲存，完成

設定效果：

如何移除官網搜尋圖標

如果你使用的新版主題（Aroma 或其後發佈之佈景主題）有搜尋圖標，你可以參考這篇文章如何移除官網的搜尋圖標。

👉 Muse 之前發佈之新版佈景主題

1. EasyStore 後台 → 銷售管道 → 品牌官網 → 編輯原始碼 → header.liquid 文件 → 搜尋 <details-modal class="header__search">

2. 於 <details-modal class="header__search"> 裡，在 search 的後方加入 `hide `

👉 Muse 和 Essence 主題

1. header.liquid 文件 → 搜尋 {% include 'search-modal' %} （ {% include 'search-modal' %} 會出現在兩個位置）

2. 找第二個 {% include 'search-modal' %} 後 → 移除以下代碼

<div class="medium-hide small-hide">
          {% include 'search-modal' %}
        </div>

👉 舊版主題（Candy 或之前發佈之主題）

1. 移除網頁版搜尋圖標

前往 header-bar.liquid 原始碼文件 → 移除以下代碼

 <div class="header-bar__module">
                      {% include 'search-bar' with 'header' %}
                    </div>

2. 移除手機版搜尋圖標

前往 mobile-nav.liquid 原始碼文件 → 移除以下代碼

<li class="mobile-nav__link header-bar__search-wrapper">
    {% if settings.header_search_enable %}
    <div class="header-bar__module header-bar__search mobile-nav_search">
      {% include 'search-bar' with 'mobile-nav' %}
    </div>
    {% endif %}
  </li>

設定效果：

更新時間： 31/07/2025