【擴充功能】OnVoard: AOV 進度條
🔹 功能介紹
🔹 如何設定?
🔹 設定顯示進度條的位置
在您開始之前:
- 請確保您已經註冊了OnVoard帳號, 您目前未有Onvoard 帳戶, 可以點擊 這裡 去註冊帳戶
- 有關 OnVoard 的方案與費用,請參考 這裡。
功能介紹
OnVoard: AOV進度條功能可以在商品和購物車頁面展示進度條,顯示還差多少商品即可獲得相關的優惠,從而提升客戶在您官網的加購率。
此功能商家可以客製化進度條內容,從字體顏色,字型,建立適合您官網風格的進度條顯示設計。
您可以點擊以下示範商店去查看OnVoard: AOV進度條於前台顯示
串接 OnVoard: AOV 進度條
- 前往 EasyStore後台 > 擴充功能 > 更多 > 尋找 OnVoard: AOV Progress Bar
- 安裝 OnVoard: AOV Progress Bar
- 登入進您的 Onvoard 帳戶
請確認 【Platform 平台】是 EasyStore,選擇 EasyStore 作為平台,系統會直接檢測到來自 EasyStore 的商品數據
- 前往 E-commerce > EasyStore Settings > 開啟 Install Scripts 按鈕,開啟 Install Scripts 按鈕, 系統會自動為您加載相關程序腳本至您的官網
或是直接點擊 AOV Progress Bar
- 前往 【overview page】 > 點擊 【Add AOV Progress Bar】 > 建立優惠進度條
- 前往 【AOV Progress Bar overview】 > 【Default AOV Progress Bar】 > 點擊右方三個點設定按鈕 > 【Edit AOV Progress Bar】>可編輯優惠進度條
- 前往 Styles > 這裡您可以客製化您的進度條前台顯示設計
- 前往 Content > Discounts,在這裡您可以做促銷優惠設定,您可以設定獲得該優惠的最低價格 【Min Amount】。例如:滿千免運,這樣的話【Min Amount】要輸入 1000
在CTA 的部分,您可以設定進度條顯示的主內容:例如:再消費 【所需數額】 即可獲得 10% 折扣優惠 !
如果有多種優惠的設定,顯示如下
- 此外,在 Descriptor 和 Completion note,您可以輸入當客戶成功達到滿額,獲得優惠之後所顯示的文字內容。
- 點擊 Preview ,前往AOV進度條預覽頁面。
- Cart Amount 根據輸入的數字,來預覽購物車的金額達到優惠條件的顯示
- Background colour 您可以模擬網站的背景顏色,測試進度條在前台的顯示
- 切換到【 Settings 】> 選取進度條的狀態 > 選擇進度條出現的位置 > 點擊上方最右邊 submit 按鈕
可在管理介面確認進度條的使用狀態是否已激活
設定 OnVoard: AOV 進度條 顯示位置
- Custom Placement 可以自行選擇想要放在哪個指定頁面與區塊 (例如商品頁面以及購物車頁面)。
Custom Placement 自定義位置:商品頁面
- 點擊 </> Show Code > 點擊Copy複製 AOV Progress Bar Snippet 代碼。
- 黏貼代碼在 EasyStore 後台
Candy 或之前發佈的佈景主題
登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > product.liquid > 尋找 {% app_snippet 'product/button' %} > 將代碼複製在 {% app_snippet 'product/button' %} 下方。
Aroma 或更新的佈景主題
登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > main-product.liquid > 尋找 {% app_snippet 'product/button' %} > 將代碼複製在 {% app_snippet 'product/button' %} 下方。
Custom Placement 自定義位置:購物車頁面
Candy 或之前發佈的佈景主題
同樣的複製了代碼時候,登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > cart-drawer.liquid 文件 > 將代碼貼在 {% if cart.announcements.size > 0 %} 的上方 > 儲存。
成功將如以下顯示:
Aroma 或更新的佈景主題
登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > 找到 main-cart.liquid 文件 > 貼在 {% app_snippet 'cart/content_top' %} 下方
更新時間: 11/06/2025
感謝!