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

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

此教學僅適用於新版主題（Aroma 或其後發佈之佈景主題）

步驟一：編輯原始碼

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

複製以下代碼

<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>

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

步驟二：編輯代碼內容

以下紅框文字皆可編輯




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

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

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

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




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

div id=“contactSection”>

<div class=“messagetobuy”>

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

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

聯絡我們

</a>

設定效果：

更新時間： 17/10/2024