> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 添加左側商品目錄列表

||| 此方法僅適用於舊版主題（Candy 或之前發佈之佈景主題）

您可以在官網網頁上顯示商品分類目錄於左側：

 

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_ut8y1.png)

 

使用左側商品分類目錄的好處包括：

* 提升用戶體驗

* 包含更多商品分類鏈接

* 減短客戶尋找商品的時間

 

 



 

 

步驟 1 : 前往 EasyStore 後台 > 銷售管道 > 品牌官網 > 編輯原始碼 > layout/theme.liquid

 

步驟 2 : 尋找 <main class="wrapper main-content" role="main">  (大約第 140 - 160行)  

 
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_m1z7pb.png)



步驟 3 : 將以下代碼貼上。 (可選劃線 或是 不劃線)

 

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1w8ryos.png)

 

 

劃線：

 

將代碼貼在 <div class="grid"> 之後。

  ```
  {% if template != 'product' %}
 <div class="grid__item medium-down--hide large--one-quarter">
 <hr>
       <nav>
          <b>Category<br></b>    
  {% for link in contents.catalog.links %}
         <a href="{{link.url}}"><span style="font-size: 0.75em;">{{link.title}}</span></a><br>
         <hr style="margin: 0;">
  {% endfor %}
</nav>
  </div>
      {% endif %}
```

 

GIF 教學 (劃線) : 


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/side-bar-with-underline_3ow46.gif)
 

不劃線 : 

將代碼貼在 <div class="grid"> 之後。

 

```
{% if template != 'product' %}
       <div class="grid__item medium-down--hide large--one-quarter">
         <hr class="hr--small hr--clear">
       <nav>
          <font size="5"> <hr><b>Category<br></b></font>    
  {% for link in contents.catalog.links %}
         <a href="{{link.url}}">{{link.title}}</a><br>
  {% endfor %}
         <hr>
</nav>
      </div>
      {% endif %}
```

 

GIF 教學 (不劃線) : 


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/side-bar-without-underline_1qsoigg.gif)

步驟 4 : 在下一行 > 尋找 <div class="grid__item"> 。

 
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1czpepu.png)


步驟 5 : 刪除並以以下代碼代替  <div class="grid__item{% if template != 'product' %} large--three-quarters{% endif %}">

 
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1pau6bn.png)


步驟 6 : 儲存即可完成！

 


###### 注意: 

 

隱藏與首頁 (只顯示與商品分類頁面) - 尋找 {% if template != 'product' %} > 更換為 {% if template == 'collection' %}

 

只顯示與首頁 - 尋找 {% if template != 'product' %} > 更換為 {% if template == 'index' %}

 
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1pq88up.png)



![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1pzldeg.png)