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

# 【官網設計】在商品頁面新增 「聯繫我們」按鈕（Contact Form/Contact Form Plus）

此文章將說明如何在商品頁面上，新增「聯繫我們」 的按鈕 （Contact Form/Contact Form Plus）

💡 小提醒 : 

* 你可以根據的喜愛，更改 "Contact Us" 按鈕名稱至其他字

* 若你不想要點擊按鈕後導向新的頁面，可將 target="_blank" 移除

* 切记需将 Contact Form 或者 Contact Form Plus 的连结，更换至你自己的连结

* 除了 Contact Form/Contact Form Plus 連結，你也可以自由放入可導向到聯繫你的連結
---

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

###### 步驟一：編輯原始碼
1. 前往 EasyStore後台  → 銷售管道  → 品牌官網 → 佈景主題 → 編輯原始碼 → product.liquid → 於大約第 127 行 → 搜尋 AddToCartText

2. 在指定的地方，貼上以下 Contact Form 代碼。



```
<a id="contactUsBtn" href="https://yourdomainname/apps/contact-form-plus" target="_blank" class="btn btn-contactus">
Contact us 
</a>
```

連結例子 : 

Contact Form : https://yourdomainname/a/contact-form

Contact Form Plus : https://yourdomainname/apps/contact-form-plus

** "yourdomainname" = 你的商店域名

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

###### 步驟二 : 點擊儲存，完成！
---

### Aroma 或其後發佈之佈景主題（新版主題）

###### 步驟一：編輯原始碼

1. 前往 EasyStore後台  → 銷售管道  → 品牌官網 → 佈景主題 → 編輯原始碼 → main-product.liquid 文件 → 搜尋 {% app_snippet 'product/button' %} → 於上方加入以下代碼

```
<a id="contactUsBtn" href="https://yourdomainname/apps/contact-form-plus" target="_blank" class="btn btn-contactus">
Contact us 
</a>
```

切记需将 Contact Form 或者 Contact Form Plus 的连结，更换至你自己的连结

連結例子 : 

Contact Form : https://yourdomainname/a/contact-form

Contact Form Plus : https://yourdomainname/apps/contact-form-plus

** "yourdomainname" = 你的商店域名

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

###### 步驟二 : 點擊儲存，完成！
---

### 前台顯示結果 :

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