【擴充功能】OnVoard: AOV 進度條
在您開始之前:
請確保您已經註冊了OnVoard賬號， 您目前未有Onvoard 賬戶, 可以點擊 這裡 去註冊賬戶。
有關 OnVoard 的方案與費用，請參考 這裡。
OnVoard: AOV進度條功能可以在商品和購物車頁面展示進度條，顯示還差多少商品即可獲得相關的優惠，從而提升客戶在您官網的加購率。此功能商家可以客製化進度條內容，從字體顏色，字型，建立適合您官網風格的進度條顯示設計。您可以點擊以下[示範商店](https://aovprogressbardemo.easy.co/products/hudderton-backpack)去查看OnVoard: AOV進度條於前台顯示。
串接 OnVoard: AOV 進度條
步驟 1: 前往 EasyStore後台 > 擴充功能 > 更多 > 尋找 OnVoard: AOV Progress Bar。
步驟 2: 安裝 OnVoard: AOV Progress Bar。
步驟 3: 登入進您的 Onvoard 賬戶。
步驟 4 : 前往 E-commerce > EasyStore Settings > 開啟 Install Scripts 按鈕。開啟 Install Scripts 按鈕, 系統會自動為您加載相關程序腳本至您的官網。
步驟 1 ：前往[ overview page](https://console.onvoard.com/aov-progress-bar-overview) > 點擊 Add AOV Progress Bar。
在Setting里請確認“Status”是 “Active” 的狀態。
請確認“Platform”平台是EasyStore，選擇EasyStore作為平台，系統會直接檢測到來自EasyStore的商品數據。
步驟 2 : 點擊 Submit 提交。
步驟 1 : 前往 AOV Progress Bar overview > Default AOV Progress Bar > 點擊右方三個點設定按鈕 > Edit AOV Progress Bar。
步驟 2 : 前往 Styles > 這裡您可以客製化您的進度條前台顯示設計。
步驟 3：前往 Content > Discounts，在這裡您可以做促銷優惠設定，您可以設定獲得該優惠的最低價格 “Min Amount”。在CTA的部分，您可以設定進度條顯示的主內容：
例如：添加多 【所需數額】 即可獲得 10% 折扣優惠 ！
步驟 4：此外，在Descriptor和Completion note，您可以輸入當客戶成功達到滿額，獲得優惠之後所顯示的文字內容。
步驟 5 : 點擊 Preview ，前往AOV進度條預覽頁面。
Cart Amount 會根據輸入的數字顯示總下單金額。
Background colour 您可以設定不同背景顏色測試進度條在前台的顯示。
步驟 4 : 點擊上方最右邊 submit 按鈕 > 完成。
📝 注意：
若在 AOV Progress Bar overview > Default AOV Progress Bar > 點擊右方三個點設定按鈕 > Edit AOV Progress Bar > Setting > Placement中 > 若是選擇 Product Page 或者 Cart，將不會顯示 “Show Code”。
選擇 Product Page 或者 Cart，系統將自動化顯示進度條在您的商品頁面或是購物車頁面，無需編輯原始碼。
若您選擇 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' %} 下方。
（ Candy 或之前發佈的佈景主題）
同樣的複製了代碼時候，登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > cart-drawer.liquid 文件 > 將代碼粘貼在 {% if cart.announcements.size > 0 %} 的上方 > 儲存。
📌 注意 : 可以添加代碼 <hr class="hr--clear"> 來添加空行，以避免AOV 進度條直接貼至商品。 成功將如以下顯示：
（ Aroma 或更新的佈景主題）
登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > 找到 main-cart.liquid 文件 > 粘貼在 {% app_snippet 'cart/content_top' %} 下方
請確保您已經註冊了OnVoard賬號， 您目前未有Onvoard 賬戶, 可以點擊 這裡 去註冊賬戶。
有關 OnVoard 的方案與費用，請參考 這裡。
1. 功能介紹
OnVoard: AOV進度條功能可以在商品和購物車頁面展示進度條，顯示還差多少商品即可獲得相關的優惠，從而提升客戶在您官網的加購率。此功能商家可以客製化進度條內容，從字體顏色，字型，建立適合您官網風格的進度條顯示設計。您可以點擊以下[示範商店](https://aovprogressbardemo.easy.co/products/hudderton-backpack)去查看OnVoard: AOV進度條於前台顯示。
串接 OnVoard: AOV 進度條
步驟 1: 前往 EasyStore後台 > 擴充功能 > 更多 > 尋找 OnVoard: AOV Progress Bar。
步驟 2: 安裝 OnVoard: AOV Progress Bar。
步驟 3: 登入進您的 Onvoard 賬戶。
步驟 4 : 前往 E-commerce > EasyStore Settings > 開啟 Install Scripts 按鈕。開啟 Install Scripts 按鈕, 系統會自動為您加載相關程序腳本至您的官網。
2. 串接 OnVoard: AOV 進度條
步驟 1 ：前往[ overview page](https://console.onvoard.com/aov-progress-bar-overview) > 點擊 Add AOV Progress Bar。
在Setting里請確認“Status”是 “Active” 的狀態。
請確認“Platform”平台是EasyStore，選擇EasyStore作為平台，系統會直接檢測到來自EasyStore的商品數據。
步驟 2 : 點擊 Submit 提交。
3. 建立促銷優惠
步驟 1 : 前往 AOV Progress Bar overview > Default AOV Progress Bar > 點擊右方三個點設定按鈕 > Edit AOV Progress Bar。
步驟 2 : 前往 Styles > 這裡您可以客製化您的進度條前台顯示設計。
步驟 3：前往 Content > Discounts，在這裡您可以做促銷優惠設定，您可以設定獲得該優惠的最低價格 “Min Amount”。在CTA的部分，您可以設定進度條顯示的主內容：
例如：添加多 【所需數額】 即可獲得 10% 折扣優惠 ！
步驟 4：此外，在Descriptor和Completion note，您可以輸入當客戶成功達到滿額，獲得優惠之後所顯示的文字內容。
步驟 5 : 點擊 Preview ，前往AOV進度條預覽頁面。
Cart Amount 會根據輸入的數字顯示總下單金額。
Background colour 您可以設定不同背景顏色測試進度條在前台的顯示。
步驟 4 : 點擊上方最右邊 submit 按鈕 > 完成。
4. 設定 OnVoard: AOV 進度條 (商品頁面)
📝 注意：
若在 AOV Progress Bar overview > Default AOV Progress Bar > 點擊右方三個點設定按鈕 > Edit AOV Progress Bar > Setting > Placement中 > 若是選擇 Product Page 或者 Cart，將不會顯示 “Show Code”。
選擇 Product Page 或者 Cart，系統將自動化顯示進度條在您的商品頁面或是購物車頁面，無需編輯原始碼。
若您選擇 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' %} 下方。
5. 設定 OnVoard: AOV 進度條 (購物車頁面)
（ Candy 或之前發佈的佈景主題）
同樣的複製了代碼時候，登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > cart-drawer.liquid 文件 > 將代碼粘貼在 {% if cart.announcements.size > 0 %} 的上方 > 儲存。
📌 注意 : 可以添加代碼 <hr class="hr--clear"> 來添加空行，以避免AOV 進度條直接貼至商品。 成功將如以下顯示：
（ Aroma 或更新的佈景主題）
登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > 找到 main-cart.liquid 文件 > 粘貼在 {% app_snippet 'cart/content_top' %} 下方
更新時間： 07/02/2025
感謝！