Cart Progress Bar on Lumin Themes
Step-by-step guide to setting up the Cart Progress Bar on Lumin Themes
Last updated
Step-by-step guide to setting up the Cart Progress Bar on Lumin Themes
Last updated
Cart progress bars are a great way to encourage customers to reach specific spending thresholds by offering incentives like free shipping or discounts. With Lumin themes, this feature is native and simple to set up. Follow these steps to configure your cart progress bar.
Step 1: Enable the Cart Progress Bar
Go to your Shopify Admin Panel.
Navigate to Online Store > Themes.
Click on Customize next to your active Lumin theme.
In the theme editor, go to Theme Settings in the bottom left corner.
Click on Cart Progress Bar.
Step 2: Configure the Goals
Enable the Cart Progress Bar by toggling the setting to "On."
Set Up Your First Goal:
Enable Goal 1 by toggling the option to "On."
Set the Amount you want the customer to reach (e.g., $50 for free shipping).
Set the Message you want to show before reaching Goal 1. Example: “You’re only [x] away from <strong>FREE SHIPPING</strong>.” (Use [x] to insert the dynamic remaining amount.)
Set the Post-Goal Message. Example: “You’ve earned free shipping!”
Choose the Number of Goals:
You can set up 1, 2, or 3 goals, depending on your promotional strategy. Simply toggle additional goals on if desired.
Step 1: Enable the Advanced Settings
Go to Theme Settings > Cart Progress Bar.
Enable the Cart Progress Bar if not already done.
Enable the “Show Progress Bar Icons” to display icons for each goal.
Enable the “Use Items Subtotal for Progress Bar” if you want the subtotal of items in the cart to be the progress metric.
Step 2: Set Up Your Goals with Icons
Set Goal Amounts for each goal (e.g., $50, $100, $150).
Enable each Goal you want to use (Goal 1, Goal 2, Goal 3).
Set the Message for each goal:
Pre-Goal Message: “You’re only [x] away from <strong>FREE SHIPPING</strong>.”
Post-Goal Message: “Congratulations! You’ve earned free shipping.”
Set Icons for Each Goal:
Pre-Goal Icon: Choose an icon that will show before the goal is reached (e.g., a shopping cart or a shipping box).
Post-Goal Icon: Choose a different icon to appear once the goal is achieved (e.g., a checkmark or a gift box).
Goal Descriptions: Add a description for each goal that will appear beneath the icon. For example: “Free Shipping”.
Optional Placeholder: Use [goal] as a placeholder to display the goal amount in the message (e.g., "Free Shipping [goal]").
Final result will be like this:
Free Shipping Amount: Ensure that you have configured the free shipping threshold in the Shopify settings to match the progress bar goal.
Discounts in Dashboard: Be sure to set up any discounts or promotions in the Shopify dashboard for them to sync with the progress bar goals.
This setup will help guide your customers toward their goals, making the shopping experience more interactive and motivating them to complete their purchase while benefiting from discounts or free shipping.