> ## 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).

# 【官網設計】商品頁面顯示商品品牌 & 商品標籤




商家可以在商品頁面上，添加商品品牌 & 商品標籤顯示，讓客戶更輕鬆地瀏覽查看該商品的相關資訊，您可以根據以下步驟開始設定。

 



⚠️ 注意事項 : 更換佈景主題之後，需重新編輯原始碼。


# 1. 添加商品品牌

**此步驟僅適用於 Candy 或之前發佈之佈景主題（舊版主題）**

商家可以將商品品牌顯示在商品名稱上方：


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image-41_d2obmz.png)

1. 前往 EasyStore 後台 → 商品管理 → 所有商品 → 點擊商品進行編輯 → 商品品牌 → 輸入商品品牌 → 儲存


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image-41_m8thfn.png)
 

2.  EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼 

 

3. 選擇 product.liquid 檔案 → 尋找 {{ product.title }}  → 在 {{ product.title }} 之前或之後 → 貼上以下代碼

```html
{% if product.brands[0] %}
<h4 itemprop="brand">
{{ product.brands[0] }}
</h4>
{% endif %}
```
 
 


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image-41_1osb7ta.png)
4. 點擊儲存，完成！

 



 

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image-41_1wspjd8.png)


 💡 小提醒：若是使用 Aroma 或其後發佈之佈景主題（新版主題），可直接在佈景主題設定裡顯示商品品牌


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image-41_manmpd.png)



# 2. 添加商品標籤

1. 前往 EasyStore 後台 → 商品管理 → 所有商品 → 點擊商品進行編輯 → 商品標籤 → 輸入商品標籤 → 儲存




![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image-41_wj5qyn.png)

2.  EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼 

 此步驟會根據新版或舊版主題而有不一樣的原始碼設定，請參考以下：

**如果是 Candy 或之前發佈之佈景主題** → 選擇 product.liquid 檔案 → 貼上以下代碼 → 儲存

```
{% for tag in product.tags %}
﻿<span> {{tag}} </span>
﻿{% endfor %}
```

 

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

 
**如果是 Aroma 或更新佈景主題**，則前往 main-product.liquid 文件 →  貼到 </product-form> 下方


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image-41_1gtk4fr.png)

前台顯示：


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image-41_6itdmn.png)
