Fast Track: Launching Your First Reward Progress Bar

Get your first upsell progress bar live in minutes and start boosting your average order value today.

---

Overview

BlueCart helps you increase average order value by showing customers how close they are to unlocking rewards like free shipping, discounts, or free gifts. When customers see a visual progress bar showing they're "$15 away from free shipping," they're motivated to add more to their cart.

In this guide, you'll create a simple free shipping progress bar that displays on your product and cart pages.

---

Create Your First Campaign

A campaign is a set of goals and display settings that work together. You might have one campaign for free shipping and another for tiered discounts.

To create your first campaign:

1. Open the BlueCart app from your Shopify admin
2. Click the Create Campaign button
3. Give your campaign a descriptive name (e.g., "Free Shipping Progress Bar")

Your campaign is now ready to configure with goals and styling.

---

Set Your First Goal

Goals (also called milestones) are the thresholds customers work toward. The most common goal is a free shipping threshold.

To set up a free shipping goal:

1. In your campaign, find the Goals section
2. Click Add Goal to create your first milestone
3. Choose how progress is measured:
   • By cart value before discount — Most common option
   • By cart value after discount — Counts value after discounts applied
   • By cart quantity — Based on number of items in cart
4. Set the goal value (e.g., $50)
5. Configure your messages:
   • Progress message: Spend {remaining} more for FREE SHIPPING!
   • Completed message: You've unlocked FREE SHIPPING!
6. Optionally select a milestone icon (gift, truck, discount, plane, or ship)

The {remaining} variable automatically calculates how much more the customer needs to spend and formats it in their currency.

---

Choose Display Style

BlueCart offers 6 display layouts to match your store's design, with separate options for desktop and mobile.

To select a layout:

1. Navigate to the Display options tab in your campaign
2. Select your preferred layout from the Desktop view dropdown:
   • Progress bar + checklist — Shows the bar with all milestones listed below
   • Checklist only — Milestones displayed as a list without the progress bar
   • Progress bar only — Clean, minimal progress indicator
   • Progress bar with 1 goal — Shows bar with only the next milestone
   • Progress bar with 1 goal + completed checklist — Shows completed milestones checked off
   • Progress bar with 1 goal + all checklist — Shows all milestones with current highlighted
3. Select your Mobile view layout (can be different from desktop)
4. Check the Live Preview panel on the right to see your selection in action

Next, go to the Designs tab to customize colors:

• Progress bar fill and background colors
• Milestone icons, borders, and backgrounds
• Message text colors
• Container styling (sharp, small rounded, or medium rounded corners)
• Animated progress bar fills and milestone sizes (12-120px)

---

Add to Your Store

Once your campaign is configured, you need to add it to your store pages. BlueCart offers two integration methods.

Method 1: Theme App Block (Recommended)

To add the BlueCart block:

1. In your campaign settings, copy the Campaign ID
2. Open your Shopify admin and go to Online Store → Themes
3. Click Customize on your active theme
4. Navigate to your Product page, Collection page, or Home page
5. Click Add block and search for BlueCart - Progress Bar in the Apps section
6. Select the block and paste your Campaign ID
7. Adjust margins (top, bottom, left/right) as needed
8. Position the block where you want it to appear

Method 2: Shortcode (For Cart Drawers)

For cart drawers or custom templates, use the shortcode method:

1. Enable BlueCart - Shortcode in your theme's App Embeds
2. Add this code to your cart drawer template:

   <div data-id="YOUR_CAMPAIGN_ID" class="bcpb-bluecart"></div>
   

   CopyCopied!
3. Replace YOUR_CAMPAIGN_ID with your actual Campaign ID

---

Test and Publish

Before going live, preview your progress bar to ensure everything works correctly.

To test your campaign:

1. Click Preview in your theme editor to see the progress bar on your storefront
2. Add products to your cart and verify:
   • The progress bar updates as you add items
   • Messages display correctly
   • Colors and styling look right
3. Test the completed state by meeting your goal threshold
4. Once satisfied, click Save in the theme editor
5. In BlueCart, set your campaign status to Published

Your progress bar is now live and working to increase your average order value.

---

Next Steps

Now that your first campaign is live, consider:

• Adding multiple goals for tiered rewards
• Setting up different campaigns for different customer segments
• Exploring multi-currency settings for international customers