OnVoard: AOV Progress Bar

In this article:

Introduction
Connect OnVoard AOV Progress Bar with your EasyStore
Create multi-tiers discounting
Set up OnVoard: AOV Progress Bar (At product page)
Set up OnVoard: AOV Progress Bar (At shopping cart)

Before you start:

Must connect your EasyStore account with OnVoard. Don't know how to connect? Click here

Make sure you have a registered an account with OnVoard. If you do not have a OnVoard account yet, click here to register

For OnVoard pricing and plans, kindly refer to this page here

Above all code editing, you will need to re-edit the code again if you switch to a new theme template

We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons

1. Introduction

OnVoard AOV Progress Bar provides the opportunity to create unique discount that might attracts customers to add on purchase. You are able to customize the AOV Progress bar from text color and fonts, also create a progress bar that matches your store design. See Demo Store to view example for OnVoard : AOV Progress Bar.

2. Connect OnVoard AOV Progress Bar with your EasyStore

Step 1: EasyStore Admin > Apps > More apps > Search OnVoard: AOV Progress Bar



Step 2: Install OnVoard: AOV Progress Bar



Step 3: Sign in to your OnVoard account. If you do not have an OnVoard account yet, click here to register

Step 4 : Go to E-commerce > EasyStore Settings > Turn on install scripts for OnVoard. By turning on the install scripts, it will automatically install loader script to your store

2. Connect OnVoard AOV Progress Bar with your EasyStore

Step 1 ：Go to overview page > Add AOV Progress Bar



Status > Active

Platform > EasyStore. By selecting EasyStore as the platform, it will automatically detect product data from your EasyStore



Step 2 : Submit

3. Create multi-tiers discounting

Step 1 : Go to AOV Progress Bar overview > Click 3 dots on > Edit AOV Progress Bar



Step 2 : Go to Styles > Content > Discounts. You can set the minimum amount for discount

E.g. you can set discounting such - Free Shipping if total order amount is equal to or above RM100



Step 3 : Click Preview to preview the AOV Progress Bar display

Cart Amount is the bar changes based on different total order amount

Background colour to preview the visibility of the bar



Step 4 : Click submit on top right > Done

4. Set up OnVoard: AOV Progress Bar (At product page)

📌 Important Note:

If you are in AOV Progress Bar Overview, click the three dots here on the right > Edit AOV Progress Bar > Setting> Placement.



If you select Product Page or Cart, “Show Code” will not be displayed. The system will automatically display the AOV progress bar on your product page or shopping cart page, without editing the source code.



If you choose Custom Placement, please refer to the steps below. With Custom Placement, you can choose which specific page you want to place the AOV Progress Bar.

Step 1 : Click </> Show Code > Copy the AOV Progress Bar Snippet



Step 2 : Login to EasyStore > Online Store > Edit Source > product.liquid > Search for {% app_snippet 'product/button' %} and paste the code below



Step 3 : Save > Done

5. Set up OnVoard: AOV Progress Bar (At shopping cart)

If you want the AOV Progress Bar to be on the add to cart section, you can go to Channels > Online Store > Edit Source > select cart-drawer.liquid file> paste the code before {% if cart.announcements.size > 0 %} > Save



📌 Note : can add <hr class="hr--clear"> for space if the AOV Progress Bar stick to the product. The end result would be like the image shown below.

Updated on: 06/10/2023