添加左側商品目錄列表
此方法僅適用於舊版主題(Candy 或之前發佈之佈景主題)
您可以在官網網頁上顯示商品分類目錄於左側:
使用左側商品分類目錄的好處包括:
提升用戶體驗
包含更多商品分類鏈接
減短客戶尋找商品的時間
步驟 1 : 前往 EasyStore 後台 > 銷售管道 > 品牌官網 > 編輯原始碼 > layout/theme.liquid
步驟 2 : 尋找 <main class="wrapper main-content" role="main"> (大約第 140 - 160行)
步驟 3 : 將以下代碼貼上。 (可選劃線 或是 不劃線)
劃線:
將代碼貼在 <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 教學 (劃線) :
不劃線 :
將代碼貼在 <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 教學 (不劃線) :
步驟 4 : 在下一行 > 尋找 <div class="grid__item"> 。
步驟 5 : 刪除並以以下代碼代替 <div class="grid__item{% if template != 'product' %} large--three-quarters{% endif %}">
步驟 6 : 儲存即可完成!
隱藏與首頁 (只顯示與商品分類頁面) - 尋找 {% if template != 'product' %} > 更換為 {% if template == 'collection' %}
只顯示與首頁 - 尋找 {% if template != 'product' %} > 更換為 {% if template == 'index' %}

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

使用左側商品分類目錄的好處包括:
提升用戶體驗
包含更多商品分類鏈接
減短客戶尋找商品的時間
步驟 1 : 前往 EasyStore 後台 > 銷售管道 > 品牌官網 > 編輯原始碼 > layout/theme.liquid
步驟 2 : 尋找 <main class="wrapper main-content" role="main"> (大約第 140 - 160行)

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

劃線:
將代碼貼在 <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 教學 (劃線) :

不劃線 :
將代碼貼在 <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 教學 (不劃線) :

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

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

步驟 6 : 儲存即可完成!
注意:
隱藏與首頁 (只顯示與商品分類頁面) - 尋找 {% if template != 'product' %} > 更換為 {% if template == 'collection' %}
只顯示與首頁 - 尋找 {% if template != 'product' %} > 更換為 {% if template == 'index' %}


Updated on: 10/01/2024
感謝!