Cart Progress Bar Demo

Interactive Demo

Control the cart progress bar in real-time. Adjust the cart amount and minimum threshold to see how the progress bar and messages update.

Different Themes

Examples of different visual themes you can create with CSS custom properties.

Usage Examples

Basic Setup

<cart-progress-bar
  threshold="75.00"
  current="25.50"
  money-format="${{amount}}"
  message-above="🎉 Congratulations! You've qualified for FREE shipping!"
  message-below="Add [amount] more for FREE shipping!">
  <p data-content-cart-progress-message></p>
  <progress-bar></progress-bar>
</cart-progress-bar>

Currency Formatting

<!-- US Dollars -->
<cart-progress-bar money-format="${{amount}}" ...>

<!-- Euros with comma separator -->
<cart-progress-bar money-format="{{amount_with_comma_separator}} EUR" ...>

<!-- No decimals -->
<cart-progress-bar money-format="${{amount_no_decimals}}" ...>

<!-- Shopify Liquid integration -->
<cart-progress-bar money-format="{{ shop.money_format }}" ...>

JavaScript API

const progressBar = document.querySelector('cart-progress-bar');

// Set progress percentage directly
progressBar.setPercent(67);

// Update cart amount
progressBar.setCurrentAmount(45.50);

// Change threshold
progressBar.setThresholdAmount(100.00);

// Get current progress info
const info = progressBar.getProgress();
console.log(info.percent, info.isComplete, info.thresholdAmount);

Custom Styling

cart-progress-bar {
  /* Core color customization */
  --cart-progress-section-bg: #f8f9fa;
  --cart-progress-section-color: #495057;
  --cart-progress-bar-bg: #e9ecef;
  --cart-progress-bar-fill-before: #28a745;
  --cart-progress-bar-fill-after: #007bff;
  
  /* Structure (optional) */
  --cart-progress-bar-height: 16px;
  --cart-progress-bar-border-radius: 8px;
}

Features