有關的文章：擴充功能

【擴充功能】OnVoard: AOV 進度條

🔹 功能介紹
🔹 如何設定?
🔹 設定顯示進度條的位置

在您開始之前:

請確保您已經註冊了OnVoard帳號，您目前未有Onvoard 帳戶, 可以點擊這裡去註冊帳戶

有關 OnVoard 的方案與費用，請參考這裡。

需付費的擴充功能

功能介紹

OnVoard: AOV進度條功能可以在商品和購物車頁面展示進度條，顯示還差多少商品即可獲得相關的優惠，從而提升客戶在您官網的加購率。
此功能商家可以客製化進度條內容，從字體顏色，字型，建立適合您官網風格的進度條顯示設計。

您可以點擊以下[示範商店](https://aovprogressbardemo.easy.co/products/hudderton-backpack)去查看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 > 這裡您可以客製化您的進度條前台顯示設計
Styles作為設計進度條在前台的顯示，如顏色、字型大小

前往 Content > Discounts，在這裡您可以做促銷優惠設定，您可以設定獲得該優惠的最低價格【Min Amount】。例如：滿千免運，這樣的話【Min Amount】要輸入 1000
在CTA 的部分，您可以設定進度條顯示的主內容：例如：再消費【所需數額】即可獲得 10% 折扣優惠！

Content 為設計前優惠顯示的內容為何

如果有多種優惠的設定，顯示如下

此外，在 Descriptor 和 Completion note，您可以輸入當客戶成功達到滿額，獲得優惠之後所顯示的文字內容。

點擊 Preview ，前往AOV進度條預覽頁面。

Cart Amount 根據輸入的數字，來預覽購物車的金額達到優惠條件的顯示
Background colour 您可以模擬網站的背景顏色，測試進度條在前台的顯示
Preview 為預覽測試

切換到【 Settings 】＞選取進度條的狀態＞選擇進度條出現的位置＞點擊上方最右邊 submit 按鈕
Settings 為設定使用狀態與顯示位置

可在管理介面確認進度條的使用狀態是否已激活

設定 OnVoard: AOV 進度條顯示位置

📝 若是選擇 Product Page (Auto) 或者 Cart (Auto)，將自動顯示進度條在您的商品頁面或是購物車頁面，無需編輯原始碼，將不會顯示【Show Code】
Custom Placement 可以自行選擇想要放在哪個指定頁面與區塊 (例如商品頁面以及購物車頁面)。

若您選擇 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' %} 下方。