How to create a tiered progress bar at cart using Monk?
This is a guide on how you can set up tiered rewards based on cart value/number of items in the cart using Monk’s Cart Progress Bar funnel.
The Cart Progress Bar funnel embeds a gamified progress bar in your theme's native cart which can be used to communicate to your customers that they are eligible for a specific reward like free gift/ free shipping etc. on reaching a certain milestone. This is compatible with all types of carts - drawer, cart popup, cart page etc.
The app does not add, remove or edit any of your theme's existing code.
If you're trying to configure a progress bar at checkout - please refer to this article as well
1. Funnel Creation
2. Eligibility Rules
3. Method and Currency
4. Milestones and Rewards
5. Advanced Configurations
6. Content and Display
FAQ
Here is an example of what it will look like live on your website:
Click on 'Create New Funnel'> Select the 'Offer' as 'Gifts and Shipping'> Choose the rewards that you would like to give to your customers like 'Free gift', 'Order level discounts', 'Free shipping' under 'With banner and progress bar' section> Set the Offer Name.
On Step 1, you can choose the rules for the progress bar to be triggered - to set it up for a specific location, locale, customer tags etc.
To know more about the eligibility rules, please refer this article.
You can also schedule the progress bar for a specific date range from Step 1 of the funnel set up, using this setting below -
You can choose to configure the progress bar either on cart value or count of items in cart. Please note that you can only select one of these 2 options. If you select cart value, all your milestones will be displayed for cart value (same for item count).
To display the progress bar for a specific currency, simply select your desired option from the dropdown. If you choose "All Currencies," the milestone amount will be automatically converted to the customer's local currency based on the conversion rates using your store's currency as the base. For example, if base currency is USD and the offer is set for all currencies then, conversion will be on the basis of USD. So, 10 USD would mean 14.42 CAD, 9.59 EUR, 865.13 INR etc.
To offer different promotions based on countries, you can create multiple Cart Progress Bar funnels, each tailored to a specific country. In Step 1 of each funnel, use the 'Specific country' eligibility rule to select the countries where the promotion will apply.
For instance, if you want to provide Free Shipping at the USD 100 milestone and a Free Gift at the USD 150 milestone for customers in the USA, but only a Free Gift at the CAD 150 milestone for customers in Canada, you'll have to create two separate funnels. In both funnels, the 'Specific country' rule ensures that the 2 progress bars are mutually exclusive & the right offer is shown to the right audience.
The app automatically detects each session's country by analyzing the IP address, so customers will see the correct offer based on their location.
The next step is to set the milestones and rewards for the cart progress bar. You can set the milestone for a particular amount or number of items in cart and set multiple rewards for each milestone.
You can offer up to 6 rewards in each milestone. The app offers 5 types of rewards -
Free Gift Auto Add- in this reward, the gift gets auto added to the customer’s cart on reaching this milestone.
If you have set up only 1 milestone of free gift and the free gift product is out of stock or not available in the Online Store sales channel, the progress bar will not be visible at all.
Free Gift Selection- with this reward, you can give your customers an option to choose their gift (variant of the gift as well) from various options.
You cannot select both Free gift auto add and Free gift manual selection as rewards for the same milestone.
Discounts - this reward allows you to set up tiered automatic order level discounts that will be applied once a customer crosses the milestone.
Free Shipping - this reward is only for display purposes through the cart progress bar. You will have to set up the shipping rules in your Shopify backend. To view this, go to Settings > Shipping and Delivery
Custom Reward - This reward type is only for display purposes & gives you an opportunity to display any reward/text that you would like. For example - if you want your customers to use a manual discount code at checkout, you can use custom reward in progress bar to display discount code information and set up the discount code in Shopify’s discounts section as shown below -
You can enable/disable the following advanced settings as per your requirements -
Display the banner above progress bar - If enabled, it will show a line of text above the progress bar. If disabled, no text will appear. This text can be customised in Step 3 (Text and Display)
Display the milestones in the widget - If enabled, it will show the cart value which should be crossed to access the reward. If disabled, no text will appear.
Display the rewards in the widget - If enabled, it will show the eligible rewards in the cart progress bar. If disabled, no text will appear.
Display progress bar even if none of the eligible products are in the cart - If this setting is enabled, the cart progress bar will display even if the rule set up on Step 1 funnel are not met. This comes in handy when you have setup the progress bar in certain locales/countries or for only specific collections.
Only award the most recent milestone - If enabled, only the reward for reaching the latest milestone will be granted to the customer. Rewards from previous milestones will be automatically removed. For example, if the first milestone offers a free gift at a $500 cart value and the second milestone offers a discount at $700, the customer will only receive the discount once their cart is greater than $700 with this setting enabled. However, if this setting is disabled, the customer will receive both the free gift at $500 and discount at $700 at cart values greater than $700.
If you have set up tiered discounts and the above setting is disabled, the customer will still receive only the latest milestone discount as the discounts offered through the progress bar do not stack.
Automatically refresh the page once the gift is added/removed - The app will refresh the page to display the updated cart on gift addition/removal if this setting is enabled. This is required if your theme lacks a cart listener.
Remove gifts from cart automatically if offer is not viable - If enabled, the customers cannot buy the gift product at full price. If a customer is eligible for the gift, they will recieve it at 100% discount for free and if they are ineligible for the gift, the app with automatically remove it from cart. This is useful if the gift product are samples, limited edition products etc that you don't want customers buying directly. However, if it is disabled, then the customer can buy the gift product as well at full price even if the rule is not satisfied.
Gift opt-out enabled - There can be instances when the customer does not want the free gift, they will have the option to remove the gift item from cart if this setting is enabled. However, if it is disabled, the customers will not have the choice to remove the gift. If they try to remove the product, the gift will be auto added again.
Additional advanced configuration settings change when Free Gift manual selection reward is selected -
Total gifts - This setting determines the total number of gifts that a customer can add.
Gifts per product - This setting determines the total quantity of one gift product which can be selected by the customer.
Example:
If Total gifts = 2 and Gifts per product = 1, it would imply that customers can choose a total of 2 gifts from the listed options and can choose a maximum of only 1 of a specific product
If Total gifts = 2 and Gifts per product = 2, it would imply that customers can choose a total of 2 gifts from the listed options and can choose upto 2 of a specific product
Don't display the price of the product and show it as free - If enabled, the products in the free gift selection widget will be displayed only as free and the actual price will not be displayed.
Display the variant picker - If this setting is enabled, the customer will get an option to choose a variant (size, color, etc.) of their free gift. If this setting is disabled, the variant selector will not appear.
After adding the gift, hide it from the widget - If this setting is enabled, once the customer chooses their free gifts, the free gift selection widget will disappear from the page. If this setting is disabled, the free gift selection widget stays on the page after the customer has chosen the free gift. The widget will display the chosen gift as ‘Added’.
The next section in the set up is Content where you can change and/or translate the text of the cart progress bar as per your requirements
The app also provides different layouts for the cart progress bar display. You can explore this under the design section. By default, the same layout is used across both desktop and mobile but if you wish to show a different layout for mobile - you can enable the setting 'Select a different layout for mobile' under 'Advanced display settings' as shown -
Clicking on 'Edit Display and Design' will open the global editing options of the widget including elements like font, colors, spacing of the cart progress bar for both mobile and desktop view. You can also edit the exact offer offer body configurations like the text styles, currency, price and discount.
You can also add further customizations to the display and design by adding Custom CSS. Please refer this article.
1) Why is the Cart Progress Bar visible on ineligible products/collections?
If the progress bar is set up for a specific collection A but still it is visible when products from some other collection B are in cart, this is because the setting 'Display progress bar, even if none of the eligible products are in the cart' is enabled. If disabled, the progress bar will only display if atleast one trigger product is in the cart.
2) Why does the page refresh when gift is added?
This happens because your Shopify theme is missing a piece of code known as a cart listener. Without this, the page refresh is necessary for the free gift to be added, which can make the process feel slower. Refer to this article for more information.
3) How does the app decide where the cart progress bar should display in cart and how can I alter the position?
The app detects a visual element in your Shopify theme and adds the progress bar according to the code in your cart. If you want to change the position of the progress bar, please refer to this article on how to do it. The app does not add, remove or alter any of your theme's code.
4) If a customer is eligible for multiple cart progress bars, which one will display?
For any given session, only 1 progress bar can be displayed at a time. In case a customer is eligible for multiple progress bars simultaneously, the progress bar for whichever funnel is triggered first will appear in the cart.
Example - Let’s assume that you have setup 2 progress bars with the following set up-
Cart Progress Bar 1 - Offer Gift X if product is added from Collection A
Cart Progress Bar 2 - Offer Gift Y if product is added from Collection B
In cases where a customer adds 1 item each from both collections A and B the progress bar associated with the first product that was added to cart shall be displayed. Let’s assume a product from Collection B is added first, then Cart Progress Bar 2 will be triggered and it will appear on the cart even if the customer adds a product from Collection A later. This limitation is specific only to the Cart Progress Bar funnel type & hence to avoid such cases we suggest creating these funnels without a progress bar using the app's 'Without banner and progress bar' option.
5) How to add custom image for rewards ?
Here is how can can add a custom image for rewards:
- Go to Cart Progress Bar > Actions > Edit > Text and display > Select Icon display > Edit display and Design
- Go to Reward Image section under Offer Body Configuration, then click on 'Add a custom image'
- Add file in .jpg or .png with a file size < 200 kb. You will need to add each image separately for any milestone. Please select milestone for which you want to add the custom image from the dropdown under 'Select milestone to set image' section
If you have any other questions or queries please reach out to us via chat support or write to us at support@monkcommerce.com
The Cart Progress Bar funnel embeds a gamified progress bar in your theme's native cart which can be used to communicate to your customers that they are eligible for a specific reward like free gift/ free shipping etc. on reaching a certain milestone. This is compatible with all types of carts - drawer, cart popup, cart page etc.
The app does not add, remove or edit any of your theme's existing code.
If you're trying to configure a progress bar at checkout - please refer to this article as well
How to set it up?
1. Funnel Creation
2. Eligibility Rules
3. Method and Currency
4. Milestones and Rewards
5. Advanced Configurations
6. Content and Display
FAQ
Here is an example of what it will look like live on your website:
1. Funnel Creation
Click on 'Create New Funnel'> Select the 'Offer' as 'Gifts and Shipping'> Choose the rewards that you would like to give to your customers like 'Free gift', 'Order level discounts', 'Free shipping' under 'With banner and progress bar' section> Set the Offer Name.
2. Eligibility Rules
On Step 1, you can choose the rules for the progress bar to be triggered - to set it up for a specific location, locale, customer tags etc.
To know more about the eligibility rules, please refer this article.
You can also schedule the progress bar for a specific date range from Step 1 of the funnel set up, using this setting below -
3. Method and Currency
You can choose to configure the progress bar either on cart value or count of items in cart. Please note that you can only select one of these 2 options. If you select cart value, all your milestones will be displayed for cart value (same for item count).
To display the progress bar for a specific currency, simply select your desired option from the dropdown. If you choose "All Currencies," the milestone amount will be automatically converted to the customer's local currency based on the conversion rates using your store's currency as the base. For example, if base currency is USD and the offer is set for all currencies then, conversion will be on the basis of USD. So, 10 USD would mean 14.42 CAD, 9.59 EUR, 865.13 INR etc.
To offer different promotions based on countries, you can create multiple Cart Progress Bar funnels, each tailored to a specific country. In Step 1 of each funnel, use the 'Specific country' eligibility rule to select the countries where the promotion will apply.
For instance, if you want to provide Free Shipping at the USD 100 milestone and a Free Gift at the USD 150 milestone for customers in the USA, but only a Free Gift at the CAD 150 milestone for customers in Canada, you'll have to create two separate funnels. In both funnels, the 'Specific country' rule ensures that the 2 progress bars are mutually exclusive & the right offer is shown to the right audience.
The app automatically detects each session's country by analyzing the IP address, so customers will see the correct offer based on their location.
4. Milestones and Rewards
The next step is to set the milestones and rewards for the cart progress bar. You can set the milestone for a particular amount or number of items in cart and set multiple rewards for each milestone.
You can offer up to 6 rewards in each milestone. The app offers 5 types of rewards -
Free Gift Auto Add- in this reward, the gift gets auto added to the customer’s cart on reaching this milestone.
If you have set up only 1 milestone of free gift and the free gift product is out of stock or not available in the Online Store sales channel, the progress bar will not be visible at all.
Free Gift Selection- with this reward, you can give your customers an option to choose their gift (variant of the gift as well) from various options.
You cannot select both Free gift auto add and Free gift manual selection as rewards for the same milestone.
Discounts - this reward allows you to set up tiered automatic order level discounts that will be applied once a customer crosses the milestone.
Free Shipping - this reward is only for display purposes through the cart progress bar. You will have to set up the shipping rules in your Shopify backend. To view this, go to Settings > Shipping and Delivery
Custom Reward - This reward type is only for display purposes & gives you an opportunity to display any reward/text that you would like. For example - if you want your customers to use a manual discount code at checkout, you can use custom reward in progress bar to display discount code information and set up the discount code in Shopify’s discounts section as shown below -
5. Advanced Configurations
You can enable/disable the following advanced settings as per your requirements -
Display the banner above progress bar - If enabled, it will show a line of text above the progress bar. If disabled, no text will appear. This text can be customised in Step 3 (Text and Display)
Display the milestones in the widget - If enabled, it will show the cart value which should be crossed to access the reward. If disabled, no text will appear.
Display the rewards in the widget - If enabled, it will show the eligible rewards in the cart progress bar. If disabled, no text will appear.
Display progress bar even if none of the eligible products are in the cart - If this setting is enabled, the cart progress bar will display even if the rule set up on Step 1 funnel are not met. This comes in handy when you have setup the progress bar in certain locales/countries or for only specific collections.
Only award the most recent milestone - If enabled, only the reward for reaching the latest milestone will be granted to the customer. Rewards from previous milestones will be automatically removed. For example, if the first milestone offers a free gift at a $500 cart value and the second milestone offers a discount at $700, the customer will only receive the discount once their cart is greater than $700 with this setting enabled. However, if this setting is disabled, the customer will receive both the free gift at $500 and discount at $700 at cart values greater than $700.
If you have set up tiered discounts and the above setting is disabled, the customer will still receive only the latest milestone discount as the discounts offered through the progress bar do not stack.
Automatically refresh the page once the gift is added/removed - The app will refresh the page to display the updated cart on gift addition/removal if this setting is enabled. This is required if your theme lacks a cart listener.
Remove gifts from cart automatically if offer is not viable - If enabled, the customers cannot buy the gift product at full price. If a customer is eligible for the gift, they will recieve it at 100% discount for free and if they are ineligible for the gift, the app with automatically remove it from cart. This is useful if the gift product are samples, limited edition products etc that you don't want customers buying directly. However, if it is disabled, then the customer can buy the gift product as well at full price even if the rule is not satisfied.
Gift opt-out enabled - There can be instances when the customer does not want the free gift, they will have the option to remove the gift item from cart if this setting is enabled. However, if it is disabled, the customers will not have the choice to remove the gift. If they try to remove the product, the gift will be auto added again.
Additional advanced configuration settings change when Free Gift manual selection reward is selected -
Total gifts - This setting determines the total number of gifts that a customer can add.
Gifts per product - This setting determines the total quantity of one gift product which can be selected by the customer.
Example:
If Total gifts = 2 and Gifts per product = 1, it would imply that customers can choose a total of 2 gifts from the listed options and can choose a maximum of only 1 of a specific product
If Total gifts = 2 and Gifts per product = 2, it would imply that customers can choose a total of 2 gifts from the listed options and can choose upto 2 of a specific product
Don't display the price of the product and show it as free - If enabled, the products in the free gift selection widget will be displayed only as free and the actual price will not be displayed.
Display the variant picker - If this setting is enabled, the customer will get an option to choose a variant (size, color, etc.) of their free gift. If this setting is disabled, the variant selector will not appear.
After adding the gift, hide it from the widget - If this setting is enabled, once the customer chooses their free gifts, the free gift selection widget will disappear from the page. If this setting is disabled, the free gift selection widget stays on the page after the customer has chosen the free gift. The widget will display the chosen gift as ‘Added’.
6. Content and Display
The next section in the set up is Content where you can change and/or translate the text of the cart progress bar as per your requirements
The app also provides different layouts for the cart progress bar display. You can explore this under the design section. By default, the same layout is used across both desktop and mobile but if you wish to show a different layout for mobile - you can enable the setting 'Select a different layout for mobile' under 'Advanced display settings' as shown -
Clicking on 'Edit Display and Design' will open the global editing options of the widget including elements like font, colors, spacing of the cart progress bar for both mobile and desktop view. You can also edit the exact offer offer body configurations like the text styles, currency, price and discount.
You can also add further customizations to the display and design by adding Custom CSS. Please refer this article.
Frequently Asked Questions
1) Why is the Cart Progress Bar visible on ineligible products/collections?
If the progress bar is set up for a specific collection A but still it is visible when products from some other collection B are in cart, this is because the setting 'Display progress bar, even if none of the eligible products are in the cart' is enabled. If disabled, the progress bar will only display if atleast one trigger product is in the cart.
2) Why does the page refresh when gift is added?
This happens because your Shopify theme is missing a piece of code known as a cart listener. Without this, the page refresh is necessary for the free gift to be added, which can make the process feel slower. Refer to this article for more information.
3) How does the app decide where the cart progress bar should display in cart and how can I alter the position?
The app detects a visual element in your Shopify theme and adds the progress bar according to the code in your cart. If you want to change the position of the progress bar, please refer to this article on how to do it. The app does not add, remove or alter any of your theme's code.
4) If a customer is eligible for multiple cart progress bars, which one will display?
For any given session, only 1 progress bar can be displayed at a time. In case a customer is eligible for multiple progress bars simultaneously, the progress bar for whichever funnel is triggered first will appear in the cart.
Example - Let’s assume that you have setup 2 progress bars with the following set up-
Cart Progress Bar 1 - Offer Gift X if product is added from Collection A
Cart Progress Bar 2 - Offer Gift Y if product is added from Collection B
In cases where a customer adds 1 item each from both collections A and B the progress bar associated with the first product that was added to cart shall be displayed. Let’s assume a product from Collection B is added first, then Cart Progress Bar 2 will be triggered and it will appear on the cart even if the customer adds a product from Collection A later. This limitation is specific only to the Cart Progress Bar funnel type & hence to avoid such cases we suggest creating these funnels without a progress bar using the app's 'Without banner and progress bar' option.
5) How to add custom image for rewards ?
Here is how can can add a custom image for rewards:
- Go to Cart Progress Bar > Actions > Edit > Text and display > Select Icon display > Edit display and Design
- Go to Reward Image section under Offer Body Configuration, then click on 'Add a custom image'
- Add file in .jpg or .png with a file size < 200 kb. You will need to add each image separately for any milestone. Please select milestone for which you want to add the custom image from the dropdown under 'Select milestone to set image' section
If you have any other questions or queries please reach out to us via chat support or write to us at support@monkcommerce.com
Updated on: 30/01/2025