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

# 【官網設計】如何在商品頁面新增 “文字和按鈕”

如果你所售賣的商品為不能直接在網路售賣，如售賣酒精類商品，然後需要顧客私下聯繫你，或是你只想在商品頁面新增聯繫按鈕，你可參考這篇文章於商品頁面下置入文字和聯繫按鈕。

| EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必慎重考慮及深入評估。

---

# 此流程僅適用於新版主題（Aroma 或其後發佈之佈景主題）

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

1. 前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 找到 main-product.liquid文件 → 搜尋  `<div class="product-form__buttons">`

2. 複製以下代碼

```
<div id=“contactSection”>
            <div class=“messagetobuy”>
              按照台灣法律規定，商家不能在網站上售賣酒精商品。<br>煩請透過以下方式聯繫我們：<br>
              &nbsp;&nbsp;1. 電話 <a href="tel:123456">123456</a><br>
              &nbsp;&nbsp;2. 點選以下【聯繫我們】以 LINE 溝通<br>
            </div>
<a id="contactUsBtn" href="https://www.line.com" target="_blank" class="btn btn-contactus">
聯繫我們
</a>
```

3. 貼在  `<div class="product-form__buttons">` 上方

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

### 步驟二：編輯代碼內容

1. 以下紅框文字皆可編輯

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

2. 電話號碼和聯繫連結即可編輯

（1）tel:123456 表示手機裡點擊會導向手機的撥電話頁面

（2）後面的 123456 表示電話號碼純文字

（3）https://www.line.com 可更改成你的 LINE 聯繫連結；或也可以放成透過 Email 聯繫：mailto:你的郵件

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

3. 或者你想要比較簡短的版本請參考使用代碼，並自行編輯文字和按鈕導向

```
div id=“contactSection”>

<div class=“messagetobuy”>

<br>如欲大量採購，請 LINE 聯絡我們：<br>

</div><a id="contactUsBtn" href="LINE 聯繫連結" target="_blank" class="btn btn-contactus">

聯絡我們

</a>
```
---
### 設定效果：

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

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


---

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

1. 佈景主題 → 編輯原始碼 → 找到 product.liquid 文件 → 搜尋  {% app_snippet 'product/field_bottom' %}

2. 將代碼貼在   {% app_snippet 'product/field_bottom' %} 上方


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_f3vwf9.png)