> ## 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). # 【擴充功能】OnVoard: AOV 進度條 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/6ygp55so5ywo6yoo5pa55qgi_71fyue.png) 🔹 [功能介紹](#1-5yqf6io95lul57s5) 🔹 [如何設定?](#1-onvoard-aov) 🔹 [設定顯示進度條的位置](#1-onvoard-aov) 在您開始之前: * 請確保您已經註冊了OnVoard帳號， 您目前未有Onvoard 帳戶, 可以點擊 [這裡](https://console.onvoard.com/register) 去註冊帳戶 * 有關 OnVoard 的方案與費用，請參考 [這裡](https://www.onvoard.com/pricing)。 | 這是需付費於第三方服務商的擴充功能 # 功能介紹 OnVoard: AOV進度條功能可以在商品和購物車頁面展示進度條，顯示還差多少商品即可獲得相關的優惠，從而提升客戶在您官網的加購率。 此功能商家可以客製化進度條內容，從字體顏色，字型，建立適合您官網風格的進度條顯示設計。 您可以點擊以下[示範商店](https://aovprogressbardemo.easy.co/products/hudderton-backpack)去查看OnVoard: AOV進度條於前台顯示 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnliqrosjsd9icwad8_1kmweve.png) # 串接 OnVoard: AOV 進度條 1. 前往 EasyStore後台 > 擴充功能 > 更多 > 尋找 OnVoard: AOV Progress Bar 2. 安裝 OnVoard: AOV Progress Bar ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1grizos.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnliirbzivlnzd1mzr_n4t1fg.png) 3. 登入進您的 Onvoard 帳戶 請確認 【Platform 平台】是 EasyStore，選擇 EasyStore 作為平台，系統會直接檢測到來自 EasyStore 的商品數據 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnlilhoa0r768d9vi6_1d2jbr0.png) 4. 前往 E-commerce > EasyStore Settings > 開啟 Install Scripts 按鈕，開啟 Install Scripts 按鈕, 系統會自動為您加載相關程序腳本至您的官網 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_101bshi.png) 或是直接點擊 AOV Progress Bar ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnlilbwh65v0wd3g2r_1fq8zt4.png) 5. 前往 【overview page】 > 點擊 【Add AOV Progress Bar】 > 建立優惠進度條 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_12ky4rg.png) 6. 前往 【AOV Progress Bar overview】 > 【Default AOV Progress Bar】 > 點擊右方三個點設定按鈕 > 【Edit AOV Progress Bar】＞可編輯優惠進度條 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_bqzxlk.png) 7. 前往 Styles > 這裡您可以客製化您的進度條前台顯示設計 | Styles作為設計進度條在前台的顯示，如顏色、字型大小 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1g33n5k.png) 8. 前往 **Content** > Discounts，在這裡您可以做促銷優惠設定，您可以設定獲得該優惠的最低價格 【Min Amount】。例如：滿千免運，這樣的話【Min Amount】要輸入 1000 在CTA 的部分，您可以設定進度條顯示的主內容：例如：再消費 【所需數額】 即可獲得 10% 折扣優惠 ！ | **Content** 為設計前優惠顯示的內容為何 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1nsvacj.png) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnlisxkd1kh5her2rn_1bex2b7.png) 如果有多種優惠的設定，完成進度條後顯示如下 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnlioz7dxpxc8dykwx_ht1i5p.png) 9. 此外，在 Descriptor 和 Completion note，您可以輸入當客戶成功達到滿額，獲得優惠之後所顯示的文字內容。 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1f8s590.png) 10. 點擊 Preview ，前往AOV進度條預覽頁面。 * Cart Amount 根據輸入的數字，來預覽購物車的金額達到優惠條件的顯示 * Background colour 您可以模擬網站的背景顏色，測試進度條在前台的顯示 | Preview 為預覽測試 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnlilxgtofphfeso51_j5klp2.png) 11. 切換到【 Settings 】＞ 選取進度條的狀態 ＞ 選擇進度條出現的位置 ＞ 點擊上方最右邊 submit 按鈕 | Settings 為設定使用狀態與顯示位置 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnlif2rnfe2k8f2nh8_3s6g19.png) 可在管理介面確認進度條的使用狀態是否已激活 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnlikhu54usqgd6fzr_1isc6c6.png) # 設定 OnVoard: AOV 進度條 顯示位置 ||| 📝 若是選擇 Product Page (Auto) 或者 Cart (Auto)，將自動顯示進度條在您的商品頁面或是購物車頁面，無需編輯原始碼，將不會顯示 【Show Code】 * Custom Placement 可以自行選擇想要放在哪個指定頁面與區塊 (例如商品頁面以及購物車頁面)。 ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/scrnli6yhy8xe8sffcvr_1h40jqt.png) || 若您選擇 Custom Placement，請繼續看以下的手動設定步驟。 ### Custom Placement 自定義位置：商品頁面 1. 點擊 Show Code > 點擊Copy複製 AOV Progress Bar Snippet 代碼。 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1e61d8v.png) 2. 黏貼代碼在 EasyStore 後台 ###### Candy 或之前發佈的佈景主題 登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > product.liquid > 尋找 {% app_snippet 'product/button' %} > 將代碼複製在 {% app_snippet 'product/button' %} 下方。 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1uhbvbo.png) ###### Aroma 或更新的佈景主題 登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > main-product.liquid > 尋找 {% app_snippet 'product/button' %} > 將代碼複製在 {% app_snippet 'product/button' %} 下方。 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1uixth6.png) ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_40j3r3.png) ### Custom Placement 自定義位置：購物車頁面 ###### Candy 或之前發佈的佈景主題 同樣的複製了代碼時候，登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > cart-drawer.liquid 文件 > 將代碼貼在 {% if cart.announcements.size > 0 %} 的上方 > 儲存。 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1i3q0mw.png) ||| 📌 注意 : 可以添加代碼
來添加空行，以避免AOV 進度條直接貼至商品。 成功將如以下顯示： ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_4zxq1e.png) ###### Aroma 或更新的佈景主題 登入 EasyStore後台 > 銷售管道 > 品牌官網 > 佈景主題 > 編輯原始碼 > 找到 main-cart.liquid 文件 > 貼在 {% app_snippet 'cart/content_top' %} 下方 ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_udwkt8.png)